# WireLayer

> WireLayer: a component library for Vue 3 (@wirecore/wirelayer-vue), React (@wirecore/wirelayer-react), React Native (@wirecore/wirelayer-native) and plain HTML (@wirecore/wirelayer-css). Vue and React share the same API and DOM; Tailwind CSS v4 recipes in @wirecore/wirelayer-recipes; WCAG 2.2 AA; English UI texts by default, German and other languages via LocaleProvider.

Full API in llms-full.txt; MCP server: `npx -y -p @wirecore/wirelayer-mcp wirelayer-mcp` (tools list_components, get_component, search_components, get_guide).

## Conventions

- React props in camelCase; Vue takes the same props in kebab-case. Controlled values: React `value` + `onValueChange`, Vue `v-model`; other `onXChange` pairs are `v-model:x` in Vue, other callbacks `@x` events.
- `className` (React) is `class` (Vue). Every component takes `classes` (extra Tailwind classes per part) and reads defaults from `RecipesProvider`.
- Content: React props of type ReactNode/render functions are named slots in Vue (e.g. DataTable `cell` → `#cell-<id>`, `expansion` → `#expansion`).
- DataTable feature modules in `features` (only these end up in the bundle): `virtualRows` from `@wirecore/wirelayer-react/virtual` for `virtual`; `dateInput` and `numberInput` from `@wirecore/wirelayer-react/data-table` for DatePicker/NumberInput in date and number filters and editors (without them: the browser's inputs). Vue: the same from `@wirecore/wirelayer-vue/…`.
- Texts come from `LocaleProvider` (en-US built in; de, fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr via `registerLocale('fr', fr)` with `fr` from `@wirecore/wirelayer-vue/locales/fr` or `@wirecore/wirelayer-react/locales/fr`); dates are ISO strings ("2026-10-20", "2026-10-20T10:00").

## Layout

- [Accordion](?path=/story/react_layout-accordion--playground): Sections that open and close (one or several at a time); each item is a heading with a button (aria-expanded) (`@wirecore/wirelayer-react`)
- [AccordionItem](?path=/story/react_layout-accordion--playground): One section of an Accordion: heading button and content (`@wirecore/wirelayer-react`)
- [Affix](?path=/story/react_layout-affix--playground): Fixed in a corner of the window, e.g. a help or chat button (`@wirecore/wirelayer-react`)
- [AppShell](?path=/story/react_layout-appshell--playground): App frame with landmarks: skip link, header (banner), side navigation (from lg on; below a drawer behind the menu button), main (target of the skip link), an optional aside (from xl on) and footer. Optional: rail, resize handles (role="separator"), headroom header, navbar running the full height. (`@wirecore/wirelayer-react`)
- [AspectRatio](?path=/story/react_layout-aspectratio--playground): Keeps the ratio of width to height; an image, video or iframe inside fills it (`@wirecore/wirelayer-react`)
- [BlockUi](?path=/story/react_layout-blockui--playground): While blocked: the content is inert (no focus, no clicks) and busy; the overlay says why (`@wirecore/wirelayer-react`)
- [Center](?path=/story/react_layout-center--playground): Centres its content horizontally and vertically (`@wirecore/wirelayer-react`)
- [Collapse](?path=/story/react_layout-collapse--playground): Content that opens and closes with an animated height (or width, motion-safe). Give it an id and point the button's aria-controls at it; the button carries aria-expanded. (`@wirecore/wirelayer-react`)
- [ConfigProvider](?path=/story/react_layout-configprovider--playground): Locale, recipe defaults, size and theme for a part of the page – one wrapper instead of several providers (`@wirecore/wirelayer-react`)
- [Container](?path=/story/react_layout-container--playground): Centred content with a maximum width and side padding (`@wirecore/wirelayer-react`)
- [Divider](?path=/story/react_layout-divider--playground): Horizontal or vertical line, optionally with a label (`@wirecore/wirelayer-react`)
- [Group](?path=/story/react_layout-group--playground): Children side by side, wrapping onto new lines (`@wirecore/wirelayer-react`)
- [Masonry](?path=/story/react_layout-masonry--playground): Cards of different heights in columns; the order of the children stays the reading order (`@wirecore/wirelayer-react`)
- [PageHeader](?path=/story/react_layout-pageheader--playground): Top of a page: breadcrumb, back link, title (heading) with status, subtitle and meta, actions, tabs (`@wirecore/wirelayer-react`)
- [Panel](?path=/story/react_layout-panel--playground): Card with a heading (and actions); toggleable: the heading holds a button with aria-expanded (`@wirecore/wirelayer-react`)
- [RecipesProvider](?path=/story/react_layout-recipesprovider--playground): Own defaults and classes per part for the components below (inner providers win) (`@wirecore/wirelayer-react`)
- [Scroller](?path=/story/react_layout-scroller--playground): A row that scrolls sideways: the row is a focusable region (arrow keys scroll it); the arrow buttons are for the pointer only and show while there is more in that direction, the edges fade. (`@wirecore/wirelayer-react`)
- [ScrollPanel](?path=/story/react_layout-scrollpanel--playground): Native scrolling with slim scrollbars; the viewport is a named, focusable region (arrow keys scroll) (`@wirecore/wirelayer-react`)
- [SimpleGrid](?path=/story/react_layout-simplegrid--playground): Columns of equal width, fixed per breakpoint or as many as fit (`@wirecore/wirelayer-react`)
- [Splitter](?path=/story/react_layout-splitter--playground): Panels with handles between them (role="separator"): drag, or arrow keys (Shift for bigger steps) and Home/End on the handle; Enter folds a collapsible panel; double click resets. Splitters can be nested in a panel. (`@wirecore/wirelayer-react`)
- [Spoiler](?path=/story/react_layout-spoiler--playground): Content cut to maxHeight; the button (aria-expanded) shows the rest. Hidden text stays in the reading order. (`@wirecore/wirelayer-react`)
- [Stack](?path=/story/react_layout-stack--playground): Children below each other with an even gap (`@wirecore/wirelayer-react`)
- [Sticky](?path=/story/react_layout-sticky--playground): Sticks to the top or bottom edge while its container scrolls (`@wirecore/wirelayer-react`)
- [Toolbar](?path=/story/react_layout-toolbar--playground): Groups controls (role="toolbar"): one tab stop, arrow keys move between the controls (across all areas) (`@wirecore/wirelayer-react`)
- [TopBar](?path=/story/react_layout-topbar--playground): Slim header of an app outside AppShell: `start`, the middle (children, takes the free space) and `end` – no menus and no toolbar keyboard navigation, the content keeps its own (`@wirecore/wirelayer-react`)

## Data

- [ActionBar](?path=/story/react_data-actionbar--playground): Actions for the selected items: a toolbar (one tab stop, arrow keys) with the count and a clear button (`@wirecore/wirelayer-react`)
- [AiLabel](?path=/story/react_data-ailabel--playground): "AI-generated" (text, not only an icon) with the explanation in a toggletip (`@wirecore/wirelayer-react`)
- [Avatar](?path=/story/react_data-avatar--playground): Image, initials or icon of a person or organisation; `as="button"` makes it a trigger, e.g. of a user menu (`@wirecore/wirelayer-react`)
- [AvatarGroup](?path=/story/react_data-avatar--playground): Overlapping avatars, with "+n" for the ones not shown (`@wirecore/wirelayer-react`)
- [Badge](?path=/story/react_data-badge--playground): Short label or status (solid, soft, outline or a status colour) (`@wirecore/wirelayer-react`)
- [BarChart](?path=/story/react_data-barchart--playground): Bars per category for one or more series – vertical or horizontal, grouped or stacked; canvas named by the title, the data table is its text alternative (`@wirecore/wirelayer-react/chart`)
- [BarsList](?path=/story/react_data-barslist--playground): A list of labels and values; the bars behind the labels show the values as lengths (`@wirecore/wirelayer-react`)
- [BulletChart](?path=/story/react_data-bulletchart--playground): A meter (role="meter") with the value, the end of the scale and the target as its text (`@wirecore/wirelayer-react`)
- [Card](?path=/story/react_data-card--playground): Surface for grouped content, optionally with title, media and footer; interactive cards with asChild (`@wirecore/wirelayer-react`)
- [Chart](?path=/story/react_data-chart--playground): Canvas with role="img" named by the title; the data table is its text alternative (WCAG 1.1.1) (`@wirecore/wirelayer-react/chart`)
- [ChatMessage](?path=/story/react_data-chat--playground): A message: author and time (only for screen readers when grouped), the bubble, the delivery status (`@wirecore/wirelayer-react`)
- [ChatMessages](?path=/story/react_data-chat--playground): Message list: role="log" (announcements of new messages come from the live announcer, streamed ones once complete); aria-busy while a reply is being written. Scrolled up, a button leads to the new messages. (`@wirecore/wirelayer-react`)
- [ChatPrompt](?path=/story/react_data-chat--playground): A form with a growing text field: Enter sends, Shift+Enter adds a line; while replying a stop button (`@wirecore/wirelayer-react`)
- [ChatSources](?path=/story/react_data-chat--playground): Sources of an answer: a disclosure (<details>) with a list of links (`@wirecore/wirelayer-react`)
- [ChatThinking](?path=/story/react_data-chat--playground): The reasoning of an answer: collapsed by default, "Thinking …" while it is being written (`@wirecore/wirelayer-react`)
- [ChatToolCall](?path=/story/react_data-chat--playground): A tool call of an assistant: name and status in the summary, arguments and result inside (`@wirecore/wirelayer-react`)
- [Chip](?path=/story/react_data-chip--playground): One option of a ChipGroup (a toggle button); outside a ChipGroup a standalone chip, optionally removable (`@wirecore/wirelayer-react`)
- [Code](?path=/story/react_data-code--playground): Code inside a sentence, without syntax colours: the look of InlineCode (/code) without shiki (`@wirecore/wirelayer-react`)
- [CodeHighlight](?path=/story/react_data-codehighlight--playground): Code block with syntax colours; the scroll area is focusable, the copy button copies the plain code (`@wirecore/wirelayer-react/code`)
- [CodeHighlightTabs](?path=/story/react_data-codehighlight--playground): Several files: tabs with the file names (and an icon by type) above the shown code (`@wirecore/wirelayer-react/code`)
- [CompositeChart](?path=/story/react_data-compositechart--playground): Bars and lines in one chart (series[].type), e.g. revenue as bars and margin as a line on a second axis (`@wirecore/wirelayer-react/chart`)
- [Countdown](?path=/story/react_data-countdown--playground): role="timer": screen readers read the current value on demand, without announcing every second (`@wirecore/wirelayer-react`)
- [DataList](?path=/story/react_data-datalist--playground): Terms and values as a description list (<dl>), e.g. the details of a record (`@wirecore/wirelayer-react`)
- [DataListItem](?path=/story/react_data-datalist--playground): One term and its value in a DataList (`@wirecore/wirelayer-react`)
- [DataTable](?path=/story/react_data-datatable--playground): Data table on TanStack Table: sorting (also by several columns), search, filter row or filter menus with match modes, pagination, selection, column menu (pin, move, hide, group), resizing, column groups, totals, row details, row actions, row reordering, editing (cell or row), virtual scrolling, full screen, CSV export and saved state (`@wirecore/wirelayer-react/data-table`)
- [DataView](?path=/story/react_data-dataview--playground): Items as a list or grid (a list either way); the switch is a radio group "View" (`@wirecore/wirelayer-react`)
- [Descriptions](?path=/story/react_data-descriptions--playground): Terms and values (<dl>) in columns, with an optional title and actions; values can turn into inputs (`@wirecore/wirelayer-react`)
- [FormatBytes](?path=/story/react_data-format--playground): A file or memory size: "1.2 MB" (`@wirecore/wirelayer-react`)
- [FormatDate](?path=/story/react_data-format--playground): A date in the format of the locale, in a <time> with the machine-readable value (`@wirecore/wirelayer-react`)
- [FormatDateTime](?path=/story/react_data-format--playground): Date and time in the format of the locale, in a <time> with the machine-readable value (`@wirecore/wirelayer-react`)
- [FormatList](?path=/story/react_data-format--playground): A list as a sentence: "Anna, Ben, and Clara" (`@wirecore/wirelayer-react`)
- [FormatNumber](?path=/story/react_data-format--playground): – (`@wirecore/wirelayer-react`)
- [FormatRelativeTime](?path=/story/react_data-format--playground): "3 minutes ago" in a <time> with the exact point as datetime (and title) (`@wirecore/wirelayer-react`)
- [Funnel](?path=/story/react_data-funnel--playground): Bars narrowing with the value (an image named by the title); the table is the text alternative (`@wirecore/wirelayer-react`)
- [Gantt](?path=/story/react_data-gantt--playground): Gantt chart: task list as treegrid (keyboard, texts of dates and dependencies), the chart beside it (`@wirecore/wirelayer-react`)
- [Gauge](?path=/story/react_data-gauge--playground): role="meter": a value in a known range; the arc is decoration, the value is named as text (`@wirecore/wirelayer-react`)
- [Heatmap](?path=/story/react_data-heatmap--playground): A real table: row and column headers name every value; the colour only adds to the number (`@wirecore/wirelayer-react`)
- [Highlight](?path=/story/react_data-highlight--playground): Text with the hits as <mark> (`@wirecore/wirelayer-react`)
- [InlineCode](?path=/story/react_data-inlinecode--playground): Code inside a sentence, with syntax colours (`@wirecore/wirelayer-react/code`)
- [JsonViewer](?path=/story/react_data-jsonviewer--playground): JSON as a tree (role="tree"): arrow keys open and close, typing jumps to a key; values are coloured by type and readable as text (quotes, true/false, null). Ctrl+C copies the focused value. (`@wirecore/wirelayer-react`)
- [Kanban](?path=/story/react_data-kanban--playground): Kanban board: each column is a sortable list of one group – cards move with the pointer, with Space and the arrow keys (left/right into the next column) or with two clicks; every step is announced. (`@wirecore/wirelayer-react`)
- [Kbd](?path=/story/react_data-kbd--playground): A key, e.g. <Kbd>Strg</Kbd> + <Kbd>K</Kbd> – or a whole shortcut with `hotkey` (`@wirecore/wirelayer-react`)
- [LineChart](?path=/story/react_data-linechart--playground): Lines (or areas) over the categories – curved, stacked, with reference lines; the data table is the text (`@wirecore/wirelayer-react/chart`)
- [LogViewer](?path=/story/react_data-logviewer--playground): Log: a scrollable, focusable area (arrow keys scroll) with numbered lines; level as icon and text; search filters and marks; new lines stay in view until you scroll up. Only the visible lines are rendered. (`@wirecore/wirelayer-react`)
- [Markdown](?path=/story/react_data-markdown--playground): Markdown as elements with the prose typography: headings, lists, links (rel), code, quotes, tables (`@wirecore/wirelayer-react`)
- [Marquee](?path=/story/react_data-marquee--playground): Moving band (region, named by the label): moves only without reduced motion; the pause button comes first, hover and focus stop it, too. The items are repeated (copies hidden from screen readers) – no links or buttons. (`@wirecore/wirelayer-react`)
- [MeterGroup](?path=/story/react_data-metergroup--playground): One bar for the parts (visual), the legend lists every part with its value as text (`@wirecore/wirelayer-react`)
- [NumberFormatter](?path=/story/react_data-numberformatter--playground): A number in the format of the locale ("€1,234.50") (`@wirecore/wirelayer-react`)
- [OrderList](?path=/story/react_data-orderlist--playground): Choose an item, then move it with the buttons (or Alt + arrow keys); the new position is announced (`@wirecore/wirelayer-react`)
- [OrgChart](?path=/story/react_data-orgchart--playground): Hierarchy as nested lists – screen readers read the structure, the lines are drawn with CSS (`@wirecore/wirelayer-react`)
- [OverflowList](?path=/story/react_data-overflowlist--playground): Items in a row; the ones that do not fit are hidden and listed in a popover behind the "+N" button (`@wirecore/wirelayer-react`)
- [OverlayBadge](?path=/story/react_data-overlaybadge--playground): Count or dot on the corner of the wrapped element; screen readers get the label instead (`@wirecore/wirelayer-react`)
- [Pagination](?path=/story/react_data-pagination--playground): Page navigation with previous/next, page buttons and a summary ("1–10 of 42") (`@wirecore/wirelayer-react`)
- [Persona](?path=/story/react_data-persona--playground): Avatar (decorative here – the name follows as text), name, description and presence; optionally a link/button (`@wirecore/wirelayer-react`)
- [PickList](?path=/story/react_data-picklist--playground): Two lists with several choices each; the buttons move the chosen items across, the move is announced (`@wirecore/wirelayer-react`)
- [PieChart](?path=/story/react_data-piechart--playground): Pie or doughnut on a canvas named by the title; the legend lists value and share, the table is the text (`@wirecore/wirelayer-react/chart`)
- [QrCode](?path=/story/react_data-qrcode--playground): QR code as an image named by its value; optional logo, value text and downloads (`@wirecore/wirelayer-react`)
- [RadialBar](?path=/story/react_data-radialbar--playground): Rings (decorative) and a legend with the values as the text (a named group) (`@wirecore/wirelayer-react`)
- [Sankey](?path=/story/react_data-sankey--playground): SVG with role="img" named by the title; the flows as a table are its text alternative (WCAG 1.1.1) (`@wirecore/wirelayer-react`)
- [Scheduler](?path=/story/react_data-scheduler--playground): Calendar: toolbar (today, back/forward, title, views); events are buttons named by title and time (`@wirecore/wirelayer-react`)
- [Sortable](?path=/story/react_data-sortable--playground): Sortable list: every item has a handle – drag it, or press Space/Enter, move with the arrow keys and drop with Space (Escape cancels), or click it and click the target (WCAG 2.5.7). Every step is announced. (`@wirecore/wirelayer-react`)
- [Sparkline](?path=/story/react_data-sparkline--playground): Small line without axes; the canvas is an image named by the trend and the extremes (`@wirecore/wirelayer-react/chart`)
- [Statistic](?path=/story/react_data-statistic--playground): Label, value (with prefix/suffix and unit), trend as arrow + text, optional chart (`@wirecore/wirelayer-react`)
- [Timeline](?path=/story/react_data-timeline--playground): Events in order (ordered list); the markers are decoration, the status colour is not the only cue (`@wirecore/wirelayer-react`)
- [Tree](?path=/story/react_data-tree--playground): Tree (role="tree"): arrow keys move and open/close, Enter/Space select, typing jumps to a node. With `checkable`, Space checks the focused node instead (aria-checked on the treeitem). (`@wirecore/wirelayer-react`)
- [Treemap](?path=/story/react_data-treemap--playground): A list of the items with value and share; the tiles show the shares as areas (`@wirecore/wirelayer-react`)
- [Truncate](?path=/story/react_data-truncate--playground): Text cut to one or more lines; the full text in a tooltip (only while cut) or behind a "Show more" button (`@wirecore/wirelayer-react`)
- [VirtualList](?path=/story/react_data-virtuallist--playground): Only the visible rows are in the DOM; each row says its position (aria-posinset/setsize), so screen readers still know the length. The area scrolls with the keyboard (tabindex). (`@wirecore/wirelayer-react/virtual`)
- [VirtualTree](?path=/story/react_data-virtualtree--playground): Tree for many nodes: the open part of the tree as a flat, virtualised list of treeitems (aria-level, aria-posinset, aria-setsize) – only the rows in view are in the DOM. Same props and keyboard as Tree. (`@wirecore/wirelayer-react/virtual`)
- [WaterfallChart](?path=/story/react_data-waterfallchart--playground): Floating bars: each change starts where the previous one ended, totals from zero; the table is the text (`@wirecore/wirelayer-react/chart`)
- [Watermark](?path=/story/react_data-watermark--playground): Content with a repeated text or image on top: decoration only (aria-hidden), clicks go through (`@wirecore/wirelayer-react`)

## Feedback

- [Alert](?path=/story/react_feedback-alert--playground): Message box with status colour, icon, title and text; role="alert" for errors and warnings, optionally dismissible (`@wirecore/wirelayer-react`)
- [Banner](?path=/story/react_feedback-banner--playground): Page-wide notice: message in a live region (role="alert" for danger, else "status"), actions and an optional close button; a dismissal can be remembered (storageKey) (`@wirecore/wirelayer-react`)
- [EmptyState](?path=/story/react_feedback-emptystate--playground): Placeholder for an empty list, table or search result, with the next step as actions (`@wirecore/wirelayer-react`)
- [NavigationProgress](?path=/story/react_feedback-navigationprogress--playground): Place once in the app; drive it with navigationProgress.start() / done() (`@wirecore/wirelayer-react`)
- [NotificationCenter](?path=/story/react_feedback-notificationcenter--playground): Bell with the unread count (part of its name) that opens the notifications in a popover (role="dialog") or a drawer: grouped by day, unread marked with text, actions per item, "mark all as read", loading more; new notifications are announced politely (`@wirecore/wirelayer-react`)
- [Progress](?path=/story/react_feedback-progress--playground): Ark names the progressbar after its value; the label is the name, the value its valuetext (`@wirecore/wirelayer-react`)
- [ProgressCircle](?path=/story/react_feedback-progresscircle--playground): Ring with the value in the middle; a progressbar named by its label, the value as aria-valuetext (`@wirecore/wirelayer-react`)
- [Result](?path=/story/react_feedback-result--playground): Result or error page: illustration (decorative icon), optional status code, title (heading), text, actions (`@wirecore/wirelayer-react`)
- [RingProgress](?path=/story/react_feedback-ringprogress--playground): One value: the ring is a progress bar named by the label. Segments: a group named by the label, the legend lists every part with its value as text. The drawing itself is hidden from screen readers. (`@wirecore/wirelayer-react`)
- [SaveStatus](?path=/story/react_feedback-savestatus--playground): Save state with icon and text; a live region (role="status"), so changes are announced (`@wirecore/wirelayer-react`)
- [SessionTimeout](?path=/story/react_feedback-sessiontimeout--playground): Session timeout warning (WCAG 2.2.1): an alert dialog shortly before the session ends, with the time left and one action to stay signed in; after the end it says so. (`@wirecore/wirelayer-react`)
- [Skeleton](?path=/story/react_feedback-skeleton--playground): Placeholder while content loads. Hidden from assistive tech – mark the loading region with aria-busy="true" (and announce the result) instead. (`@wirecore/wirelayer-react`)
- [Spinner](?path=/story/react_feedback-spinner--playground): Loading indicator with a label for screen readers (role="status"); with `value` a ring as progress bar (`@wirecore/wirelayer-react`)
- [StatusDot](?path=/story/react_feedback-statusdot--playground): Coloured dot (or status icon) with a status text (colour is never the only cue) (`@wirecore/wirelayer-react`)

## Forms

- [AngleSlider](?path=/story/react_forms-angleslider--playground): Dial for an angle: the needle is the slider (arrow keys, Home/End), drag anywhere on the dial (`@wirecore/wirelayer-react`)
- [Autocomplete](?path=/story/react_forms-autocomplete--playground): Free text with suggestions: type, arrow keys to pick a suggestion, Enter takes it, Escape closes the list (`@wirecore/wirelayer-react`)
- [Calendar](?path=/story/react_forms-calendar--playground): Calendar on the page (no field, no popup): a grid with arrow keys, Page Up/Down, Home/End (`@wirecore/wirelayer-react`)
- [CascadeSelect](?path=/story/react_forms-cascadeselect--playground): Select with cascading levels: a menu whose groups open to the side (arrow right/left), the options are radio items. The trigger shows the whole path. With `filter` the field is a combobox: the hits are listed with their path, the button at its end opens the levels. (`@wirecore/wirelayer-react`)
- [Checkbox](?path=/story/react_forms-checkbox--playground): Checkbox with label (also indeterminate), works inside Field (`@wirecore/wirelayer-react`)
- [CheckboxCard](?path=/story/react_forms-checkboxcard--playground): A large card that is one checkbox: title (name), description and price (description), icon (`@wirecore/wirelayer-react`)
- [CheckboxGroup](?path=/story/react_forms-checkboxgroup--playground): role="group" named by its label, described by helper and error text; Checkbox/CheckboxCard inside (`@wirecore/wirelayer-react`)
- [ChipGroup](?path=/story/react_forms-chipgroup--playground): Filter chips: one or several options as toggle buttons (`@wirecore/wirelayer-react`)
- [ColorInput](?path=/story/react_forms-colorinput--playground): Colour field: type a colour (hex, rgb(), hsl(), oklch()) or open the picker with the swatch button (`@wirecore/wirelayer-react`)
- [ColorPicker](?path=/story/react_forms-colorpicker--playground): Colour field: the button opens a panel with area, hue (and opacity) slider, hex input and presets (`@wirecore/wirelayer-react`)
- [ColorSwatchPicker](?path=/story/react_forms-colorswatchpicker--playground): Colours as a radio group (arrow keys): every swatch is named by its colour name, the chosen one has a tick (`@wirecore/wirelayer-react`)
- [Combobox](?path=/story/react_forms-combobox--playground): Text field with suggestions (autocomplete): type to filter, arrow keys to choose, Enter to take (`@wirecore/wirelayer-react`)
- [DatePicker](?path=/story/react_forms-datepicker--playground): Date field: type the digits one after another (the separators come from the locale) or pick from the calendar; optionally with time (`@wirecore/wirelayer-react`)
- [DateRangePicker](?path=/story/react_forms-daterangepicker--playground): Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar picks start, then end (`@wirecore/wirelayer-react`)
- [DurationInput](?path=/story/react_forms-durationinput--playground): Duration field: hours and minutes (optional days and seconds) as spin buttons – type the digits ("2:30" → 2 h 30 min; a full part moves on by itself), arrow keys change a part. Hours go past 24 unless days are shown. Screen readers hear the whole duration ("2 hours 30 minutes"). (`@wirecore/wirelayer-react`)
- [Editor](?path=/story/react_forms-editor--playground): Rich-text editor (Tiptap): a toolbar (role="toolbar", one tab stop, arrow keys inside; toggle buttons with aria-pressed) above a multi-line textbox. Shortcuts as usual (Strg+B …). Gives HTML. (`@wirecore/wirelayer-react/editor`)
- [EmojiPicker](?path=/story/react_forms-emojipicker--playground): Emoji picker: search (English words and those of a language module), categories, a grid (arrow keys, Home/End, Ctrl+Home/End; Enter or Space chooses); the name of the focused emoji is shown below. Recently used emojis come first. (`@wirecore/wirelayer-react`)
- [Field](?path=/story/react_forms-field--playground): Label, helper text and error for one input – connects them by ids (aria-describedby, aria-invalid) (`@wirecore/wirelayer-react`)
- [FieldArray](?path=/story/react_forms-field--playground): – (`@wirecore/wirelayer-react/form`)
- [Fieldset](?path=/story/react_forms-fieldset--playground): <fieldset> with <legend>: names the group of fields; help and error text describe it (`@wirecore/wirelayer-react`)
- [FileUpload](?path=/story/react_forms-fileupload--playground): Drop files onto the zone or choose them with the button (the keyboard path). Accepted files are listed with a remove button each; rejected files are announced with the reason. With `upload` every file shows its progress and can be cancelled or retried. (`@wirecore/wirelayer-react`)
- [FilterPanel](?path=/story/react_forms-filterpanel--playground): Filter region above a list or table: a button with the number of active filters opens the compact form (folding open, or a drawer on small screens); the active filters as removable chips. (`@wirecore/wirelayer-react`)
- [FormErrorSummary](?path=/story/react_forms-formerrorsummary--playground): List of the form's errors with links to the fields; takes the focus after submitting (WCAG 3.3.1) (`@wirecore/wirelayer-react`)
- [FormField](?path=/story/react_forms-tanstack-form--playground): Label, helper text, error, aria-invalid and aria-describedby come from Field (`@wirecore/wirelayer-react/form`)
- [FormList](?path=/story/react_forms-formlist--playground): Repeated entries of a form: numbered list with move up/down (also Alt+↑/↓) and remove per entry, an add button, min/max limits; changes are announced and the focus follows the entry. (`@wirecore/wirelayer-react/form`)
- [InlineEdit](?path=/story/react_forms-inlineedit--playground): The value as a button; activating it shows an editor (inline or in a popover) with save and cancel. Enter saves (Ctrl/⌘+Enter in a textarea), Escape cancels; a failed check keeps the editor open with the message. (`@wirecore/wirelayer-react`)
- [Inplace](?path=/story/react_forms-inplace--playground): Shows a value as a button; activating it swaps in the editor (Escape closes it) (`@wirecore/wirelayer-react`)
- [InputGroup](?path=/story/react_forms-inputgroup--playground): Input with buttons or text (InputGroupAddon) attached; only the outer corners stay round (`@wirecore/wirelayer-react`)
- [InputGroupAddon](?path=/story/react_forms-inputgroup--playground): Static text or icon next to the input, e.g. "€" or "https://" (`@wirecore/wirelayer-react`)
- [JsonInput](?path=/story/react_forms-jsoninput--playground): JSON text field: checked while typing (the result is the field's description), "Format" pretty-prints (`@wirecore/wirelayer-react`)
- [Knob](?path=/story/react_forms-knob--playground): Dial (270°): a slider – arrow keys, Page Up/Down, Home/End, or drag around the ring. The ring is drawing only; the dial is the focusable slider. (`@wirecore/wirelayer-react`)
- [Listbox](?path=/story/react_forms-listbox--playground): Always visible list (role="listbox"): arrow keys move, Enter/Space choose, typing jumps to an option (`@wirecore/wirelayer-react`)
- [MaskInput](?path=/story/react_forms-maskinput--playground): Text input with a fixed format (IBAN, phone, postcode …): separators are added while typing (`@wirecore/wirelayer-react`)
- [Mentions](?path=/story/react_forms-mentions--playground): Text field with mentions: "@" (or another trigger) opens suggestions below the field – arrow keys choose, Enter or Tab takes one, Escape closes them. Mentions are marked behind the text; the value keeps their ids. (`@wirecore/wirelayer-react`)
- [MiniCalendar](?path=/story/react_forms-minicalendar--playground): Days in a row with arrows to earlier and later days; arrow keys choose a day and move the row on (`@wirecore/wirelayer-react`)
- [MonthPicker](?path=/story/react_forms-monthpicker--playground): Month field ("10.2026"): type the digits in one go, or pick from the month grid; range: start – end (`@wirecore/wirelayer-react`)
- [MultiSelect](?path=/story/react_forms-multiselect--playground): Select with several values: the list stays open while choosing, Space/Enter toggle an option (`@wirecore/wirelayer-react`)
- [NativeSelect](?path=/story/react_forms-nativeselect--playground): The browser's select: its own keyboard and mobile pickers; inside a Field it is labelled and described (`@wirecore/wirelayer-react`)
- [NumberInput](?path=/story/react_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5"); `ref` reaches the native input (`@wirecore/wirelayer-react`)
- [PasswordInput](?path=/story/react_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password"); `ref` reaches the native input (`@wirecore/wirelayer-react`)
- [PhoneInput](?path=/story/react_forms-phoneinput--playground): Country (flag and calling code, searchable) and the number, formatted for the country; the value is E.164 (`@wirecore/wirelayer-react`)
- [PinInput](?path=/story/react_forms-pininput--playground): Code input (OTP, PIN): one box per character, typing moves on, pasting fills all boxes (`@wirecore/wirelayer-react`)
- [QuarterPicker](?path=/story/react_forms-quarterpicker--playground): Quarter field: type "Q4 2026" (also "2026-Q4", "4/2026") or pick from the four quarters of a year; with range a start and an end quarter. Arrow keys move between the quarters and on into the next or previous year. (`@wirecore/wirelayer-react`)
- [RadioCard](?path=/story/react_forms-radiocard--playground): A large card that is one option of a RadioGroup (use `columns` on the group for a grid) (`@wirecore/wirelayer-react`)
- [RadioGroup](?path=/story/react_forms-radiogroup--playground): One choice out of several (role="radiogroup", arrow keys), horizontal or vertical (`@wirecore/wirelayer-react`)
- [RadioGroupItem](?path=/story/react_forms-radiogroup--playground): One option of a RadioGroup (`@wirecore/wirelayer-react`)
- [Rating](?path=/story/react_forms-rating--playground): Star rating: a radio group – arrow keys change the value, each star reads "3 stars" (`@wirecore/wirelayer-react`)
- [SearchField](?path=/story/react_forms-searchfield--playground): A search form (role="search"): optional area, field with magnifier, clear button and spinner; Enter searches (`@wirecore/wirelayer-react`)
- [Select](?path=/story/react_forms-select--playground): Dropdown list for one option: arrow keys, typeahead, Escape; native select hidden for forms (`@wirecore/wirelayer-react`)
- [SignaturePad](?path=/story/react_forms-signaturepad--playground): Signature field (role="application"): draw with mouse, pen or finger; "Undo" removes the last stroke. With typedAlternative the name can be typed instead – the field shows it in a handwriting font. (`@wirecore/wirelayer-react`)
- [Slider](?path=/story/react_forms-slider--playground): Range: "Price, Minimum" / "Price, Maximum" (`@wirecore/wirelayer-react`)
- [Switch](?path=/story/react_forms-switch--playground): Without a text the label is left out: Ark names the input by it, an empty one would hide a <label for> (`@wirecore/wirelayer-react`)
- [SwitchGroup](?path=/story/react_forms-switchgroup--playground): role="group" named by its label, described by helper and error text; Switches with a value inside (`@wirecore/wirelayer-react`)
- [TagsInput](?path=/story/react_forms-tagsinput--playground): Free entries: Enter or "," adds, Backspace on the empty field selects the last entry (again removes it), arrow keys move between entries; additions and removals are announced. With suggestions the field is a combobox: Arrow down opens them, Enter adds the highlighted one. (`@wirecore/wirelayer-react`)
- [Textarea](?path=/story/react_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field. `ref` reaches the native textarea (`@wirecore/wirelayer-react`)
- [TimeGrid](?path=/story/react_forms-timegrid--playground): Free time slots for a booking: radio buttons for one time (arrow keys move and choose), toggle buttons for a range (start, then end). Taken slots stay visible but cannot be chosen. (`@wirecore/wirelayer-react`)
- [TimePicker](?path=/story/react_forms-timepicker--playground): Time field: type the digits one after another ("1430"), arrow keys change hour or minute – or pick from the list of times (every `step` minutes). Gives "HH:mm". (`@wirecore/wirelayer-react`)
- [TimeRangePicker](?path=/story/react_forms-timerangepicker--playground): Start and end time in one field ("09:00 – 17:30"): typing runs on from start to end (`@wirecore/wirelayer-react`)
- [Toggletip](?path=/story/react_forms-toggletip--playground): (i) button: a click shows the explanation in a bubble inside a live region (role="status"), so screen readers read it; Escape, a second click or a click outside close it. Not modal, the focus stays on the button. (`@wirecore/wirelayer-react`)
- [TreeSelect](?path=/story/react_forms-treeselect--playground): Select whose options are a tree: the button opens the tree in a panel, choosing a node closes it (`@wirecore/wirelayer-react`)
- [VirtualSelect](?path=/story/react_forms-virtualselect--playground): Select for any number of items – only the visible options are rendered. (`@wirecore/wirelayer-react/virtual`)
- [Wizard](?path=/story/react_forms-wizard--playground): Multi-step form on the Stepper: "Next" checks the step (async with a spinner), "Back" keeps everything; an optional summary step before finishing. (`@wirecore/wirelayer-react`)
- [YearPicker](?path=/story/react_forms-yearpicker--playground): Year field ("2026"): type the digits, or pick from the year grid; range: start – end (`@wirecore/wirelayer-react`)

## Blocks

- [AuthForm](?path=/story/react_blocks-authform--playground): One form for sign in, sign up, password reset and one-time code; errors in a summary that takes the focus (`@wirecore/wirelayer-blocks-react`)
- [AuthLayout](?path=/story/react_blocks-authlayout--playground): Two columns: the form in <main>, the image with a teaser as a complementary area (stacked on small screens) (`@wirecore/wirelayer-blocks-react`)
- [ConditionBuilder](?path=/story/react_blocks-conditionbuilder--playground): Nested and/or groups of rules: field, operator and a value editor matching the field type. Every control is a native or WireLayer form control (Tab, arrow keys); adding focuses the new rule, removing the group's add button. (`@wirecore/wirelayer-blocks-react`)
- [CtaSection](?path=/story/react_blocks-ctasection--playground): A named region: the title labels it. Children are the actions. (`@wirecore/wirelayer-blocks-react`)
- [ModeToggle](?path=/story/react_blocks-modetoggle--playground): – (`@wirecore/wirelayer-blocks-react`)
- [SiteHeader](?path=/story/react_blocks-siteheader--playground): – (`@wirecore/wirelayer-blocks-react`)

## Navigation

- [BottomNavigation](?path=/story/react_navigation-bottomnavigation--playground): Navigation landmark fixed at the bottom (above the home indicator): icon and text per destination, the current one with aria-current="page", targets of at least 44 px (`@wirecore/wirelayer-react`)
- [Breadcrumb](?path=/story/react_navigation-breadcrumb--playground): Path to the current page: navigation "Breadcrumb" with a list of links; the last item is the current page (`@wirecore/wirelayer-react`)
- [BreadcrumbItem](?path=/story/react_navigation-breadcrumb--playground): One step of a Breadcrumb (link, or the current page) (`@wirecore/wirelayer-react`)
- [CommandPalette](?path=/story/react_navigation-commandpalette--playground): Dialog with a search field (combobox) and the matching items (listbox): typing filters, arrow keys move, Enter runs, Escape closes. Strg+K / ⌘K opens it anywhere. (`@wirecore/wirelayer-react`)
- [MegaMenu](?path=/story/react_navigation-megamenu--playground): Website navigation (nav landmark, disclosure pattern – no menu roles): links, buttons with aria-expanded that open a panel, or a link with its own chevron button. Panels hold headed groups of links (descriptions via aria-describedby), badges and a featured area. Escape, a click outside, leaving with the focus and following a link close it; one panel at a time. Below the breakpoint a menu button opens a drawer with accordions. (`@wirecore/wirelayer-react`)
- [Menubar](?path=/story/react_navigation-menubar--playground): Menu bar (role="menubar"): arrow keys move along the bar and between open menus, arrow down opens (`@wirecore/wirelayer-react`)
- [NavigationMenu](?path=/story/react_navigation-navigationmenu--playground): Website navigation (nav landmark): entries with children are buttons (aria-expanded) that open a panel with links – on hover or click; Escape closes. Not a menu (role="menu"), so links behave like links. (`@wirecore/wirelayer-react`)
- [ScrollTop](?path=/story/react_navigation-scrolltop--playground): Hidden (and out of the tab order) until the page is scrolled down (`@wirecore/wirelayer-react`)
- [SidebarNav](?path=/story/react_navigation-sidebarnav--playground): Navigation landmark with links and expandable groups (buttons with aria-expanded); optionally a rail of icons (`@wirecore/wirelayer-react`)
- [Stepper](?path=/story/react_navigation-stepper--playground): Steps list (tabs) with one panel per step and back/next buttons; the last "Next" finishes (`@wirecore/wirelayer-react`)
- [Steps](?path=/story/react_navigation-steps--playground): Progress through steps (list with the current step marked) (`@wirecore/wirelayer-react`)
- [TableOfContents](?path=/story/react_navigation-tableofcontents--playground): Navigation to the headings of the page; the section in view is marked (aria-current="location") (`@wirecore/wirelayer-react`)
- [Tabs](?path=/story/react_navigation-tabs--playground): Tab panels: tab list with arrow keys, one panel visible (`@wirecore/wirelayer-react`)
- [TabsContent](?path=/story/react_navigation-tabs--playground): The panel of one tab (`@wirecore/wirelayer-react`)
- [TabsList](?path=/story/react_navigation-tabs--playground): The row of tab buttons (`@wirecore/wirelayer-react`)
- [TabsTrigger](?path=/story/react_navigation-tabs--playground): One tab button (`@wirecore/wirelayer-react`)

## Buttons

- [Button](?path=/story/react_buttons-button--playground): Button in the variants of the design, with leading/trailing icon; loading keeps the focus (aria-busy) (`@wirecore/wirelayer-react`)
- [ButtonGroup](?path=/story/react_buttons-buttongroup--playground): Buttons joined into one control (role="group"): only the outer corners stay round, also stacked (`@wirecore/wirelayer-react`)
- [CopyButton](?path=/story/react_buttons-copybutton--playground): Copies the value; the icon turns into a check and "Copied to clipboard" is announced (`@wirecore/wirelayer-react`)
- [DownloadTrigger](?path=/story/react_buttons-downloadtrigger--playground): Button that saves text, a Blob or a fetched file; busy (aria-busy) while the data is prepared (`@wirecore/wirelayer-react`)
- [IconButton](?path=/story/react_buttons-iconbutton--playground): Button with only an icon; the label is its accessible name, optionally with a counter badge (`@wirecore/wirelayer-react`)
- [SegmentedControl](?path=/story/react_buttons-segmentedcontrol--playground): Few exclusive options as a segmented switch (radio group) (`@wirecore/wirelayer-react`)
- [SegmentedControlItem](?path=/story/react_buttons-segmentedcontrol--playground): One option of a SegmentedControl (`@wirecore/wirelayer-react`)
- [SpeedDial](?path=/story/react_buttons-speeddial--playground): A menu button: the actions open above it (or in a circle around it) as menu items with their labels (arrow keys, Escape) (`@wirecore/wirelayer-react`)
- [SplitButton](?path=/story/react_buttons-splitbutton--playground): Main action plus a menu with the other actions; both are separate buttons (`@wirecore/wirelayer-react`)
- [ToggleButton](?path=/story/react_buttons-togglebutton--playground): Button that stays pressed (aria-pressed), e.g. "Active only" – the label does not change with the state (`@wirecore/wirelayer-react`)

## Media

- [Carousel](?path=/story/react_media-carousel--playground): Region "carousel" with slides labelled "Image n of m". Previous/next buttons, one dot per page (arrow keys move between pages there); autoplay only with a pause button. (`@wirecore/wirelayer-react`)
- [Compare](?path=/story/react_media-compare--playground): Two images on top of each other; the range input over them moves the line (drag, click, arrow keys) (`@wirecore/wirelayer-react`)
- [Gallery](?path=/story/react_media-gallery--playground): Carousel of pictures with thumbnails (aria-current marks the shown one) and an optional fullscreen dialog (`@wirecore/wirelayer-react`)
- [Image](?path=/story/react_media-image--playground): With preview: a button around the picture opens a dialog (zoom, rotate; Escape closes) (`@wirecore/wirelayer-react`)
- [ImageCropper](?path=/story/react_media-imagecropper--playground): The image with a crop area (a slider): arrow keys move it, Alt+arrows resize it, + and − zoom; drag the area or its corners, drag the image to pan. The toolbar does the same with buttons. (`@wirecore/wirelayer-react`)
- [PdfViewer](?path=/story/react_media-pdfviewer--playground): PDF viewer (pdf.js): a toolbar (role="toolbar", one tab stop, arrow keys inside), an optional side bar with thumbnails and the outline, and the pages – canvas with a text layer (selection, search, screen readers), links and the structure of tagged PDFs. In the page area Page Up/Down and Home/End change the page; Ctrl/⌘ + − 0 zoom and Ctrl/⌘+F opens the search while the focus is in the viewer. (`@wirecore/wirelayer-react/pdf`)

## Overlays

- [ConfirmDialog](?path=/story/react_overlays-confirm--playground): Place once in the app; ask with `await confirm({ title, … })` or `await prompt({ title, label })` (`@wirecore/wirelayer-react`)
- [ConfirmPopup](?path=/story/react_overlays-confirmpopup--playground): Asks right at the control (e.g. a delete button). An alert dialog without a backdrop: the focus starts on the safe answer, Escape cancels, then it returns to the control. (`@wirecore/wirelayer-react`)
- [ContextMenu](?path=/story/react_overlays-contextmenu--playground): Opens at the pointer on right click, on touch screens with a long press (and with Shift+F10 or the menu key on the focused area). The actions should also be reachable another way. (`@wirecore/wirelayer-react`)
- [Dialog](?path=/story/react_overlays-dialog--playground): Ark handles focus trap, aria-modal, Escape, scroll lock and returning focus to the trigger (`@wirecore/wirelayer-react`)
- [DialogClose](?path=/story/react_overlays-dialog--playground): Closes the surrounding Dialog (wraps your own button) (`@wirecore/wirelayer-react`)
- [DialogContent](?path=/story/react_overlays-dialog--playground): The modal window of a Dialog: title, description, focus trap, Escape closes (`@wirecore/wirelayer-react`)
- [DialogHost](?path=/story/react_overlays-dialogservice--playground): Place once in the app; open with `await openDialog({ title, content })` (`@wirecore/wirelayer-react`)
- [DialogTrigger](?path=/story/react_overlays-dialog--playground): Opens the surrounding Dialog (wraps your own button) (`@wirecore/wirelayer-react`)
- [Drawer](?path=/story/react_overlays-drawer--playground): Modal panel at the edge of the screen – a dialog: focus trap, Escape, scroll lock, focus returns (`@wirecore/wirelayer-react`)
- [DrawerClose](?path=/story/react_overlays-drawer--playground): Closes the surrounding Drawer (wraps your own button) (`@wirecore/wirelayer-react`)
- [DrawerContent](?path=/story/react_overlays-drawer--playground): The panel of a Drawer, sliding in from a side; title, focus trap, Escape closes (`@wirecore/wirelayer-react`)
- [DrawerTrigger](?path=/story/react_overlays-drawer--playground): Opens the surrounding Drawer (wraps your own button) (`@wirecore/wirelayer-react`)
- [FloatingPanel](?path=/story/react_overlays-floatingpanel--playground): Non-modal window (role="dialog", named by its title): drag the header, resize at the edges, minimise, maximise, close; Alt+arrows move it, Alt+Shift+arrows resize it, Escape closes it. (`@wirecore/wirelayer-react`)
- [HoverCard](?path=/story/react_overlays-hovercard--playground): Extra information on hover or keyboard focus of the trigger (WCAG 1.4.13: stays while hovered, Escape closes). Only additional content – everything essential must be reachable without it. (`@wirecore/wirelayer-react`)
- [Menu](?path=/story/react_overlays-menu--playground): The trigger is the slotted element (e.g. a Button or IconButton) (`@wirecore/wirelayer-react`)
- [Popover](?path=/story/react_overlays-popover--playground): Non-modal panel next to its trigger; Escape and clicking outside close it, focus returns to the trigger (`@wirecore/wirelayer-react`)
- [PopoverClose](?path=/story/react_overlays-popover--playground): Closes the popover from your own button. Not Ark's CloseTrigger: that labels its element "close" and would replace the visible text as the accessible name. (`@wirecore/wirelayer-react`)
- [PopoverContent](?path=/story/react_overlays-popover--playground): The panel of a Popover (role="dialog") with title and close button (`@wirecore/wirelayer-react`)
- [PopoverTrigger](?path=/story/react_overlays-popover--playground): Opens the surrounding Popover (wraps your own button) (`@wirecore/wirelayer-react`)
- [Toaster](?path=/story/react_overlays-toast--playground): Place once in the app; show toasts with toast({ title, description, type, action }) (`@wirecore/wirelayer-react`)
- [Tooltip](?path=/story/react_overlays-tooltip--playground): No element of its own: the trigger is the slotted element (`@wirecore/wirelayer-react`)
- [TooltipGroup](?path=/story/react_overlays-tooltip--playground): Groups tooltips (e.g. of a toolbar): after the first one, the next opens without waiting. No element of its own (`@wirecore/wirelayer-react`)
- [Tour](?path=/story/react_overlays-tour--playground): Step-by-step introduction: each step is a dialog next to its element (focus moves in, Escape ends the tour, arrow keys move between steps). (`@wirecore/wirelayer-react`)

## Other

- FilterChips: The active filters as a list of chips with remove buttons ("Remove filter Location: Frankfurt") (`@wirecore/wirelayer-react`)
- Input: Text field with sizes, leading icon, prefix and suffix; works inside Field. `ref` reaches the native input (focus, select, setSelectionRange) (`@wirecore/wirelayer-react`)
- KeyValueEditor: Key-value pairs (FormList preset): two inputs per row, duplicate keys marked (`@wirecore/wirelayer-react/form`)
- LocaleProvider: Renders nothing itself; Ark's provider passes locale and direction (keyboard order) on to Ark (`@wirecore/wirelayer-react`)

## Utilities

- [HotkeysDialog](?path=/story/react_utilities-hotkeysdialog--playground): Dialog listing the registered shortcuts with their descriptions, grouped; opens with "?" (`@wirecore/wirelayer-react`)
- [LandmarkNavigation](?path=/story/react_utilities-landmarknavigation--playground): Renders nothing itself: F6 / Shift+F6 move the focus between the landmarks of the page while mounted (`@wirecore/wirelayer-react`)
- [LiveAnnouncer](?path=/story/react_utilities-liveannouncer--playground): The live regions for announce() – one per politeness, rendered on the server already (screen readers only pick up regions that exist before their text changes). Without a LiveAnnouncer, announce() adds them to <body>. (`@wirecore/wirelayer-react`)
- [SkipLinks](?path=/story/react_utilities-skiplinks--playground): Links to the main parts of the page, the first thing Tab reaches; each appears at the top left while focused. Not a stop for F6 (data-landmark="off"). (`@wirecore/wirelayer-react`)
- [VisuallyHidden](?path=/story/react_utilities-visuallyhidden--playground): Text only for screen readers, e.g. a label next to an icon (`@wirecore/wirelayer-react`)

## React Native (@wirecore/wirelayer-native)

React Native (Expo) components with Uniwind: same prop names and values as the React components where they fit on a phone – pickers open as bottom sheets, touch targets are at least 44 pt, no hover, gestures always with accessibility actions. Forms with TanStack Form via `@wirecore/wirelayer-native/form`; DataTable (no TanStack; table or cards per row) via `@wirecore/wirelayer-native/data-table`; charts drawn with react-native-svg (no Chart.js) via `@wirecore/wirelayer-native/chart`; PdfViewer on react-native-pdf (development build, not Expo Go) via `@wirecore/wirelayer-native/pdf`; CodeHighlight with Shiki via `@wirecore/wirelayer-native/code`; file pickers via `@wirecore/wirelayer-native/expo-document-picker` and `@wirecore/wirelayer-native/expo-image-picker`, `useClipboard` via `@wirecore/wirelayer-native/expo-clipboard`, `shareFile`/`shareUri` (DataTable export, PDFs) via `@wirecore/wirelayer-native/expo-sharing` (optional peer dependencies). Overlays: Dialog, Drawer (from every edge), Menu and ContextMenu as sheets, Popover next to its trigger; `toast()`, `confirm()`, `prompt()` and `openDialog()` need `<Toaster />`, `<ConfirmDialog />` and `<DialogHost />` once at the root.

- [Accordion](?path=/story/native_layout-accordion--playground): Sections that open and close; each heading is a button with aria-expanded (`@wirecore/wirelayer-native`)
- [AccordionItem](?path=/story/native_layout-accordion--playground): One section of an Accordion: a heading with a button (aria-expanded) and its content; own actions beside it (`@wirecore/wirelayer-native`)
- [ActionBar](?path=/story/native_data-actionbar--playground): Bar with the actions for selected items (e.g. in a list): the count is announced when it changes (`@wirecore/wirelayer-native`)
- [AiLabel](?path=/story/native_data-ailabel--playground): Marks content made by AI, with an explanation behind an info button (`@wirecore/wirelayer-native`)
- [Alert](?path=/story/native_feedback-alert--playground): Message box with status icon and colour, title and text; announced when it appears (alert for warn/danger, status otherwise) (`@wirecore/wirelayer-native`)
- [AppShell](?path=/story/native_layout-appshell--playground): Frame of an app screen without a router: header with menu button (when there is a navbar), content and an optional bottom bar; the navbar opens as a drawer. Header and footer stay, the content fills the rest. (`@wirecore/wirelayer-native`)
- [AspectRatio](?path=/story/native_layout-aspectratio--playground): Keeps the ratio of width and height, e.g. for images, videos and maps (`@wirecore/wirelayer-native`)
- [Autocomplete](?path=/story/native_forms-autocomplete--playground): Free text with suggestions below the field (in the page flow, no overlay): typing filters them, a tap takes one; on the web the arrow keys move and Enter takes the highlighted one. Any other text is allowed, too. (`@wirecore/wirelayer-native`)
- [Avatar](?path=/story/native_data-avatar--playground): Image, initials (from the name) or an icon – one image named by `name` for screen readers (`@wirecore/wirelayer-native`)
- [Badge](?path=/story/native_data-badge--playground): Small label for a state or count, optionally with an icon or round (`circle`) (`@wirecore/wirelayer-native`)
- [Banner](?path=/story/native_feedback-banner--playground): Notice across the screen or above the content, e.g. maintenance or a missing confirmation: the text is a live region (danger: alert, else status). Without `storageKey` of the web – the app remembers the dismissal itself. (`@wirecore/wirelayer-native`)
- [BarChart](?path=/story/native_data-barchart--playground): Bars per category for one or more series – vertical or horizontal, grouped or stacked – drawn with react-native-svg. An image named by the title and the trend of each series; tapping shows the values of a category, the data list below is the text alternative. (`@wirecore/wirelayer-native/chart`)
- [BarsList](?path=/story/native_data-barslist--playground): A list of labels and values; the bars behind the labels show the values as lengths (`@wirecore/wirelayer-native`)
- [BottomNavigation](?path=/story/native_navigation-bottomnavigation--playground): Tab bar at the bottom of the screen for the main destinations of an app: screen readers hear tabs with the selected one ("Tab, 2 of 4"), badges are part of the name. No router dependency – `onNavigate` navigates. (`@wirecore/wirelayer-native`)
- [Breadcrumb](?path=/story/native_navigation-breadcrumb--playground): Path to the current screen: scrolls sideways (to its end) when it is too long, the middle can collapse into a menu (`@wirecore/wirelayer-native`)
- [BulletChart](?path=/story/native_data-bulletchart--playground): A meter (role meter) with the value, the end of the scale and the target as its text (`@wirecore/wirelayer-native`)
- [Button](?path=/story/native_buttons-button--playground): Button with variants and colours, sizes, icons, loading state (busy, still focusable) and an optional counter (`@wirecore/wirelayer-native`)
- [ButtonGroup](?path=/story/native_buttons-buttongroup--playground): Buttons joined into one control (role "group"): only the outer corners stay round, also stacked (`@wirecore/wirelayer-native`)
- [Calendar](?path=/story/native_forms-calendar--playground): Month view: the days of the month are a radio group named by the month; every day is named with its weekday and full date. Previous/next switch the month. (`@wirecore/wirelayer-native`)
- [Card](?path=/story/native_data-card--playground): Surface for grouped content – with title, subtitle, media and footer, or any children; pressable with `onPress` (`@wirecore/wirelayer-native`)
- [Carousel](?path=/story/native_media-carousel--playground): Slides to swipe through (FlatList with paging): arrow buttons, dots, autoplay with pause (WCAG 2.2.2), the arrow keys on the web. Slides outside the page are hidden from screen readers; iOS and Android announce the new slide. (`@wirecore/wirelayer-native`)
- [CascadeSelect](?path=/story/native_forms-cascadeselect--playground): Select with cascading levels: the trigger shows the whole path and opens a sheet with one level at a time – a radio group per level, an option with children opens the next level, "Back" goes up; the path is the subtitle. With `filter` a search lists the hits with their path. (`@wirecore/wirelayer-native`)
- [Center](?path=/story/native_layout-center--playground): Centres its content horizontally and vertically (`@wirecore/wirelayer-native`)
- [ChatMessage](?path=/story/native_data-chat--playground): A message: author and time (only for screen readers when grouped), the bubble, the delivery status (`@wirecore/wirelayer-native`)
- [ChatMessages](?path=/story/native_data-chat--playground): Message list: an inverted FlatList (newest at the bottom) with date lines and grouped messages. It is no live region – new messages of others are announced, streamed ones once complete; aria-busy while a reply is written. Scrolled up, a button leads to the new messages; the top loads older ones. (`@wirecore/wirelayer-native`)
- [ChatPrompt](?path=/story/native_data-chat--playground): Prompt of a chat: a text field that grows up to `maxRows` lines, attached files with a remove button each, a send button – and a stop button instead while a reply is written. (`@wirecore/wirelayer-native`)
- [ChatSources](?path=/story/native_data-chat--playground): Sources of an answer: a button (aria-expanded) that shows a list of links with their host names (`@wirecore/wirelayer-native`)
- [ChatThinking](?path=/story/native_data-chat--playground): The reasoning of an answer: collapsed by default, "Thinking …" while it is being written (`@wirecore/wirelayer-native`)
- [ChatToolCall](?path=/story/native_data-chat--playground): A tool call of an assistant: name and status on the button (aria-expanded), arguments and result inside (`@wirecore/wirelayer-native`)
- [Checkbox](?path=/story/native_forms-checkbox--playground): Checkbox with label (also indeterminate): the whole row is the control; Space toggles on the web; works in a CheckboxGroup (`@wirecore/wirelayer-native`)
- [CheckboxCard](?path=/story/native_forms-checkbox--playground): A large card that is one checkbox: title (name), description and price (description), icon (`@wirecore/wirelayer-native`)
- [CheckboxGroup](?path=/story/native_forms-checkboxgroup--playground): A named group (role "group") of checkboxes or checkbox cards; helper and error text describe it (`@wirecore/wirelayer-native`)
- [Chip](?path=/story/native_forms-chip--playground): A compact label with optional icon or image and a remove button (44 pt touch area) – e.g. a chosen filter (`@wirecore/wirelayer-native`)
- [ChipGroup](?path=/story/native_forms-chipgroup--playground): Filter chips: checkboxes (several) or radio buttons (single); a checked chip shows a check mark too (`@wirecore/wirelayer-native`)
- [CodeHighlight](?path=/story/native_data-codehighlight--playground): Code in monospace with line numbers, marked and diff lines, wrapping and a copy button. Colours come from Shiki (`shiki` is an optional peer dependency of `@wirecore/wirelayer-native/code`: shiki/core with the JavaScript RegExp engine – no WebAssembly, no native module); until it has loaded, or when a grammar cannot run, the code shows uncoloured. (`@wirecore/wirelayer-native/code`)
- [Collapse](?path=/story/native_layout-collapse--playground): Shows and hides its content with a height animation (none with reduced motion). Hidden content is not rendered – the button that toggles it carries `aria-expanded`. (`@wirecore/wirelayer-native`)
- [ColorPicker](?path=/story/native_forms-colorpicker--playground): Colour field: the button shows the colour and its hex value and opens a sheet with a preview, sliders for hue, saturation and brightness (adjustable with the screen reader's gestures), a hex field and presets. Simplified compared with the web: no area, no alpha, hex only. (`@wirecore/wirelayer-native`)
- [ColorSwatchPicker](?path=/story/native_forms-colorswatchpicker--playground): Colours as a radio group: every swatch is named by its colour name (44 pt touch target), the chosen one has a tick (`@wirecore/wirelayer-native`)
- [Combobox](?path=/story/native_forms-combobox--playground): Picker for long lists: the sheet starts with a search field that filters the options while typing (accent- and case-blind); with `dataSource` the search asks the server. Same props as Select. (`@wirecore/wirelayer-native`)
- [CommandPalette](?path=/story/native_navigation-commandpalette--playground): Search over pages and actions: a bottom sheet with a search field at the top and the matching items as buttons in groups. The number of results is announced; the keyboard's search key runs the first one. Strg+K / ⌘K opens it on the web. (`@wirecore/wirelayer-native`)
- [ConditionBuilder](?path=/story/native_forms-conditionbuilder--playground): Nested and/or groups of rules as cards (the mobile layout of the web ConditionBuilder): field, operator and a value editor matching the field type, each a WireLayer control; adding and removing is announced. Same JSON as the web. (`@wirecore/wirelayer-native`)
- [ConfirmDialog](?path=/story/native_overlays-confirm--playground): Place once at the root of the app; then `await confirm({ title })` and `await prompt({ title, label })` ask from anywhere. An alertdialog: a press outside does not answer, the back button and Escape cancel. (`@wirecore/wirelayer-native`)
- [Container](?path=/story/native_layout-container--playground): Centres the content with a largest width and side padding (tablets, the web) (`@wirecore/wirelayer-native`)
- [ContextMenu](?path=/story/native_overlays-contextmenu--playground): Long press on the area opens its actions in a sheet. Screen readers get the actions as an accessibility action (VoiceOver: swipe up/down, TalkBack: actions menu); on the web the context menu key, Shift+F10 and a right click. Offer the actions another way, too (e.g. an IconButton) – a long press is hard to find. (`@wirecore/wirelayer-native`)
- [Countdown](?path=/story/native_data-countdown--playground): Time left until a point (role timer): counts every second, not announced on every tick (`@wirecore/wirelayer-native`)
- [DataList](?path=/story/native_data-datalist--playground): Facts as label and value pairs, e.g. the details of an order (a list; each item reads label, then value) (`@wirecore/wirelayer-native`)
- [DataListItem](?path=/story/native_data-datalist--playground): One label and value of a DataList (`@wirecore/wirelayer-native`)
- [DataTable](?path=/story/native_data-datatable--playground): Data table for phones and tablets, without a table library: a table that scrolls sideways (sort by tapping a header) or one card per row (`layout`, automatic below `cardsBelow`). Search, a sort sheet and a filter sheet, selection, pages or infinite loading, server data (`dataSource`, `manual`), groups, totals, row actions in a sheet and the export as CSV or Excel (`onExport`, `generateCsv`, `generateXlsx`). In the web build the table is a complete ARIA table; on iOS and Android every row is a named group and every cell is read with its header. (`@wirecore/wirelayer-native/data-table`)
- [DataView](?path=/story/native_data-dataview--playground): Items as a list or grid (a list either way, the switch is a radio group "View"), with pages or growing ("Load more", optionally at the end of the scrolling), loading placeholders, empty and error states – from `items` or a data source. The items scroll in a FlatList. (`@wirecore/wirelayer-native`)
- [DatePicker](?path=/story/native_forms-datepicker--playground): The trigger shows the date in the locale's format and opens the calendar in a sheet; a tap on a day picks it (`@wirecore/wirelayer-native`)
- [DateRangePicker](?path=/story/native_forms-daterangepicker--playground): Start and end in one field ("10/20/2026 – 10/24/2026"); the calendar in the sheet picks the start, then the end (each step is announced), presets pick a whole range. (`@wirecore/wirelayer-native`)
- [Descriptions](?path=/story/native_data-descriptions--playground): Facts in columns (one on a phone, more on a tablet), with title, actions and an edit mode (`@wirecore/wirelayer-native`)
- [Dialog](?path=/story/native_overlays-dialog--confirm): Modal dialog on React Native's Modal: the system keeps focus inside, the Android back button and Escape (web) close it. Fades in and out (slides when docked to the bottom), without animation when reduced motion is on. On the web focus moves to the close button when it opens (like the web Dialog) – react-native-web only traps it. (`@wirecore/wirelayer-native`)
- [DialogHost](?path=/story/native_overlays-dialogservice--playground): Place once at the root of the app; shows the dialogs of `openDialog()` (`@wirecore/wirelayer-native`)
- [Divider](?path=/story/native_layout-divider--playground): Without a label a separator; with a label the lines are decorative (`@wirecore/wirelayer-native`)
- [Drawer](?path=/story/native_overlays-drawer--playground): Panel that slides in from an edge of the screen: from the bottom a sheet (default), from the side e.g. for the navigation. A modal with a title, any content and optional buttons; the back button, Escape (web) and a press outside close it. Without animation when reduced motion is on. (`@wirecore/wirelayer-native`)
- [DurationInput](?path=/story/native_forms-durationinput--playground): Duration as one number field per unit (hours and minutes, optionally days and seconds) with the number pad; the whole duration is read as description ("2 hours 30 minutes"). (`@wirecore/wirelayer-native`)
- [EmojiPicker](?path=/story/native_forms-emojipicker--playground): Emoji picker: search (in the language and English), categories as tabs, a grid of buttons named by the emoji (at least 44 pt); recently used emojis come first. Inline – or in a bottom sheet with `open`/`onOpenChange`. (`@wirecore/wirelayer-native`)
- [EmptyState](?path=/story/native_feedback-emptystate--playground): Placeholder for an empty list or search: icon, title, text and the next step (`@wirecore/wirelayer-native`)
- [Field](?path=/story/native_forms-field--playground): Label, helper text, success or error for one control – passes name, description and state to the control inside (`@wirecore/wirelayer-native`)
- [FieldArray](?path=/story/native_forms-field--playground): Repeated entries of a form: numbered cards with move up/down and remove (also as screen reader actions on the card), an add button, min/max limits; changes are announced and the screen reader focus follows the entry. (`@wirecore/wirelayer-native/form`)
- [Fieldset](?path=/story/native_forms-fieldset--playground): Group of related fields with a legend (role group, named by the legend), help and error text; optionally collapsible (`@wirecore/wirelayer-native`)
- [FileUpload](?path=/story/native_forms-fileupload--playground): Choose files with the app's pickers (documents, photos, camera); accepted files are listed with a remove button each, rejected ones are announced with the reason. With `upload` every file shows its progress and can be cancelled or retried. (`@wirecore/wirelayer-native`)
- [FormatBytes](?path=/story/native_data-format--playground): A file size in the format of the locale ("1.5 MB") (`@wirecore/wirelayer-native`)
- [FormatDate](?path=/story/native_data-format--playground): A date in the format of the locale ("21.10.2026") (`@wirecore/wirelayer-native`)
- [FormatDateTime](?path=/story/native_data-format--playground): Date and time in the format of the locale ("10/21/2026, 2:30 PM") (`@wirecore/wirelayer-native`)
- [FormatList](?path=/story/native_data-format--playground): A list in the format of the locale ("Berlin, Hamburg, and Munich") (`@wirecore/wirelayer-native`)
- [FormatRelativeTime](?path=/story/native_data-format--playground): A point in time relative to now ("5 minutes ago", "tomorrow") (`@wirecore/wirelayer-native`)
- [FormErrorSummary](?path=/story/native_forms-formerrorsummary--playground): List of the form's errors after submitting: it takes the screen reader focus (VoiceOver/TalkBack) and is announced; each message is a button that moves the focus to its field. (`@wirecore/wirelayer-native`)
- [FormField](?path=/story/native_forms-tanstack-form--playground): Label, helper text, error and the invalid state of the control come from Field; errors show once the field was left (or the form submitted) (`@wirecore/wirelayer-native/form`)
- FormList: Repeated entries of a form: numbered cards with move up/down and remove (also as screen reader actions on the card), an add button, min/max limits; changes are announced and the screen reader focus follows the entry. (`@wirecore/wirelayer-native/form`)
- [Funnel](?path=/story/native_data-funnel--playground): Bars narrowing with the value (an image named by the title and the stages); the list is the text alternative (`@wirecore/wirelayer-native`)
- [Gallery](?path=/story/native_media-gallery--playground): Pictures to swipe through with thumbnails and a full screen view (pinch zoom, buttons for every gesture). The thumbnails are buttons ("Show image 2 of 8"), the current one is marked. (`@wirecore/wirelayer-native`)
- [Gantt](?path=/story/native_data-gantt--playground): Gantt chart for phones as a task list: name, period, duration and progress of each task, a bar in the span of the whole project, groups that expand and collapse, milestones, dependencies and the critical path in words. Editable progress changes with buttons, accessibility actions or the arrow keys (web) on the bar (a slider). (`@wirecore/wirelayer-native`)
- [Gauge](?path=/story/native_data-gauge--playground): A value on a half circle between min and max (role meter), coloured by status or thresholds (`@wirecore/wirelayer-native`)
- [Group](?path=/story/native_layout-group--playground): Children side by side, wrapping onto the next line when there is no room (`@wirecore/wirelayer-native`)
- [Heatmap](?path=/story/native_data-heatmap--playground): A grid of values with row and column headers (a table on the web; on iOS and Android every cell is named "row, column: value"); the colour only adds to the number. Scrolls sideways when it is wider than the screen. (`@wirecore/wirelayer-native`)
- [Highlight](?path=/story/native_data-highlight--playground): Marks the search terms in a text – nested Text, so it fits into a surrounding Text (e.g. a search result) (`@wirecore/wirelayer-native`)
- [IconButton](?path=/story/native_buttons-iconbutton--playground): Icon-only button with a required accessible name, colours and an optional counter or dot (`@wirecore/wirelayer-native`)
- [Image](?path=/story/native_media-image--playground): A picture with alternative text and fallback; with `preview` it opens full screen with zoom (`@wirecore/wirelayer-native`)
- [InlineEdit](?path=/story/native_forms-inlineedit--playground): The value as a button ("Project name: Relaunch, edit"); pressing it shows an editor with save and cancel. The return key saves; a failed check keeps the editor open with the message. (`@wirecore/wirelayer-native`)
- [Input](?path=/story/native_forms-input--playground): Text field: size, prefix/suffix, leading icon, clear button, spinner and success check; works inside Field (`@wirecore/wirelayer-native`)
- [JsonViewer](?path=/story/native_data-jsonviewer--playground): JSON as nested lists: objects and arrays are buttons that open and close (aria-expanded), values are coloured by type and readable as text (quotes, true/false, null). Search marks the hits and opens their branches. (`@wirecore/wirelayer-native`)
- [Kanban](?path=/story/native_data-kanban--playground): Kanban board: columns side by side in a horizontal scroll view. Every card has a button ("Move …") that opens an action sheet – the columns as radio buttons, "Move up"/"Move down" …; the same moves are screen reader actions of the card, and a long press on the button drags the card within its column. WIP limits show a hint when reached or exceeded; columns collapse; every move is announced. (`@wirecore/wirelayer-native`)
- [Kbd](?path=/story/native_data-kbd--playground): A key or shortcut, e.g. in help texts for hardware keyboards (iPad, Android tablets, the web) (`@wirecore/wirelayer-native`)
- KeyValueEditor: Key-value pairs (FormList preset): two inputs per row, duplicate keys marked (`@wirecore/wirelayer-native/form`)
- [LineChart](?path=/story/native_data-linechart--playground): Lines (or areas) over the categories – curved, stacked, with reference lines – drawn with react-native-svg. An image named by the title and the trend of each series; the data list below is the text alternative. (`@wirecore/wirelayer-native/chart`)
- [Listbox](?path=/story/native_forms-listbox--playground): Always visible list of options: radio buttons (one value) or checkboxes (`multiple`) – the selection states screen readers announce on iOS and Android. Scrolls inside its box; its end (or "Load more") loads more. (`@wirecore/wirelayer-native`)
- [LiveAnnouncer](?path=/story/native_utilities-liveannouncer--playground): Optional, around the app: on the web the live regions of `announce()` sit inside the app (polite and assertive); iOS and Android announce without it. (`@wirecore/wirelayer-native`)
- LocaleProvider: Same API as in (`@wirecore/wirelayer-native`)
- [LogViewer](?path=/story/native_data-logviewer--playground): Log: a list of numbered lines that wrap; level as icon and text; search filters and marks; level chips; new lines stay in view until you scroll up (announced as paused), "Jump to end" and the switch follow them again. Older lines load at the top. (`@wirecore/wirelayer-native`)
- [Markdown](?path=/story/native_data-markdown--playground): Markdown with the shared parser of the web (`markdownElements`): headings, lists and task lists, links, code, quotes and tables as React Native views and nested Text – no HTML, no web view. (`@wirecore/wirelayer-native`)
- [MaskInput](?path=/story/native_forms-maskinput--playground): Text input with a fixed format (IBAN, phone, postcode …): separators are added while typing (`@wirecore/wirelayer-native`)
- [Mentions](?path=/story/native_forms-mentions--playground): Text field with mentions: the trigger ("@") opens suggestions below the field, a tap inserts the entry. The value keeps the mentions as markup ("@[Anna Berg](anna)"), the field shows the plain text. (`@wirecore/wirelayer-native`)
- [Menu](?path=/story/native_overlays-menu--playground): Action menu: the trigger opens a sheet with the actions (the mobile pattern for menus) – with checkbox and radio items, groups, separators and submenus (shown in the same sheet with a back row). (`@wirecore/wirelayer-native`)
- [MeterGroup](?path=/story/native_data-metergroup--playground): Several values in one bar with a legend, e.g. storage by type – the legend gives every value as text (`@wirecore/wirelayer-native`)
- [MiniCalendar](?path=/story/native_forms-minicalendar--playground): Days in a row with arrows to earlier and later days – a radio group, each day named with its full date (`@wirecore/wirelayer-native`)
- [MonthPicker](?path=/story/native_forms-monthpicker--playground): Month field ("10.2026"): picks from the month grid of a year in a sheet; range: start – end (`@wirecore/wirelayer-native`)
- [MultiSelect](?path=/story/native_forms-multiselect--playground): Several choices: the trigger opens a sheet of checkboxes, every tap changes the value at once (`@wirecore/wirelayer-native`)
- [NavigationMenu](?path=/story/native_navigation-navigationmenu--playground): The website navigation and MegaMenu on a phone: a menu button opens a drawer from the left with one accordion section per area (the one with the current page open) and its links. (`@wirecore/wirelayer-native`)
- [NotificationCenter](?path=/story/native_feedback-notificationcenter--playground): Bell with the unread count that opens the notifications in a sheet: grouped by day, unread marked (also as text), "Mark as read" per entry and for all, "Load more". Newly arrived unread ones are announced. (`@wirecore/wirelayer-native`)
- [NumberFormatter](?path=/story/native_data-numberformatter--playground): A number in the format of the locale (Intl.NumberFormat): grouping, decimals, currency, percent, units (`@wirecore/wirelayer-native`)
- [NumberInput](?path=/story/native_forms-numberinput--playground): Number field with − / + buttons and the decimal keyboard. Typed text is read with comma or point ("1.234,5" and "1234.5" both work); leaving the field clamps it to min/max. (`@wirecore/wirelayer-native`)
- [OrderList](?path=/story/native_data-orderlist--playground): Choose an item (radio buttons), then move it with the buttons below – or with the screen reader actions of every item ("Move to top", "Move up" …), on the web also with Alt + arrow keys. The new position is announced. (`@wirecore/wirelayer-native`)
- [OrgChart](?path=/story/native_data-orgchart--playground): Hierarchy of people as a vertical, indented list (nested lists – screen readers read the structure): a card per person (avatar, name, role), a button beside each team that shows or hides it, teams loaded on demand. (`@wirecore/wirelayer-native`)
- [OverflowList](?path=/story/native_data-overflowlist--playground): A row of items (chips, avatars, tags) that shows as many as fit and "+N" for the rest – a tap opens them in a sheet (`@wirecore/wirelayer-native`)
- [PageHeader](?path=/story/native_layout-pageheader--playground): Heading of a screen with back button, status, facts, actions and tabs (`@wirecore/wirelayer-native`)
- [Pagination](?path=/story/native_data-pagination--playground): Page navigation for lists and tables: page buttons 44 pt (or compact), the summary as a live region – iOS and Android announce the new page. (`@wirecore/wirelayer-native`)
- [Panel](?path=/story/native_layout-panel--playground): Framed section with a heading, actions and footer; with `toggleable` the heading opens and closes it (`@wirecore/wirelayer-native`)
- [PasswordInput](?path=/story/native_forms-passwordinput--playground): Password field with a button that shows/hides the password ("Show/Hide password"); optional strength meter and requirement checklist. New passwords: pass `autoComplete="new-password"` (and `textContentType="newPassword"` on iOS). (`@wirecore/wirelayer-native`)
- [PdfViewer](?path=/story/native_media-pdfviewer--playground): PDF pages with react-native-pdf (optional peer dependency, with react-native-blob-util): page x of y, previous/next, zoom (pinch or buttons) and sharing. Needs a development build (config plugins) – not Expo Go; on the web (react-native-web) it shows a note and a link to the file instead. (`@wirecore/wirelayer-native/pdf`)
- [Persona](?path=/story/native_data-persona--playground): A person: avatar, name, role and presence (`@wirecore/wirelayer-native`)
- [PhoneInput](?path=/story/native_forms-phoneinput--playground): Country (flag and calling code, searchable sheet) and the number, formatted for the country while typing; the value is E.164. "+44 …" or "0044 …" typed or pasted switches the country. (`@wirecore/wirelayer-native`)
- [PickList](?path=/story/native_data-picklist--playground): Two lists of checkboxes, one below the other: choose items and move them across with the buttons between the lists ("Add selected", "Add all" …); the move is announced. (`@wirecore/wirelayer-native`)
- [PieChart](?path=/story/native_data-piechart--playground): Pie or doughnut drawn with react-native-svg – an image named by the title and the share of each slice; the legend lists value and share, the data list below is the text alternative (`@wirecore/wirelayer-native/chart`)
- [PinInput](?path=/story/native_forms-pininput--playground): Code input (OTP, PIN): one box per character ("Digit 1 of 6"), typing moves on, Backspace on an empty box goes back, pasting or the SMS autofill fills all boxes. (`@wirecore/wirelayer-native`)
- [Popover](?path=/story/native_overlays-popover--playground): Panel next to its trigger: measured on screen and shown in a transparent modal, flips above the trigger when there is no room below. A press outside, the back button and Escape (web) close it. For longer content use a Drawer (bottom sheet). (`@wirecore/wirelayer-native`)
- [Progress](?path=/story/native_feedback-progress--playground): Progress bar (role progressbar) named by its label, with the value as text – also in segments, steps or stripes (`@wirecore/wirelayer-native`)
- [ProgressCircle](?path=/story/native_feedback-progresscircle--playground): Progress as a ring with the value in the middle (role progressbar) (`@wirecore/wirelayer-native`)
- [QrCode](?path=/story/native_data-qrcode--playground): QR code drawn with react-native-svg (matrix from uqr, MIT – the encoder behind Ark/Zag on the web): black on white for every theme, an image (role img) named by its value. (`@wirecore/wirelayer-native`)
- [QuarterPicker](?path=/story/native_forms-quarterpicker--playground): Quarter field ("Q4 2026"): picks from the four quarters of a year (each named with its months); range: start – end (`@wirecore/wirelayer-native`)
- [RadialBar](?path=/story/native_data-radialbar--playground): Rings drawn with react-native-svg (decorative) and a legend with the values as the text (a named group) (`@wirecore/wirelayer-native`)
- RadioCard: A large card that is one option of a RadioGroup (use `columns` on the group for a grid) (`@wirecore/wirelayer-native`)
- [RadioGroup](?path=/story/native_forms-radiogroup--playground): One choice out of several (role radiogroup) named by its label; RadioGroupItem or RadioCard inside, cards in `columns` (`@wirecore/wirelayer-native`)
- [RadioGroupItem](?path=/story/native_forms-radiogroup--playground): One option of a RadioGroup: a radio button with its label (Space chooses on the web) (`@wirecore/wirelayer-native`)
- [Rating](?path=/story/native_forms-rating--playground): Star rating as one adjustable control (role slider): swipe up/down (VoiceOver) or the adjust actions (TalkBack) change it, it reads "3 stars"; on the web the arrow keys, Home/End. A tap on a star chooses it (on its left half with allowHalf). (`@wirecore/wirelayer-native`)
- [Result](?path=/story/native_feedback-result--playground): Outcome of a process or an error screen: icon, heading, text and the next steps (`@wirecore/wirelayer-native`)
- [RingProgress](?path=/story/native_feedback-ringprogress--playground): A ring with one value or several parts and a legend, e.g. storage by type (`@wirecore/wirelayer-native`)
- [Sankey](?path=/story/native_data-sankey--playground): Flows as bands between nodes (react-native-svg), an image named by the title; the flows as a list ("From: To, Value") are the text alternative (`@wirecore/wirelayer-native`)
- [SaveStatus](?path=/story/native_feedback-savestatus--playground): State of an autosave ("Saving …", "Saved") – a live region, so changes are announced (`@wirecore/wirelayer-native`)
- [Scheduler](?path=/story/native_data-scheduler--playground): Calendar for phones: toolbar (back, today, forward, the period as heading, resource filter, views), agenda as a list per day, day and week as a time grid, a compact month with the events of the chosen day. Events are buttons named with title, time, resource and series; editable events move with accessibility actions, buttons in the detail sheet or by long press and drag. (`@wirecore/wirelayer-native`)
- [SearchField](?path=/story/native_forms-searchfield--playground): A search (landmark "search"): field with magnifier, clear button and spinner; the keyboard's search key submits. Optional areas and suggestions below the field. (`@wirecore/wirelayer-native`)
- [SegmentedControl](?path=/story/native_buttons-segmentedcontrol--playground): A few exclusive options side by side – a radio group (`@wirecore/wirelayer-native`)
- [Select](?path=/story/native_forms-select--playground): Picker: the trigger opens a sheet with the options as radio buttons. The trigger is named "Label: value", so the current choice is read along. Items of any shape (itemValue/itemLabel), groups, a search field, server data with paging at the end of the list. (`@wirecore/wirelayer-native`)
- [SessionTimeout](?path=/story/native_feedback-sessiontimeout--playground): Warns before the session ends (WCAG 2.2.1) with the time left and the choice to stay signed in – an alertdialog whose first button is the safe choice. The time is measured from the clock, so it is right after the app was in the background, too. (`@wirecore/wirelayer-native`)
- [SidebarNav](?path=/story/native_navigation-sidebarnav--playground): Navigation as a list of links and groups – on a phone inside a Drawer (placement left) or the AppShell navbar (`@wirecore/wirelayer-native`)
- [SignaturePad](?path=/story/native_forms-signaturepad--playground): Signature field: draw with the finger (react-native-svg, gesture responder); "Undo" removes the last stroke. With typedAlternative the name can be typed instead – for screen reader and switch users. The value is an SVG data URL. (`@wirecore/wirelayer-native`)
- [SimpleGrid](?path=/story/native_layout-simplegrid--playground): Grid of equally wide columns; the cells wrap into rows (`@wirecore/wirelayer-native`)
- [Skeleton](?path=/story/native_feedback-skeleton--playground): Placeholder while content loads – hidden from assistive tech (mark the loading region with aria-busy). Pulses unless reduced motion is on. (`@wirecore/wirelayer-native`)
- [Slider](?path=/story/native_forms-slider--playground): Drag along the track or use the screen reader's adjust gestures (role slider, increment/decrement) and, on the web, the arrow keys, Page Up/Down and Home/End. Two values make a range with two thumbs. (`@wirecore/wirelayer-native`)
- [Sortable](?path=/story/native_data-sortable--playground): Sortable list: every item has a handle. Drag it after a long press (or right away by moving it), tap it and then the target (WCAG 2.5.7), or use the screen reader actions "Move up" … and "Move to “…”" (lists of a group); on the web Space picks up, the arrow keys move, Space drops and Escape cancels. Every step is announced. (`@wirecore/wirelayer-native`)
- [Sparkline](?path=/story/native_data-sparkline--playground): Small curved line without axes; an image named by the trend and the extremes (`@wirecore/wirelayer-native/chart`)
- [Spinner](?path=/story/native_feedback-spinner--playground): Loading indicator (role progressbar, busy) with an accessible label – with `value` a small progress ring (`@wirecore/wirelayer-native`)
- [Spoiler](?path=/story/native_layout-spoiler--playground): Cuts long content at a height with "Show more" – the button only appears when the content is higher. The cut part stays readable for screen readers. (`@wirecore/wirelayer-native`)
- [Stack](?path=/story/native_layout-stack--playground): Children below each other with even spacing (`@wirecore/wirelayer-native`)
- [Statistic](?path=/story/native_data-statistic--playground): A key figure with label, trend and description, e.g. on a dashboard (`@wirecore/wirelayer-native`)
- [StatusDot](?path=/story/native_feedback-statusdot--playground): Coloured dot (or status icon) with a text – pulses for live states, not with reduced motion (`@wirecore/wirelayer-native`)
- [Stepper](?path=/story/native_navigation-stepper--playground): Wizard for small screens: numbered steps in a row (each named with its status), the title of the current step as a heading, its content and back/next below; the last "Next" finishes. (`@wirecore/wirelayer-native`)
- [Sticky](?path=/story/native_layout-sticky--playground): Stays in view while the content scrolls: place it before (top) or after (bottom) the ScrollView – e.g. the buttons of a long form. React Native has no `position: sticky`; inside a ScrollView use `stickyHeaderIndices`. (`@wirecore/wirelayer-native`)
- [Switch](?path=/story/native_forms-switch--playground): On/off switch (role switch) with label, description and icon; the thumb slides (not with reduced motion); works in a SwitchGroup (`@wirecore/wirelayer-native`)
- [SwitchGroup](?path=/story/native_forms-switchgroup--playground): A named group (role "group") of switches with a `value` each; helper and error text describe it (`@wirecore/wirelayer-native`)
- [Tabs](?path=/story/native_navigation-tabs--playground): Tab panels: TabsList with TabsTrigger buttons (role tab) and one TabsContent per tab; only the selected one is rendered (`@wirecore/wirelayer-native`)
- [TabsContent](?path=/story/native_navigation-tabs--playground): Only the selected panel is rendered (`@wirecore/wirelayer-native`)
- [TabsList](?path=/story/native_navigation-tabs--playground): The row of tab buttons (`@wirecore/wirelayer-native`)
- [TabsTrigger](?path=/story/native_navigation-tabs--playground): A tab button (role tab, aria-selected) with optional icon and badge (`@wirecore/wirelayer-native`)
- [TagsInput](?path=/story/native_forms-tagsinput--playground): Free entries as chips: the return key or the delimiter adds, Backspace on the empty field selects the last entry (again removes it); every chip has a remove button. Additions and removals are announced. (`@wirecore/wirelayer-native`)
- [Text](?path=/story/native_basics-text--playground): Text in the WireLayer fonts and colours – React Native's own Text would use the system font. (`@wirecore/wirelayer-native`)
- [Textarea](?path=/story/native_basics-text--playground): Multi-line text field: sizes, auto height between minRows and maxRows, counter with announcements, clear button, spinner (`@wirecore/wirelayer-native`)
- [TimeGrid](?path=/story/native_forms-timegrid--playground): Free time slots for a booking (44 pt each): radio buttons for one time, toggle buttons for a range (start, then end). Taken slots stay visible but cannot be chosen; the number of free slots is announced. (`@wirecore/wirelayer-native`)
- [Timeline](?path=/story/native_data-timeline--playground): Events in time along a rail – optionally on both sides, as a feed that loads older entries (`@wirecore/wirelayer-native`)
- [TimePicker](?path=/story/native_forms-timepicker--playground): The trigger opens the times every `step` minutes as radio buttons; 24 or 12 hours follow the locale (`@wirecore/wirelayer-native`)
- [TimeRangePicker](?path=/story/native_forms-timerangepicker--playground): Start and end time in one field ("09:00 – 17:30"): the sheet lists the start times, then the end times after it (`@wirecore/wirelayer-native`)
- [Toaster](?path=/story/native_overlays-toast--playground): Place once at the root of the app; show toasts with toast({ title, description, type, action }), toast.promise(…), toast.update(id, …) and toast.dismiss(id) (`@wirecore/wirelayer-native`)
- [Toggletip](?path=/story/native_forms-toggletip--playground): Info button that shows an explanation below it on a tap (a tooltip for touch): the explanation sits in a live region and is read when it appears, the focus stays on the button. Another tap, Escape (web) or the screen reader's escape gesture close it. (`@wirecore/wirelayer-native`)
- [Tooltip](?path=/story/native_overlays-tooltip--playground): Touch: long press shows the text for a few seconds. Web: hover and keyboard focus, Escape hides it, the pointer can move onto the bubble (WCAG 1.4.13). Screen readers get the text as description/hint either way. (`@wirecore/wirelayer-native`)
- [Tour](?path=/story/native_overlays-tour--playground): Coachmarks: the screen is dimmed around the target of each step, a bubble explains it with Back/Next. Each step is a dialog – the screen reader starts at its title; the back button, Escape (web) and "Skip" end it. (`@wirecore/wirelayer-native`)
- [Tree](?path=/story/native_data-tree--playground): Tree: a flat list of rows, indented per level. A branch has a chevron button (aria-expanded) that opens and closes it; the node itself is a radio button (`selectionMode` single), a checkbox (multiple, or `checkable` with a mixed state for partly checked branches). Children load on demand with a loading row, a retry row and announcements; the search keeps the hits with their ancestors. (`@wirecore/wirelayer-native`)
- [Treemap](?path=/story/native_data-treemap--playground): A list of the items with value and share; the tiles show the shares as areas (`@wirecore/wirelayer-native`)
- [TreeSelect](?path=/story/native_forms-treeselect--playground): Select whose options are a tree: the trigger opens a sheet with the tree. One node is a radio button – choosing it closes the sheet; with `multiple` the nodes are check boxes with cascade and the field shows chips. (`@wirecore/wirelayer-native`)
- [Truncate](?path=/story/native_data-truncate--playground): Cuts a text after a number of lines (numberOfLines) – with "Show more" or the full text as tooltip. Measures whether it is really cut; screen readers always read the full text. (`@wirecore/wirelayer-native`)
- [VirtualList](?path=/story/native_data-virtuallist--playground): A long list that renders only what is in view (FlatList; with `itemGroup` a SectionList with sticky headings). The end loads more (`hasMore` + `onLoadMore`, or a data source) – "Load more" does the same for screen reader and keyboard users; loading, empty and error rows at the end, the data source's state announced. (`@wirecore/wirelayer-native`)
- [Watermark](?path=/story/native_data-watermark--playground): Repeats a text or image over the content, e.g. "Draft" or "Confidential" – decoration only (drawn as SVG, hidden from screen readers, presses go through). (`@wirecore/wirelayer-native`)
- [Wizard](?path=/story/native_navigation-wizard--playground): Multi-step form on the Stepper: "Next" checks the step (async with a spinner; a failed check is announced), "Back" keeps everything; an optional summary step before finishing. (`@wirecore/wirelayer-native`)
- [YearPicker](?path=/story/native_forms-yearpicker--playground): Year field ("2026"): picks from a grid of twelve years; range: start – end (`@wirecore/wirelayer-native`)

## Guides

- Built into the components (accessibility-built-into-the-components)
- What stays with the project (accessibility-what-stays-with-the-project)
- Automated checks (accessibility-automated-checks)
- Installation (introduction-installation)
- Adding the styles (introduction-adding-the-styles)
- Usage (introduction-usage)
- Nuxt (introduction-nuxt)
- Next.js (App Router) (introduction-next-js-app-router)
- Light, dark and themes (introduction-light-dark-and-themes)
- Customizing: defaults and classes per part (introduction-customizing-defaults-and-classes-per-part)
- Hooks and composables (introduction-hooks-and-composables)
- Blocks and ConditionBuilder (introduction-blocks-and-conditionbuilder)
- DataTable feature modules (introduction-datatable-feature-modules)
- AI assistants (MCP, llms.txt) (introduction-ai-assistants-mcp-llms-txt)
- Language and writing direction (introduction-language-and-writing-direction)
- Server data and loading more (introduction-server-data-and-loading-more)
- PDF viewer (introduction-pdf-viewer)
- React Native (Expo) (introduction-react-native-expo)
- HTML and server templates (introduction-html-and-server-templates)
- License (introduction-license)
- Components and APIs side by side (migration-components-and-apis-side-by-side)
- Pitfalls (migration-pitfalls)
- Desktop apps (dense UI, many dialogs) (migration-desktop-apps-dense-ui-many-dialogs)
- Custom theme (themes-custom-theme)
- Component sizes and shapes (themes-component-sizes-and-shapes)