@wirecore/wirelayer-react 0.3.1 → 0.5.0

package/llms.txt

@@ -0,0 +1,311 @@
+# WireLayer for React (@wirecore/wirelayer-react)
+
+> WireLayer for React: accessible components (WCAG 2.2 AA) on Ark UI and Tailwind CSS v4, with the same API and DOM in Vue and React. Install `@wirecore/wirelayer-react` and import `@wirecore/wirelayer-react/styles.css` after `tailwindcss`; English UI texts by default, other languages via LocaleProvider.
+
+Full API (props, events, slots, examples) in llms-full.txt next to this file. MCP server for AI assistants: `npx -y -p @wirecore/wirelayer-mcp wirelayer-mcp` (tools list_components, get_component, search_components, get_guide). Docs: https://wirecore.github.io/WireLayer/
+
+## Conventions
+
+- Controlled values: `value` + `onValueChange`; other controlled props come as `x` + `onXChange`. Every component takes `className` and `classes` (extra Tailwind classes per part) and reads defaults from `RecipesProvider`.
+- Content: props of type ReactNode and render functions (e.g. DataTable `cell`, `expansion`, Select `renderItem`).
+- 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).
+- 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-react/locales/fr`); dates are ISO strings ("2026-10-20", "2026-10-20T10:00").
+
+## Layout
+
+- [Accordion](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-accordion--playground): One section of an Accordion: heading button and content (`@wirecore/wirelayer-react`)
+- [Affix](https://wirecore.github.io/WireLayer/?path=/story/react_layout-affix--playground): Fixed in a corner of the window, e.g. a help or chat button (`@wirecore/wirelayer-react`)
+- [AppShell](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-center--playground): Centres its content horizontally and vertically (`@wirecore/wirelayer-react`)
+- [Collapse](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-container--playground): Centred content with a maximum width and side padding (`@wirecore/wirelayer-react`)
+- [Divider](https://wirecore.github.io/WireLayer/?path=/story/react_layout-divider--playground): Horizontal or vertical line, optionally with a label (`@wirecore/wirelayer-react`)
+- [Group](https://wirecore.github.io/WireLayer/?path=/story/react_layout-group--playground): Children side by side, wrapping onto new lines (`@wirecore/wirelayer-react`)
+- [Masonry](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-recipesprovider--playground): Own defaults and classes per part for the components below (inner providers win) (`@wirecore/wirelayer-react`)
+- [Scroller](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-simplegrid--playground): Columns of equal width, fixed per breakpoint or as many as fit (`@wirecore/wirelayer-react`)
+- [Splitter](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_layout-stack--playground): Children below each other with an even gap (`@wirecore/wirelayer-react`)
+- [Sticky](https://wirecore.github.io/WireLayer/?path=/story/react_layout-sticky--playground): Sticks to the top or bottom edge while its container scrolls (`@wirecore/wirelayer-react`)
+- [Toolbar](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-ailabel--playground): "AI-generated" (text, not only an icon) with the explanation in a toggletip (`@wirecore/wirelayer-react`)
+- [Avatar](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-avatar--playground): Overlapping avatars, with "+n" for the ones not shown (`@wirecore/wirelayer-react`)
+- [Badge](https://wirecore.github.io/WireLayer/?path=/story/react_data-badge--playground): Short label or status (solid, soft, outline or a status colour) (`@wirecore/wirelayer-react`)
+- [BarChart](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-card--playground): Surface for grouped content, optionally with title, media and footer; interactive cards with asChild (`@wirecore/wirelayer-react`)
+- [Chart](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-chat--playground): Sources of an answer: a disclosure (<details>) with a list of links (`@wirecore/wirelayer-react`)
+- [ChatThinking](https://wirecore.github.io/WireLayer/?path=/story/react_data-chat--playground): The reasoning of an answer: collapsed by default, "Thinking …" while it is being written (`@wirecore/wirelayer-react`)
+- [ChatToolCall](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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`)
+- [CodeHighlight](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-countdown--playground): role="timer": screen readers read the current value on demand, without announcing every second (`@wirecore/wirelayer-react`)
+- [DataList](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-datalist--playground): One term and its value in a DataList (`@wirecore/wirelayer-react`)
+- [DataTable](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-format--playground): A file or memory size: "1.2 MB" (`@wirecore/wirelayer-react`)
+- [FormatDate](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-format--playground): A list as a sentence: "Anna, Ben, and Clara" (`@wirecore/wirelayer-react`)
+- [FormatNumber](https://wirecore.github.io/WireLayer/?path=/story/react_data-format--playground): – (`@wirecore/wirelayer-react`)
+- [FormatRelativeTime](https://wirecore.github.io/WireLayer/?path=/story/react_data-format--playground): "3 minutes ago" in a <time> with the exact point as datetime (and title) (`@wirecore/wirelayer-react`)
+- [Funnel](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-highlight--playground): Text with the hits as <mark> (`@wirecore/wirelayer-react`)
+- [InlineCode](https://wirecore.github.io/WireLayer/?path=/story/react_data-inlinecode--playground): Code inside a sentence, with syntax colours (`@wirecore/wirelayer-react/code`)
+- [JsonViewer](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-markdown--playground): Markdown as elements with the prose typography: headings, lists, links (rel), code, quotes, tables (`@wirecore/wirelayer-react`)
+- [Marquee](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-numberformatter--playground): A number in the format of the locale ("€1,234.50") (`@wirecore/wirelayer-react`)
+- [OrderList](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-pagination--playground): Page navigation with previous/next, page buttons and a summary ("1–10 of 42") (`@wirecore/wirelayer-react`)
+- [Persona](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-radialbar--playground): Rings (decorative) and a legend with the values as the text (a named group) (`@wirecore/wirelayer-react`)
+- [Sankey](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_data-statistic--playground): Label, value (with prefix/suffix and unit), trend as arrow + text, optional chart (`@wirecore/wirelayer-react`)
+- [Timeline](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_feedback-navigationprogress--playground): Place once in the app; drive it with navigationProgress.start() / done() (`@wirecore/wirelayer-react`)
+- [NotificationCenter](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_feedback-result--playground): Result or error page: illustration (decorative icon), optional status code, title (heading), text, actions (`@wirecore/wirelayer-react`)
+- [RingProgress](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-checkbox--playground): Checkbox with label (also indeterminate), works inside Field (`@wirecore/wirelayer-react`)
+- [CheckboxCard](https://wirecore.github.io/WireLayer/?path=/story/react_forms-checkboxcard--playground): A large card that is one checkbox: title (name), description and price (description), icon (`@wirecore/wirelayer-react`)
+- [CheckboxGroup](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-chipgroup--playground): Filter chips: one or several options as toggle buttons (`@wirecore/wirelayer-react`)
+- [ColorInput](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-field--playground): – (`@wirecore/wirelayer-react/form`)
+- [Fieldset](https://wirecore.github.io/WireLayer/?path=/story/react_forms-fieldset--playground): <fieldset> with <legend>: names the group of fields; help and error text describe it (`@wirecore/wirelayer-react`)
+- [FileUpload](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-tanstack-form--playground): Label, helper text, error, aria-invalid and aria-describedby come from Field (`@wirecore/wirelayer-react/form`)
+- [FormList](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-inputgroup--playground): Input with buttons or text (InputGroupAddon) attached; only the outer corners stay round (`@wirecore/wirelayer-react`)
+- [InputGroupAddon](https://wirecore.github.io/WireLayer/?path=/story/react_forms-inputgroup--playground): Static text or icon next to the input, e.g. "€" or "https://" (`@wirecore/wirelayer-react`)
+- [JsonInput](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-maskinput--playground): Text input with a fixed format (IBAN, phone, postcode …): separators are added while typing (`@wirecore/wirelayer-react`)
+- [Mentions](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-numberinput--playground): Number field with − / + buttons, arrow keys and locale formatting ("1,234.5") (`@wirecore/wirelayer-react`)
+- [PasswordInput](https://wirecore.github.io/WireLayer/?path=/story/react_forms-passwordinput--playground): Password field with a button that shows/hides the password (named "Show/Hide password") (`@wirecore/wirelayer-react`)
+- [PhoneInput](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-radiogroup--playground): One choice out of several (role="radiogroup", arrow keys), horizontal or vertical (`@wirecore/wirelayer-react`)
+- [RadioGroupItem](https://wirecore.github.io/WireLayer/?path=/story/react_forms-radiogroup--playground): One option of a RadioGroup (`@wirecore/wirelayer-react`)
+- [Rating](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-select--playground): Dropdown list for one option: arrow keys, typeahead, Escape; native select hidden for forms (`@wirecore/wirelayer-react`)
+- [SignaturePad](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-slider--playground): Range: "Price, Minimum" / "Price, Maximum" (`@wirecore/wirelayer-react`)
+- [Switch](https://wirecore.github.io/WireLayer/?path=/story/react_forms-switch--playground): Ark renders a plain checkbox; role="switch" makes screen readers announce it as a switch (`@wirecore/wirelayer-react`)
+- [SwitchGroup](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-textarea--auto-resize): Multi-line text field, optionally growing with the text (autoResize) and with a counter; works inside Field (`@wirecore/wirelayer-react`)
+- [TimeGrid](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_forms-virtualselect--playground): Select for any number of items – only the visible options are rendered. (`@wirecore/wirelayer-react/virtual`)
+- [Wizard](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_blocks-ctasection--playground): A named region: the title labels it. Children are the actions. (`@wirecore/wirelayer-blocks-react`)
+- [ModeToggle](https://wirecore.github.io/WireLayer/?path=/story/react_blocks-modetoggle--playground): – (`@wirecore/wirelayer-blocks-react`)
+- [SiteHeader](https://wirecore.github.io/WireLayer/?path=/story/react_blocks-siteheader--playground): – (`@wirecore/wirelayer-blocks-react`)
+
+## Navigation
+
+- [BottomNavigation](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-breadcrumb--playground): One step of a Breadcrumb (link, or the current page) (`@wirecore/wirelayer-react`)
+- [CommandPalette](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-scrolltop--playground): Hidden (and out of the tab order) until the page is scrolled down (`@wirecore/wirelayer-react`)
+- [SidebarNav](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-steps--playground): Progress through steps (list with the current step marked) (`@wirecore/wirelayer-react`)
+- [TableOfContents](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-tabs--playground): Tab panels: tab list with arrow keys, one panel visible (`@wirecore/wirelayer-react`)
+- [TabsContent](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-tabs--playground): The panel of one tab (`@wirecore/wirelayer-react`)
+- [TabsList](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-tabs--playground): The row of tab buttons (`@wirecore/wirelayer-react`)
+- [TabsTrigger](https://wirecore.github.io/WireLayer/?path=/story/react_navigation-tabs--playground): One tab button (`@wirecore/wirelayer-react`)
+
+## Buttons
+
+- [Button](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_buttons-segmentedcontrol--playground): Few exclusive options as a segmented switch (radio group) (`@wirecore/wirelayer-react`)
+- [SegmentedControlItem](https://wirecore.github.io/WireLayer/?path=/story/react_buttons-segmentedcontrol--playground): One option of a SegmentedControl (`@wirecore/wirelayer-react`)
+- [SpeedDial](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_buttons-splitbutton--playground): Main action plus a menu with the other actions; both are separate buttons (`@wirecore/wirelayer-react`)
+- [ToggleButton](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_media-image--playground): With preview: a button around the picture opens a dialog (zoom, rotate; Escape closes) (`@wirecore/wirelayer-react`)
+- [ImageCropper](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-dialog--playground): Closes the surrounding Dialog (wraps your own button) (`@wirecore/wirelayer-react`)
+- [DialogContent](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-dialog--playground): The modal window of a Dialog: title, description, focus trap, Escape closes (`@wirecore/wirelayer-react`)
+- [DialogHost](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-dialogservice--playground): Place once in the app; open with `await openDialog({ title, content })` (`@wirecore/wirelayer-react`)
+- [DialogTrigger](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-dialog--playground): Opens the surrounding Dialog (wraps your own button) (`@wirecore/wirelayer-react`)
+- [Drawer](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-drawer--playground): Closes the surrounding Drawer (wraps your own button) (`@wirecore/wirelayer-react`)
+- [DrawerContent](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-drawer--playground): Opens the surrounding Drawer (wraps your own button) (`@wirecore/wirelayer-react`)
+- [FloatingPanel](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-menu--playground): The trigger is the slotted element (e.g. a Button or IconButton) (`@wirecore/wirelayer-react`)
+- [Popover](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-popover--playground): The panel of a Popover (role="dialog") with title and close button (`@wirecore/wirelayer-react`)
+- [PopoverTrigger](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-popover--playground): Opens the surrounding Popover (wraps your own button) (`@wirecore/wirelayer-react`)
+- [Toaster](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-toast--playground): Place once in the app; show toasts with toast({ title, description, type, action }) (`@wirecore/wirelayer-react`)
+- [Tooltip](https://wirecore.github.io/WireLayer/?path=/story/react_overlays-tooltip--playground): No element of its own: the trigger is the slotted element (`@wirecore/wirelayer-react`)
+- [TooltipGroup](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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 (`@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](https://wirecore.github.io/WireLayer/?path=/story/react_utilities-hotkeysdialog--playground): Dialog listing the registered shortcuts with their descriptions, grouped; opens with "?" (`@wirecore/wirelayer-react`)
+- [LandmarkNavigation](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?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](https://wirecore.github.io/WireLayer/?path=/story/react_utilities-visuallyhidden--playground): Text only for screen readers, e.g. a label next to an icon (`@wirecore/wirelayer-react`)
+
+## Guides (in llms-full.txt)
+
+- Built into the components
+- What stays with the project
+- Automated checks
+- Installation
+- Adding the styles
+- Usage
+- Nuxt
+- Next.js (App Router)
+- Light, dark and themes
+- Customizing: defaults and classes per part
+- Hooks and composables
+- Blocks and ConditionBuilder
+- DataTable feature modules
+- AI assistants (MCP, llms.txt)
+- Language and writing direction
+- Server data and loading more
+- PDF viewer
+- React Native (Expo)
+- HTML and server templates
+- License
+- Custom theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirecore/wirelayer-react",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "WireLayer components for React",
   "license": "MIT",
   "repository": {
@@ -60,7 +60,9 @@
   "files": [
     "dist",
     "styles.css",
-    "styles-core.css"
+    "styles-core.css",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "peerDependencies": {
     "@tanstack/react-form": "^1.33.5",
@@ -160,8 +162,8 @@
   "dependencies": {
     "@ark-ui/react": "^5.39.3",
     "@internationalized/date": "^3.12.4",
-    "@wirecore/wirelayer-recipes": "^0.3.1",
-    "@wirecore/wirelayer-tokens": "^0.2.0",
+    "@wirecore/wirelayer-recipes": "^0.4.1",
+    "@wirecore/wirelayer-tokens": "^0.3.0",
     "lucide-react": "^1.59.0"
   },
   "devDependencies": {
@@ -203,7 +205,7 @@
     "zod": "^4.6.7"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json && node ../../scripts/sources.ts components",
+    "build": "vite build && tsc -p tsconfig.build.json && node ../../scripts/sources.ts components && node ../../scripts/llms.ts react",
     "typecheck": "tsc --noEmit",
     "storybook": "storybook dev -p 6008 --host 0.0.0.0 --no-open",
     "build-storybook": "storybook build"