@polyxd/a2ui 0.2.2 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NOTICE +45 -0
- package/catalog/catalog.json +558 -2
- package/dist/catalog.d.ts +2 -0
- package/dist/catalog.js +5 -1
- package/dist/catalog.js.map +1 -1
- package/dist/export.d.ts +2 -0
- package/dist/export.js +1 -1
- package/dist/export.js.map +1 -1
- package/dist/mapping.d.ts +5 -2
- package/dist/mapping.js +36 -0
- package/dist/mapping.js.map +1 -1
- package/package.json +2 -2
package/NOTICE
CHANGED
|
@@ -135,6 +135,51 @@ Upstream: https://github.com/adobe/spectrum-tokens
|
|
|
135
135
|
|
|
136
136
|
Vendored under `packages/ds-spectrum/scripts/sources/`, with the upstream licence file beside it.
|
|
137
137
|
|
|
138
|
+
## Logos
|
|
139
|
+
|
|
140
|
+
Twelve packs ship their design system's official logo, unaltered, as `logo.svg`
|
|
141
|
+
(Bootstrap and Radix also ship the owner's white version as `logo-white.svg`),
|
|
142
|
+
downloaded from the owner's own site, repository or brand page. Where a design
|
|
143
|
+
system has no mark of its own (Polaris, Spectrum, Primer), the pack ships its
|
|
144
|
+
company's logo. Each is used only to identify the design system a pack is
|
|
145
|
+
modelled on, beside its name. The logos are trademarks of their owners, not
|
|
146
|
+
Polyxd's, and are not covered by Polyxd's licence:
|
|
147
|
+
|
|
148
|
+
- Material 3 (`@polyxd/ds-material3`) — Google LLC
|
|
149
|
+
- Carbon (`@polyxd/ds-carbon`) — IBM Corp.
|
|
150
|
+
- Fluent 2 (`@polyxd/ds-fluent`) — Microsoft Corporation
|
|
151
|
+
- Polaris (`@polyxd/ds-polaris`) — the Shopify logo, Shopify Inc.
|
|
152
|
+
- Spectrum 2 (`@polyxd/ds-spectrum`) — the Adobe logo, Adobe Inc.
|
|
153
|
+
- Primer (`@polyxd/ds-primer`) — the GitHub logo, GitHub, Inc.
|
|
154
|
+
- shadcn/ui (`@polyxd/ds-shadcn`) — shadcn
|
|
155
|
+
- Ant Design (`@polyxd/ds-antd`) — Ant Group
|
|
156
|
+
- Bootstrap (`@polyxd/ds-bootstrap`) — the Bootstrap team
|
|
157
|
+
- Chakra UI (`@polyxd/ds-chakra`) — Chakra Systems Inc.
|
|
158
|
+
- Mantine (`@polyxd/ds-mantine`) — Vitaly Rtishchev
|
|
159
|
+
- Radix UI (`@polyxd/ds-radix`) — WorkOS
|
|
160
|
+
|
|
161
|
+
Google, IBM, Microsoft, Shopify, Adobe and GitHub restrict the use of their
|
|
162
|
+
logos without permission; each pack's manifest (`logo`) and README record the
|
|
163
|
+
source and the owner's guidelines. GOV.UK's crown and logotype are protected and
|
|
164
|
+
may not be used by a service that is not on GOV.UK, so `@polyxd/ds-govuk` ships
|
|
165
|
+
no logo and is named in words only.
|
|
166
|
+
|
|
167
|
+
The twelve template packs' `logo.svg` files are Polyxd's own marks, drawn from
|
|
168
|
+
each template's tokens.
|
|
169
|
+
|
|
170
|
+
## Template packs
|
|
171
|
+
|
|
172
|
+
Twelve packs are original Polyxd templates, not readings of any design system:
|
|
173
|
+
`@polyxd/ds-sketch`, `@polyxd/ds-wireframe`, `@polyxd/ds-editorial`,
|
|
174
|
+
`@polyxd/ds-brutalist`, `@polyxd/ds-glass`, `@polyxd/ds-terminal`,
|
|
175
|
+
`@polyxd/ds-pastel`, `@polyxd/ds-civic`, `@polyxd/ds-finance`,
|
|
176
|
+
`@polyxd/ds-health`, `@polyxd/ds-neon` and `@polyxd/ds-mono`. Every value in
|
|
177
|
+
them was chosen for the template, they vendor nothing, and they are Apache-2.0
|
|
178
|
+
like the rest of Polyxd. The typefaces some of them name (Caveat, Patrick Hand,
|
|
179
|
+
Fraunces, Nunito, JetBrains Mono, Space Grotesk) are under the SIL Open Font
|
|
180
|
+
License and are loaded from Google Fonts by the page that uses them, never
|
|
181
|
+
distributed here.
|
|
182
|
+
|
|
138
183
|
## Specification
|
|
139
184
|
|
|
140
185
|
### A2UI
|
package/catalog/catalog.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Polyxd catalog",
|
|
6
6
|
"description": "Polyxd semantic components as an A2UI v1.0 catalog. Every component is a faithful projection of the Polyxd component with the same name and props. Generated from @polyxd/spec components/*.json by @polyxd/a2ui (npm run build:catalog).",
|
|
7
7
|
"catalogId": "https://polyxd.com/catalog/0.1/a2ui",
|
|
8
|
-
"instructions": "# Polyxd catalog for A2UI\n\nSemantic components for just-in-time interfaces. The renderer maps each one onto its own native, design-system components and tokens. Pick components by meaning, not by look. Never send colours, sizes or fonts.\n\n## Rules for every surface\n\n1. The top-level component has `\"id\": \"root\"`. Children are referenced by id (flat adjacency list), never nested inline.\n2. Data always comes from the host through JSON Pointer bindings `{\"path\": \"/...\"}`. Never invent data or pre-format numbers and dates into strings. Set `format` instead.\n3. Inside a templated list (`Collection.items`), relative paths such as `{\"path\": \"title\"}` resolve against the current item. Absolute paths start with `/`.\n4. Actions are declared capability intents: `{\"event\": {\"name\": \"transfer.confirm\", \"context\": {...}}}`. Use `{\"functionCall\": {\"call\": \"dismiss\" | \"back\" | \"next\"}}` for navigation the renderer handles itself.\n5. At most one primary action is visible at a time. A Form's submit and a Steps finish count as primary.\n6. Destructive or consequential actions go through `Confirm`.\n7. Components carry their own roles and names. Use `accessibility` only to add to them.\n\n## Components\n\n### Action\n\nA button that triggers a host capability.\n\n- **Use when:**\n - Anything the user can do that isn't typing or choosing\n- **Don't use when:**\n - Navigating between views: use Views\n - Confirming something destructive: wrap in Confirm\n- **Rendering:**\n - At most one primary action visible at a time\n - danger tone uses color.action.danger.*\n - 'description' sits under the label in type.body.small, muted; the button's accessible description\n - ui.copy is handled by the renderer: it copies 'copy' (or the context's 'text') and announces 'Copied' politely\n - 'shortcut' shows as a keyboard hint (kbd) beside the label, with mod written as ⌘ or Ctrl for the platform; it fires only while focus is inside the surface, never over the host page, and never on a disabled action\n- **Accessibility** (role: button):\n - Label describes the outcome\n - Target at least size.target.min\n - Disabled actions explain why nearby\n - A shortcut is a hint, never the only way: the button itself stays clickable and focusable\n- **Agents:** Activate by label.\n\n### ActionBar\n\nThe set of actions for a surface or section; the renderer places it where that platform expects.\n\n- **Use when:**\n - Two or more actions that apply to the whole surface or section\n- **Don't use when:**\n - A single action inline with content: use Action directly\n- **Rendering:**\n - Web: bottom of the section, primary last on desktop and first on mobile stacks\n - iOS/Android: toolbar or bottom bar on compact screens\n- **Accessibility** (role: toolbar / group):\n - Order in the accessibility tree is order of importance\n- **Agents:** Actions are listed together.\n\n### ActionMenu\n\nSecondary actions behind one control: an overflow menu, a dropdown, a split button or a context menu.\n\n- **Use when:**\n - Three or more secondary actions on a row, a card or a page header\n - One usual action with rarer alternatives (split: 'Save' with 'Save as draft')\n - Actions that belong to the thing under the pointer (context)\n- **Don't use when:**\n - One or two actions: use Action or ActionBar, where they are visible\n - The main thing to do on the surface: never hidden in a menu\n - Navigation between views: use Views or Navigation\n- **Rendering:**\n - The menu uses color.surface.overlay with elevation.overlay and radius.default; items are size.control.default tall with space.inset.default\n - A danger-toned Action shows in color.status.danger.emphasis after a divider\n - The overflow control is an icon-only button at size.target.min with the label as its accessible name; a dropdown shows the label with a chevron\n - A split's two parts share one outline; the menu part is at least size.target.min wide\n- **Accessibility** (role: a menu button (aria-haspopup, aria-expanded) opening a menu of menuitems; a split's main part is a plain button):\n - Every action is reachable by keyboard: arrows move, Enter activates, Escape closes and returns focus\n - An overflow control is named for what it holds ('More actions for Acme Corp'), never just '…'\n - A context menu's actions are also reachable another way (an overflow control), since right-click and long-press aren't discoverable\n- **Agents:** Opens the menu by its name and activates an action by its label.\n\n### Card\n\nOne self-contained entity (an account, an order, a place), optionally actionable as a whole.\n\n- **Use when:**\n - Items in a Collection that each represent an entity\n - A single entity summary in a larger surface\n- **Don't use when:**\n - Plain grouping: use Group\n - Tabular data with many attributes: use Table\n- **Rendering:**\n - If 'action' is set, the whole card opens it; controls in children (e.g. a habit's done Toggle) sit above that target and act on their own\n - Uses surface.raised and radius.default\n - 'progress' renders a progress bar with its label or percentage\n- **Accessibility** (role: article (or link/button when it has an action)):\n - Title is the accessible name\n - When actionable, the title is the card's one link; controls inside it (a Toggle, an Action) stay separate targets with their own names\n- **Agents:** Activate the card by its title; use controls inside it by their own labels.\n\n### Chart\n\nA visual summary of data, always paired with a text summary.\n\n- **Use when:**\n - A trend, comparison, share or spread matters more than exact values\n- **Don't use when:**\n - Exact values matter most: use Table or Metric\n - A single number: use Metric\n- **Rendering:**\n - trend → line, comparison → bar, composition → stacked bar (pie only for ≤ 4 parts), distribution → histogram\n - relationship → scatter (x is a measure too), flow → stacked flows from each x value to each series, hierarchy → treemap of the first series, matrix → heatmap of x values by series, range → bars from the first series to the second\n - Series colors use color.data.categorical.N in order; a matrix shades one color by value and prints the value in each cell\n- **Accessibility** (role: img (figure) with the summary as description, plus a data-table alternative):\n - 'summary' states the takeaway in words\n - Series are distinguishable without color (labels, markers)\n - The underlying data is available as a table\n- **Agents:** Reads the summary, and the data through the table alternative.\n\n### Choice\n\nPick one or several options from a known set. The renderer chooses the control.\n\n- **Use when:**\n - Any choice from a known set of options\n- **Don't use when:**\n - On/off setting: use Toggle\n - Picking between rich entities by comparing attributes: use Comparison\n- **Rendering:**\n - single, 2–4 short options → segmented control or radios\n - single, 5–10 → radios (or select on compact screens)\n - single, > 10 → searchable select\n - multiple, ≤ 10 → checkboxes; > 10 → searchable multi-select\n - Option order comes from host data or remembers the last order used\n- **Accessibility** (role: radiogroup / group of checkboxes / listbox / combobox (depends on rendering)):\n - Visible group label\n - Every option has a text label\n- **Agents:** Select options by label.\n\n### Code\n\nCode, a command or preformatted text, shown as written and copyable.\n\n- **Use when:**\n - A command to run, a snippet to paste, an identifier to copy\n - Structured text whose spacing matters\n- **Don't use when:**\n - Prose: use Text\n - Something the person types: use TextInput\n- **Rendering:**\n - type.mono at type.body.small on color.surface.subtle, with radius.control\n - Overflow scrolls sideways unless wrap is set; never clipped\n - The copy control sits in the top-right corner and says 'Copied' for two seconds after use\n- **Accessibility** (role: region named by the label, holding a code element; the copy control is a button named 'Copy <label>'):\n - Text is real text: selectable and read by screen readers line by line\n - Copying is announced ('Copied')\n - A secret is masked with the same length, with a 'Show' control\n- **Agents:** Reads the text verbatim; can activate Copy.\n\n### CodeInput\n\nA one-time code or PIN, typed into one box per character.\n\n- **Use when:**\n - A verification code from email or SMS\n - A PIN or a short recovery code\n- **Don't use when:**\n - A password: the host's own sign-in flow, never a generated screen\n - Any text longer than twelve characters: use TextInput\n- **Rendering:**\n - Boxes are size.control.large squares with radius.control, type.heading.small, centred, in type.mono\n - The active box shows color.border.focus; a filled box shows color.border.strong\n - Boxes are grouped in threes or fours by a wider gap past six characters\n- **Accessibility** (role: a group named by the label; one text input per character, each named 'Digit N of M'):\n - Typing moves focus forward; Backspace moves it back; pasting the whole code fills every box\n - The numeric kind opens the numeric keyboard and accepts autofill of one-time codes\n - Errors are said against the group, not one box\n- **Agents:** Reads the label and length; enters the code.\n\n### Collection\n\nA list of items from host data, each rendered with the same template.\n\n- **Use when:**\n - Browsing a set of similar entities\n - Search results\n- **Don't use when:**\n - Attributes compared across items: use Table or Comparison\n - Choosing an option in a form: use Choice\n- **Rendering:**\n - Long lists are virtualized by the renderer\n - Items keep their order from host data\n - grid: 2 columns on phones, more as width allows; list: one item per row\n - auto: grid when the item template is a Card with media, otherwise list\n - 'timeline' marks each item on a line, newest first, for activity feeds\n - 'carousel' scrolls horizontally with snap points, Previous and Next buttons and an 'N of M' readout; every item stays reachable by keyboard\n - 'calendar' is a month grid with the items on their days; Previous and Next move a month at a time\n - Paging shows items per page, the range and the total, as a Table does\n - Selection shows the bulk-action bar, naming how many items are selected, while any are\n - reorderable: a drag handle per item, plus Move up / Move down buttons; the new order is written to 'order'\n- **Accessibility** (role: list / listitem (listbox when selectable)):\n - Announces the item count\n - An empty state is provided\n- **Agents:** Items are enumerated with their titles; each item exposes its own actions.\n\n### ColorInput\n\nPick a colour: from swatches the host offers, or any colour.\n\n- **Use when:**\n - A colour for a label, a tag, a calendar, a theme\n - Choosing from a set of brand colours\n- **Don't use when:**\n - A choice that happens to be shown as colours (a plan, a size): use Choice\n- **Rendering:**\n - Swatches are size.control.default squares with radius.control and a 1px color.border.default ring; the chosen one shows color.border.focus\n - The free picker is the platform's, with the text value beside it in type.mono\n- **Accessibility** (role: swatches are a radiogroup of radios named by their labels; the free picker is a native color input plus a text field for the value):\n - Every swatch has a name; colour alone is never the only identification\n - The value is editable as text, so it can be typed and read\n - The chosen colour is shown beside its text value\n- **Agents:** Reads the swatch names; picks one by name or types a value.\n\n### Comparison\n\nCompare a few options across the same attributes, and choose one.\n\n- **Use when:**\n - Choosing between 2–4 plans, products, routes or offers\n- **Don't use when:**\n - More than ~5 items: use Table with sorting\n - No decision needed: use Table\n- **Rendering:**\n - Wide: items as columns; compact: one card per item with the same attribute order\n - Best values per attribute are marked when 'better' is set\n - Exactly one item may be recommended; its badge carries recommendedReason\n - Attributes with the same group sit under one heading\n - Boolean values render as a check or a dash with text alternatives ('Included' / 'Not included')\n - On compact surfaces the recommended item comes first\n- **Accessibility** (role: table (items as columns on wide screens) or list of cards):\n - Attribute names are headers\n - 'better' is conveyed in text, not only color\n- **Agents:** Reads attributes per item; choose actions are named with the item title.\n\n### Confirm\n\nAsks the user to confirm a consequential or destructive action, showing what will happen.\n\n- **Use when:**\n - Moving money, deleting data, sending on someone's behalf, anything irreversible\n- **Don't use when:**\n - Routine reversible actions (prefer undo)\n - Information only: use Status\n- **Rendering:**\n - destructive uses color.action.danger.*\n - Capabilities with high risk level must use Confirm (enforced by the verifier)\n - the consequence sits directly above the confirm button\n - amount and subject lead the dialog when set\n - consequences render as an icon list, two columns on wide surfaces\n- **Accessibility** (role: alertdialog):\n - Focus starts on the least destructive option\n - Confirm label repeats the action verb\n - Escape cancels\n- **Agents:** Reads title and consequence; confirm and cancel are named buttons.\n\n### DateInput\n\nA date, time, date-time or date range.\n\n- **Use when:**\n - Any date or time entry\n- **Don't use when:**\n - Relative choices like 'This month / Last month': use Choice\n- **Rendering:**\n - Memorable dates (birthdays) use separate day/month/year fields; near dates use a calendar\n - 'month' and 'year' take only that part; the year field is typed, four digits\n - multiple: each chosen date becomes a chip with a remove control; the field adds another\n- **Accessibility** (role: group of spinbuttons or a date picker dialog):\n - Typing the date is always possible, not only picking from a calendar\n- **Agents:** Fill by label with an ISO date.\n\n### DetailList\n\nLabel/value pairs describing one thing (a summary, a receipt, a review step).\n\n- **Use when:**\n - Reviewing before submitting\n - Showing the attributes of one entity\n - Receipts\n - Fees, prices and totals before someone commits (variant 'receipt')\n- **Don't use when:**\n - Many entities with the same attributes: use Table\n - Comparing entities: use Comparison\n- **Rendering:**\n - Keeps the item order stable across generations (keys are remembered)\n - receipt: values right-aligned in tabular figures, the total row emphasised; people read amounts from the right\n - 'grid' lays fields out in columns by width, label above value\n - rowAction: each row ends with a 'Change' link whose accessible name includes the row's label; the total row has none\n- **Accessibility** (role: list of term/definition pairs (dl)):\n - Label and value are programmatically associated\n- **Agents:** Read each label with its value.\n\n### Disclosure\n\nProgressive disclosure: secondary content hidden behind a toggle.\n\n- **Use when:**\n - Details most people don't need (fees breakdown, advanced options, help text)\n- **Don't use when:**\n - Content everyone needs to complete the task\n - Primary navigation\n- **Rendering:**\n - Never hide required inputs or the primary action inside a closed Disclosure\n- **Accessibility** (role: button (aria-expanded) + region):\n - Summary is a button with expanded state\n - Hidden content is not in the tab order while closed\n- **Agents:** Expand by the summary text; state is exposed as expanded/collapsed.\n\n### FileInput\n\nChoose or drop files to attach or upload.\n\n- **Use when:**\n - Attaching a document, a receipt, a photo\n - Importing a file the product reads\n- **Don't use when:**\n - Taking a photo with the camera: the host's own flow\n - Pasting text: use TextInput\n- **Rendering:**\n - A dashed drop zone on color.surface.subtle with radius.control, the chooser control inside it\n - Each chosen file shows name, size and a remove control; a progress bar while the host uploads\n - Refusals use color.status.danger text under the zone\n- **Accessibility** (role: a native file input, labelled; the drop zone is a large target for the same input):\n - Keyboard opens the chooser; drag-and-drop is an addition, never the only way\n - Chosen files are listed as text with a 'Remove <name>' button each\n - Type and size limits are said before choosing and in any refusal\n- **Agents:** Reads the label and limits; attaches files through the host.\n\n### FilterPanel\n\nFilters for a list of results, with the result count.\n\n- **Use when:**\n - Browsing results people narrow by several attributes\n - More than two filters, or filters that take space (ranges, long lists)\n- **Don't use when:**\n - One or two quick filters: put a Choice (chips) above the results\n - Filling in information: use Form\n- **Rendering:**\n - Wide: filters in a sidebar beside the results\n - Compact: a 'Filters · n' button opens a bottom sheet whose action says 'Show n results'\n - Active filters show as removable chips above the results\n - Filters apply as they change (no separate Apply on wide)\n- **Accessibility** (role: region (filters) plus the results):\n - The result count is announced politely when it changes\n - Each active filter can be removed with a named button ('Remove filter: Desk')\n- **Agents:** Set filter inputs by label; read the result count; remove filters by their Remove buttons.\n\n### Form\n\nCollects inputs and submits them together.\n\n- **Use when:**\n - Any set of inputs that are submitted together\n- **Don't use when:**\n - Settings that apply immediately: use Toggles with actions\n - Several distinct stages: use Steps\n- **Rendering:**\n - One column; labels above fields\n - Submit is the primary action; cancel is secondary\n - Submit context is built from the form's input bindings\n - 'horizontal' becomes stacked on compact surfaces\n - 'aside' sits beside the form on wide surfaces; on compact ones it comes first, before the fields, so people read what they are agreeing to\n- **Accessibility** (role: form):\n - Submit is a real submit button\n - On submit errors, focus moves to an error summary that links to each field\n- **Agents:** Fill fields by label, then activate the submit button by its label.\n\n### Group\n\nVisually groups closely related items without a heading (proximity).\n\n- **Use when:**\n - A few items that belong together (a key figure and its caption, several metrics)\n- **Don't use when:**\n - The group needs a heading: use Section\n - Choosing between items: use Choice or Comparison\n- **Rendering:**\n - 'inline' collapses to a stack below the compact breakpoint\n - Gap uses space.stack.default or space.inline.default\n- **Accessibility** (role: group):\n - Has an accessible name when it contains interactive items\n- **Agents:** Treated as one unit when its label is present.\n\n### Identity\n\nA person, team or organisation: picture, name and details, or several of them together.\n\n- **Use when:**\n - Who something belongs to, was sent by or is assigned to\n - The recipient on a payment, the owner on a record, the members on a team\n - A list of people where the face helps recognition\n- **Don't use when:**\n - Choosing a person from a list: use Choice with avatarPath\n - A person's full record: use Card or DetailList\n- **Rendering:**\n - Initials come from the name's first letters, on a neutral surface with color.text.default; a pack may derive a stable colour from the name\n - Sizes: small 24px, default 40px, large 64px; the name uses type.body.default or type.heading.small for large\n - A group overlaps pictures by a quarter, with a '+N' tag for the rest\n - Images are never stretched; missing images fall back to initials, never to a broken image\n- **Accessibility** (role: group named by the name; the picture is decorative and the name is text):\n - The name is real text, never only an image or initials\n - A group's accessible name lists the first names and how many more\n - With an action, the whole element is one button or link named by the name\n- **Agents:** Reads the name and detail; a group exposes every member's name.\n\n### Media\n\nAn image, video, audio clip, gallery or QR code supplied by the host.\n\n- **Use when:**\n - Photos or illustrations that help identify something (a product, a place, a person)\n - A recording people play, or a code they scan\n- **Don't use when:**\n - Decoration with no information\n - Icons for actions (renderer supplies those)\n- **Rendering:**\n - Images never convey information that is not also in text\n - 'video' shows 'poster' until played; 'audio' is a compact player; both put 'transcript' under a disclosure\n - 'gallery' is a grid of the items' images, each with its own alt text\n - 'qr' is drawn on a canvas at a size that scans from a phone, with the alt as its accessible name\n- **Accessibility** (role: img (video / audio players, list for a gallery)):\n - Has alt text unless decorative (then hidden from assistive technology)\n - Video and audio have native controls and offer a transcript\n - A QR code's alt says what scanning it does\n- **Agents:** Reads the alt text; a gallery's images by their own alt text; a QR code's value.\n\n### Metric\n\nA key figure with a label, and optionally its change.\n\n- **Use when:**\n - One to four headline numbers the user asked about\n- **Don't use when:**\n - Many numbers: use Table or DetailList\n - Trends over time: use Chart\n- **Rendering:**\n - Value uses type.numeric.display\n - Change uses color.data.positive / negative according to 'favorable'\n- **Accessibility** (role: group (label + value)):\n - Change direction is conveyed in text as well as color\n - Screen readers read label, value and change as one sentence\n- **Agents:** Read label and value.\n\n### Navigation\n\nThe product's main navigation.\n\n- **Use when:**\n - Software with sections people move between (B2B apps, dashboards)\n - Only when the host doesn't already provide navigation\n- **Don't use when:**\n - Steps of one task: use Steps\n - Sections of one record: use Views\n - A surface embedded in a host that has its own navigation\n- **Rendering:**\n - Wide: a side navigation with grouped items\n - Compact: a menu button that opens the navigation\n - Badges sit at the end of their item\n - 'breadcrumb' is an ordered trail ending with the current item (aria-current=\"page\"), never behind a menu button\n - 'nested' shows each group as an expandable section; the group holding the current item starts open\n - 'toc' lists the page's sections as anchors, the section in view highlighted\n - 'local' lays the items out as tabs, the current one marked\n- **Accessibility** (role: navigation):\n - The current item carries aria-current=\"page\"\n - Badges say what they count ('12 overdue')\n- **Agents:** Move between sections by activating items by their labels.\n\n### Panel\n\nContent over the current view: a dialog, a drawer, a bottom sheet or a popover, opened from an action and dismissed to return.\n\n- **Use when:**\n - A short task on top of the page: edit one thing, pick one thing, see one record\n - Detail the person asked for that shouldn't replace where they are\n - A small set of options next to the control that opened them (popover)\n- **Don't use when:**\n - Confirming a consequential action: use Confirm, which is a dialog with the right words and order\n - A whole flow of several steps: use Steps on its own surface\n - Passing feedback: use Status\n- **Rendering:**\n - A backdrop of color.surface.inverse at opacity.overlay for modal kinds\n - dialog: max 560px on desktop, full width with space.inset.default on phones; drawer: 420px from the end edge; sheet: from the bottom with radius.large on the top corners; popover: color.surface.overlay with elevation.overlay and an arrow\n - The title is type.heading.medium with the close control at the end of the header\n - The action bar sits in a footer; on phones it is fixed to the bottom, full width\n - Motion uses motion.duration.default and motion.easing.standard; reduced motion fades instead\n- **Accessibility** (role: dialog (aria-modal for dialog, drawer and sheet) named by the title; popover is a non-modal dialog):\n - Focus moves into the panel on open and back to the opener on close\n - Tab stays inside a modal panel; Escape dismisses a dismissible one\n - The page behind a modal panel is inert\n - A sheet can be dismissed by dragging down as well as by the close control\n- **Agents:** Opens, reads the content and closes it by name; the footer actions are exposed like any ActionBar.\n\n### Progress\n\nHow far along something is, or how much of a bounded amount is used: a bar, a ring or a meter.\n\n- **Use when:**\n - A task that takes time, with a known share done\n - How much of a quota, budget or capacity is used\n - Progress towards a goal (pages read, steps walked)\n- **Don't use when:**\n - A number the person came to see: use Metric\n - Steps of a task the person moves through: use Steps\n - A short wait with nothing to measure: Status 'loading'\n- **Rendering:**\n - The track uses color.surface.subtle; the fill uses color.action.primary.background, or color.status.<tone>.emphasis for a toned meter\n - Height is size.control.small / 3 for a bar; a ring is size.control.default across\n - Readout in tabular figures, type.body.small, after the label\n - The bar's length means the fraction: never used for an amount with no bound\n- **Accessibility** (role: progressbar (bar, ring) or meter, named by the label, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext):\n - The readout is real text next to the graphic, never only the fill\n - A meter's tone is also said in text ('nearly full'), not only shown by colour\n - Indeterminate progress has no value attributes and is announced as busy\n- **Agents:** Reads label, value and max as text.\n\n### RangeInput\n\nA number, or a range between two numbers, within known bounds.\n\n- **Use when:**\n - Approximate values within a range (budget cap, volume)\n - A price or date range for filtering (mode 'range')\n- **Don't use when:**\n - Exact values: use TextInput with kind 'number' or 'currency'\n- **Rendering:**\n - Shows min, max and the current formatted value\n - mode 'range' shows two thumbs and min/max fields that stay in sync\n- **Accessibility** (role: slider):\n - Current value is shown as text\n - Keyboard arrows change the value by step\n- **Agents:** Set the value directly by label.\n\n### Rating\n\nA score out of N: given by the person, or shown as others gave it.\n\n- **Use when:**\n - Asking how something went, out of five\n - Showing a product's or place's rating with the count behind it\n- **Don't use when:**\n - A number within bounds that isn't a score: use RangeInput\n - Yes or no: use Toggle or Choice\n- **Rendering:**\n - Filled shapes use color.status.warning.emphasis; empty ones use color.border.default\n - The readout ('4.6') is shown after the shapes in tabular figures, with the count in color.text.muted\n - A rating that can be given shows the label above, like every input\n- **Accessibility** (role: radiogroup of radios named '1 star' to 'N stars' when it can be given; an image named '4.6 out of 5' when read-only):\n - Every star is a real control at size.target.min when the person can rate\n - The current value is announced; half values are said as such\n - Read-only ratings carry the score as text, not only as filled shapes\n- **Agents:** Reads the score and the count; sets a score by choosing '<n> stars'.\n\n### Section\n\nA titled region of the surface that groups related content under a heading.\n\n- **Use when:**\n - The surface has two or more distinct topics (e.g. 'Recipient' and 'Amount')\n - Content would otherwise exceed one screen and needs signposting\n- **Don't use when:**\n - Only one topic: put content directly under the root\n - Visual grouping without a heading: use Group\n- **Rendering:**\n - Heading level follows nesting depth, never chosen by the model\n - Spacing between sections uses space.stack.section\n- **Accessibility** (role: region (with heading)):\n - Title is rendered as a real heading; nesting depth sets the heading level\n - Title is the region's accessible name\n- **Agents:** Navigate by heading; the title names the region.\n\n### Status\n\nFeedback about state: info, success, warning, error, empty or loading.\n\n- **Use when:**\n - Results of an action\n - Empty collections\n - Errors with a way to recover\n - Loading states\n - 'undo': after a reversible action ran, say what happened and offer Undo instead of asking first\n- **Don't use when:**\n - Validation errors on a field: inputs show their own errors\n - Confirmation before acting: use Confirm\n- **Rendering:**\n - error and warning use color.status.* tokens and an icon\n - empty states explain why and what to do next\n - loading shows a skeleton when layout is known, otherwise a progress indicator\n - 'undo' renders as a snackbar at the bottom of the surface, announced politely, with the Undo action\n - Empty states may carry an ActionBar: one primary and one secondary action\n - 'inline' renders a bordered notice with its action on the right\n- **Accessibility** (role: status or alert (live region)):\n - success/info/loading are polite live regions; error is assertive\n - Meaning is in text, not only color or icon\n- **Agents:** Reads the title and message; the recovery action is exposed.\n\n### Steps\n\nA task split into ordered steps with visible progress.\n\n- **Use when:**\n - Tasks with dependent stages or too many inputs for one view (checkout, onboarding)\n- **Don't use when:**\n - Independent views: use Views\n - Under ~6 inputs: a single Form\n- **Rendering:**\n - Renderer provides Back (ui.back) and Next (ui.next); the last step shows 'finish'\n - Each step validates before moving on\n - 'tasklist' is a list of tasks with a status tag each (GOV.UK task list); a task opens its content in place, and 'finish' follows the list, saying how many are done\n - 'guide' shows every step's title and content in a numbered list, with 'finish' after the last\n- **Accessibility** (role: group with step progress (aria-current on the current step)):\n - Current step and total are announced\n - Back never loses entered data\n- **Agents:** Reads 'step N of M'; next/back are exposed as buttons.\n\n### Table\n\nTabular data: many items sharing the same attributes.\n\n- **Use when:**\n - Scanning or comparing many rows by several attributes\n - Records people scan, sort, select and act on in bulk (B2B lists)\n- **Don't use when:**\n - One entity: use DetailList\n - A few entities where the user must choose: use Comparison\n- **Rendering:**\n - On compact screens, rows become stacked cards with label/value pairs\n - Alignment follows the column format, never chosen by the model\n - Numbers and currency are right-aligned with tabular figures; 'status' renders as a tag using 'tones'\n - On compact surfaces the table becomes a list of rows: the entity, the key fields in one line, and the status\n - Selection replaces the toolbar with the bulk-action bar while rows are selected\n - Paging shows rows per page, the range and the total\n - expandable: each row starts with a toggle (aria-expanded) named after the row; the open row's 'detail' spans the table beneath it\n- **Accessibility** (role: table with caption and column headers):\n - Has a caption\n - Column headers are real header cells\n - Numeric columns are right-aligned by format\n - Sortable headers carry aria-sort and say what sorting does\n - The select-all checkbox is mixed when some rows are selected\n - The bulk-action bar names how many rows are selected, announced politely\n - Each row's action menu is named after its row\n- **Agents:** Read by row and column headers; rows with rowAction are activatable. Sort by activating a column header; select rows by their checkboxes; act in bulk from the bar that appears.\n\n### Tag\n\nA short label, status or count attached to something else.\n\n- **Use when:**\n - The state of a record, next to its name: 'Past due', 'Draft', 'Live'\n - A category or label a thing carries\n - How many of something, on a navigation item or a section heading\n - Chosen items a person can take off again\n- **Don't use when:**\n - A whole sentence of feedback: use Status\n - Something the person switches on or off: use Toggle\n - A metric the person came for: use Metric\n- **Rendering:**\n - status uses color.status.<tone>.background and .foreground; label and count use neutral tokens\n - count is set in tabular figures\n - A tag never wraps: long labels are truncated with the full text on hover and in the accessible name\n - Fits inline with text and in a Card header; radius.small unless the pack sets a pill\n- **Accessibility** (role: text; for 'count', the label is the accessible name of the number; for a removable tag, a button named 'Remove <label>'):\n - Tone is conveyed by the label, never only by colour\n - A count reads as '<label>: <count>' to a screen reader\n - The remove control is at least size.target.min and named for what it removes\n- **Agents:** Reads label, tone and count; can activate the remove control by its name.\n\n### Text\n\nA run of text.\n\n- **Use when:**\n - Explanations, instructions, messages\n- **Don't use when:**\n - Headings: use Section title\n - Label/value pairs: use DetailList\n - Key figures: use Metric\n- **Rendering:**\n - 'supporting' uses color.text.muted\n - No inline styling; emphasis comes from structure\n - 'rich' renders only the four markup forms, as real elements; anything else, including HTML, is shown as typed, and only http, https, mailto and tel links are live\n - 'list' renders a ul or ol; entries are shown as text, or by 'itemPath' when they are objects\n - 'quote' is a blockquote, the cite on its own line after it\n - format 'color' shows a swatch of the value beside it; 'bytes' shows a size like 1.2 MB\n- **Accessibility** (role: text):\n - Body text is at least 16px (type.body.default)\n - Line length is capped by measure.max\n- **Agents:** Read as text.\n\n### TextInput\n\nA single text-like value: text, number, email, phone, currency, search or long text.\n\n- **Use when:**\n - Free-form values the user types\n- **Don't use when:**\n - A value from a known set: use Choice\n - Dates: use DateInput\n - Secrets (passwords, card numbers): not generated; hosts provide their own secure flows\n- **Rendering:**\n - Width suggests expected length\n - Errors appear after the user leaves the field or submits, not while typing\n - kind 'search' renders as a pill search field with an icon; the label stays as its accessible name\n - size 'hero' renders a large centred amount with the currency symbol dimmed\n - 'suggestions' and 'mentions' are comboboxes: the list opens as you type, arrow keys move through it, Enter takes an option, Escape closes it\n - 'richtext' is an editable area with Bold, Italic and List controls; the value is text with **bold**, *italic* and '- ' items\n - 'tags' shows each value as a chip with a remove control; Enter or a comma adds what was typed, Backspace in an empty field removes the last chip; the value is a list of strings\n - 'code' uses type.numeric (monospace) and turns off autocorrect, autocapitalize and spellcheck\n - 'masked' fills the mask's literal characters as you type and stores the text as shown\n - 'inline' renders the value as text with an Edit control; Enter saves, Escape restores the previous value\n- **Accessibility** (role: textbox / searchbox / spinbutton):\n - Visible label, never placeholder-only\n - Help and errors are associated with the field\n - Kind sets the right keyboard and autocomplete\n- **Agents:** Fill by label.\n\n### Toggle\n\nAn on/off setting.\n\n- **Use when:**\n - Settings that take effect immediately\n - A single yes/no inside a form\n- **Don't use when:**\n - Choosing between named options: use Choice\n- **Rendering:**\n - With 'action' it renders as a switch; inside a Form without action, as a checkbox\n- **Accessibility** (role: switch (immediate) / checkbox (in a form)):\n - Label says what 'on' means\n- **Agents:** Toggle by label; state is exposed as on/off.\n\n### Tree\n\nA hierarchy people expand, browse and pick from: folders, an org chart, nested categories.\n\n- **Use when:**\n - Things that contain things: folders and files, an organisation, nested categories\n - Picking a place in a hierarchy (move to folder, choose a category)\n- **Don't use when:**\n - A flat list, however long: use Collection or Table\n - Nested navigation of the product itself: use Navigation\n - Progressive disclosure of one section: use Disclosure\n- **Rendering:**\n - Indent per level uses space.inline.default; the expander is a chevron at size.target.min\n - Leaves have no expander and align with siblings' labels\n - Selection uses color.selection.background; the focused node shows color.border.focus\n - Beyond 200 nodes the renderer virtualises rows\n- **Accessibility** (role: tree with treeitem nodes; aria-expanded on nodes with children, aria-selected when selectable):\n - Arrow keys move and expand; Home and End jump; typing jumps to a label\n - Level and position are exposed (aria-level, aria-setsize, aria-posinset)\n - Expanded state is announced; selection is announced\n- **Agents:** Reads every node by label and level; expands a node by name and selects or activates one by name.\n\n### Views\n\nSwitch between alternative views of the same subject (tabs).\n\n- **Use when:**\n - 2–6 peer views of the same data (Overview / Transactions / Settings)\n- **Don't use when:**\n - Sequential steps: use Steps\n - Filtering one list: use Choice\n- **Rendering:**\n - More than 4 views on compact screens become a menu or scrollable tabs\n - Counts sit beside their labels and are part of the tab's accessible name\n- **Accessibility** (role: tablist / tab / tabpanel):\n - Each tab has a visible label\n - Arrow keys move between tabs\n- **Agents:** Select a view by its label.\n",
|
|
8
|
+
"instructions": "# Polyxd catalog for A2UI\n\nSemantic components for just-in-time interfaces. The renderer maps each one onto its own native, design-system components and tokens. Pick components by meaning, not by look. Never send colours, sizes or fonts.\n\n## Rules for every surface\n\n1. The top-level component has `\"id\": \"root\"`. Children are referenced by id (flat adjacency list), never nested inline.\n2. Data always comes from the host through JSON Pointer bindings `{\"path\": \"/...\"}`. Never invent data or pre-format numbers and dates into strings. Set `format` instead.\n3. Inside a templated list (`Collection.items`), relative paths such as `{\"path\": \"title\"}` resolve against the current item. Absolute paths start with `/`.\n4. Actions are declared capability intents: `{\"event\": {\"name\": \"transfer.confirm\", \"context\": {...}}}`. Use `{\"functionCall\": {\"call\": \"dismiss\" | \"back\" | \"next\"}}` for navigation the renderer handles itself.\n5. At most one primary action is visible at a time. A Form's submit and a Steps finish count as primary.\n6. Destructive or consequential actions go through `Confirm`.\n7. Components carry their own roles and names. Use `accessibility` only to add to them.\n8. Never use AppBar, Custom, Footer, Frame or Outlet: the product's shell is authored, and a surface renders inside it.\n\n## Components\n\n### Action\n\nA button that triggers a host capability.\n\n- **Use when:**\n - Anything the user can do that isn't typing or choosing\n- **Don't use when:**\n - Navigating between views: use Views\n - Confirming something destructive: wrap in Confirm\n- **Rendering:**\n - At most one primary action visible at a time\n - danger tone uses color.action.danger.*\n - 'description' sits under the label in type.body.small, muted; the button's accessible description\n - ui.copy is handled by the renderer: it copies 'copy' (or the context's 'text') and announces 'Copied' politely\n - 'shortcut' shows as a keyboard hint (kbd) beside the label, with mod written as ⌘ or Ctrl for the platform; it fires only while focus is inside the surface, never over the host page, and never on a disabled action\n- **Accessibility** (role: button):\n - Label describes the outcome\n - Target at least size.target.min\n - Disabled actions explain why nearby\n - A shortcut is a hint, never the only way: the button itself stays clickable and focusable\n- **Agents:** Activate by label.\n\n### ActionBar\n\nThe set of actions for a surface or section; the renderer places it where that platform expects.\n\n- **Use when:**\n - Two or more actions that apply to the whole surface or section\n- **Don't use when:**\n - A single action inline with content: use Action directly\n- **Rendering:**\n - Web: bottom of the section, primary last on desktop and first on mobile stacks\n - iOS/Android: toolbar or bottom bar on compact screens\n- **Accessibility** (role: toolbar / group):\n - Order in the accessibility tree is order of importance\n- **Agents:** Actions are listed together.\n\n### ActionMenu\n\nSecondary actions behind one control: an overflow menu, a dropdown, a split button or a context menu.\n\n- **Use when:**\n - Three or more secondary actions on a row, a card or a page header\n - One usual action with rarer alternatives (split: 'Save' with 'Save as draft')\n - Actions that belong to the thing under the pointer (context)\n- **Don't use when:**\n - One or two actions: use Action or ActionBar, where they are visible\n - The main thing to do on the surface: never hidden in a menu\n - Navigation between views: use Views or Navigation\n- **Rendering:**\n - The menu uses color.surface.overlay with elevation.overlay and radius.default; items are size.control.default tall with space.inset.default\n - A danger-toned Action shows in color.status.danger.emphasis after a divider\n - The overflow control is an icon-only button at size.target.min with the label as its accessible name; a dropdown shows the label with a chevron\n - A split's two parts share one outline; the menu part is at least size.target.min wide\n- **Accessibility** (role: a menu button (aria-haspopup, aria-expanded) opening a menu of menuitems; a split's main part is a plain button):\n - Every action is reachable by keyboard: arrows move, Enter activates, Escape closes and returns focus\n - An overflow control is named for what it holds ('More actions for Acme Corp'), never just '…'\n - A context menu's actions are also reachable another way (an overflow control), since right-click and long-press aren't discoverable\n- **Agents:** Opens the menu by its name and activates an action by its label.\n\n### Card\n\nOne self-contained entity (an account, an order, a place), optionally actionable as a whole.\n\n- **Use when:**\n - Items in a Collection that each represent an entity\n - A single entity summary in a larger surface\n- **Don't use when:**\n - Plain grouping: use Group\n - Tabular data with many attributes: use Table\n- **Rendering:**\n - If 'action' is set, the whole card opens it; controls in children (e.g. a habit's done Toggle) sit above that target and act on their own\n - Uses surface.raised and radius.default\n - 'progress' renders a progress bar with its label or percentage\n- **Accessibility** (role: article (or link/button when it has an action)):\n - Title is the accessible name\n - When actionable, the title is the card's one link; controls inside it (a Toggle, an Action) stay separate targets with their own names\n- **Agents:** Activate the card by its title; use controls inside it by their own labels.\n\n### Chart\n\nA visual summary of data, always paired with a text summary.\n\n- **Use when:**\n - A trend, comparison, share or spread matters more than exact values\n- **Don't use when:**\n - Exact values matter most: use Table or Metric\n - A single number: use Metric\n- **Rendering:**\n - trend → line, comparison → bar, composition → stacked bar (pie only for ≤ 4 parts), distribution → histogram\n - relationship → scatter (x is a measure too), flow → stacked flows from each x value to each series, hierarchy → treemap of the first series, matrix → heatmap of x values by series, range → bars from the first series to the second\n - Series colors use color.data.categorical.N in order; a matrix shades one color by value and prints the value in each cell\n- **Accessibility** (role: img (figure) with the summary as description, plus a data-table alternative):\n - 'summary' states the takeaway in words\n - Series are distinguishable without color (labels, markers)\n - The underlying data is available as a table\n- **Agents:** Reads the summary, and the data through the table alternative.\n\n### Choice\n\nPick one or several options from a known set. The renderer chooses the control.\n\n- **Use when:**\n - Any choice from a known set of options\n- **Don't use when:**\n - On/off setting: use Toggle\n - Picking between rich entities by comparing attributes: use Comparison\n- **Rendering:**\n - single, 2–4 short options → segmented control or radios\n - single, 5–10 → radios (or select on compact screens)\n - single, > 10 → searchable select\n - multiple, ≤ 10 → checkboxes; > 10 → searchable multi-select\n - Option order comes from host data or remembers the last order used\n- **Accessibility** (role: radiogroup / group of checkboxes / listbox / combobox (depends on rendering)):\n - Visible group label\n - Every option has a text label\n- **Agents:** Select options by label.\n\n### Code\n\nCode, a command or preformatted text, shown as written and copyable.\n\n- **Use when:**\n - A command to run, a snippet to paste, an identifier to copy\n - Structured text whose spacing matters\n- **Don't use when:**\n - Prose: use Text\n - Something the person types: use TextInput\n- **Rendering:**\n - type.mono at type.body.small on color.surface.subtle, with radius.control\n - Overflow scrolls sideways unless wrap is set; never clipped\n - The copy control sits in the top-right corner and says 'Copied' for two seconds after use\n- **Accessibility** (role: region named by the label, holding a code element; the copy control is a button named 'Copy <label>'):\n - Text is real text: selectable and read by screen readers line by line\n - Copying is announced ('Copied')\n - A secret is masked with the same length, with a 'Show' control\n- **Agents:** Reads the text verbatim; can activate Copy.\n\n### CodeInput\n\nA one-time code or PIN, typed into one box per character.\n\n- **Use when:**\n - A verification code from email or SMS\n - A PIN or a short recovery code\n- **Don't use when:**\n - A password: the host's own sign-in flow, never a generated screen\n - Any text longer than twelve characters: use TextInput\n- **Rendering:**\n - Boxes are size.control.large squares with radius.control, type.heading.small, centred, in type.mono\n - The active box shows color.border.focus; a filled box shows color.border.strong\n - Boxes are grouped in threes or fours by a wider gap past six characters\n- **Accessibility** (role: a group named by the label; one text input per character, each named 'Digit N of M'):\n - Typing moves focus forward; Backspace moves it back; pasting the whole code fills every box\n - The numeric kind opens the numeric keyboard and accepts autofill of one-time codes\n - Errors are said against the group, not one box\n- **Agents:** Reads the label and length; enters the code.\n\n### Collection\n\nA list of items from host data, each rendered with the same template.\n\n- **Use when:**\n - Browsing a set of similar entities\n - Search results\n- **Don't use when:**\n - Attributes compared across items: use Table or Comparison\n - Choosing an option in a form: use Choice\n- **Rendering:**\n - Long lists are virtualized by the renderer\n - Items keep their order from host data\n - grid: 2 columns on phones, more as width allows; list: one item per row\n - auto: grid when the item template is a Card with media, otherwise list\n - 'timeline' marks each item on a line, newest first, for activity feeds\n - 'carousel' scrolls horizontally with snap points, Previous and Next buttons and an 'N of M' readout; every item stays reachable by keyboard\n - 'calendar' is a month grid with the items on their days; Previous and Next move a month at a time\n - Paging shows items per page, the range and the total, as a Table does\n - Selection shows the bulk-action bar, naming how many items are selected, while any are\n - reorderable: a drag handle per item, plus Move up / Move down buttons; the new order is written to 'order'\n- **Accessibility** (role: list / listitem (listbox when selectable)):\n - Announces the item count\n - An empty state is provided\n- **Agents:** Items are enumerated with their titles; each item exposes its own actions.\n\n### ColorInput\n\nPick a colour: from swatches the host offers, or any colour.\n\n- **Use when:**\n - A colour for a label, a tag, a calendar, a theme\n - Choosing from a set of brand colours\n- **Don't use when:**\n - A choice that happens to be shown as colours (a plan, a size): use Choice\n- **Rendering:**\n - Swatches are size.control.default squares with radius.control and a 1px color.border.default ring; the chosen one shows color.border.focus\n - The free picker is the platform's, with the text value beside it in type.mono\n- **Accessibility** (role: swatches are a radiogroup of radios named by their labels; the free picker is a native color input plus a text field for the value):\n - Every swatch has a name; colour alone is never the only identification\n - The value is editable as text, so it can be typed and read\n - The chosen colour is shown beside its text value\n- **Agents:** Reads the swatch names; picks one by name or types a value.\n\n### Columns\n\nSide-by-side columns that collapse to a stack on compact layouts: a main column with a narrower one beside it, or equal halves.\n\n- **Use when:**\n - A form with help beside it; a record with a summary beside it; a list beside a preview\n - Anywhere a wide screen should use its width without the compact screen paying for it\n- **Don't use when:**\n - Metrics in a row: use Group with arrangement 'inline'\n - A master–detail pair that keeps both alive: use Split\n- **Rendering:**\n - Gutter space.inline.loose between columns; stacked with space.stack.loose\n - Column widths follow the layout; 'sidebar-*' columns never shrink below 16rem\n - Collapses at the surface's width, not the viewport's\n- **Accessibility** (role: none (layout only)):\n - Reading order is the children's order at every width\n - Collapsing never reorders content\n- **Agents:** Invisible: reads the children in order.\n\n### Comparison\n\nCompare a few options across the same attributes, and choose one.\n\n- **Use when:**\n - Choosing between 2–4 plans, products, routes or offers\n- **Don't use when:**\n - More than ~5 items: use Table with sorting\n - No decision needed: use Table\n- **Rendering:**\n - Wide: items as columns; compact: one card per item with the same attribute order\n - Best values per attribute are marked when 'better' is set\n - Exactly one item may be recommended; its badge carries recommendedReason\n - Attributes with the same group sit under one heading\n - Boolean values render as a check or a dash with text alternatives ('Included' / 'Not included')\n - On compact surfaces the recommended item comes first\n- **Accessibility** (role: table (items as columns on wide screens) or list of cards):\n - Attribute names are headers\n - 'better' is conveyed in text, not only color\n- **Agents:** Reads attributes per item; choose actions are named with the item title.\n\n### Confirm\n\nAsks the user to confirm a consequential or destructive action, showing what will happen.\n\n- **Use when:**\n - Moving money, deleting data, sending on someone's behalf, anything irreversible\n- **Don't use when:**\n - Routine reversible actions (prefer undo)\n - Information only: use Status\n- **Rendering:**\n - destructive uses color.action.danger.*\n - Capabilities with high risk level must use Confirm (enforced by the verifier)\n - the consequence sits directly above the confirm button\n - amount and subject lead the dialog when set\n - consequences render as an icon list, two columns on wide surfaces\n- **Accessibility** (role: alertdialog):\n - Focus starts on the least destructive option\n - Confirm label repeats the action verb\n - Escape cancels\n- **Agents:** Reads title and consequence; confirm and cancel are named buttons.\n\n### DateInput\n\nA date, time, date-time or date range.\n\n- **Use when:**\n - Any date or time entry\n- **Don't use when:**\n - Relative choices like 'This month / Last month': use Choice\n- **Rendering:**\n - Memorable dates (birthdays) use separate day/month/year fields; near dates use a calendar\n - 'month' and 'year' take only that part; the year field is typed, four digits\n - multiple: each chosen date becomes a chip with a remove control; the field adds another\n- **Accessibility** (role: group of spinbuttons or a date picker dialog):\n - Typing the date is always possible, not only picking from a calendar\n- **Agents:** Fill by label with an ISO date.\n\n### DetailList\n\nLabel/value pairs describing one thing (a summary, a receipt, a review step).\n\n- **Use when:**\n - Reviewing before submitting\n - Showing the attributes of one entity\n - Receipts\n - Fees, prices and totals before someone commits (variant 'receipt')\n- **Don't use when:**\n - Many entities with the same attributes: use Table\n - Comparing entities: use Comparison\n- **Rendering:**\n - Keeps the item order stable across generations (keys are remembered)\n - receipt: values right-aligned in tabular figures, the total row emphasised; people read amounts from the right\n - 'grid' lays fields out in columns by width, label above value\n - rowAction: each row ends with a 'Change' link whose accessible name includes the row's label; the total row has none\n- **Accessibility** (role: list of term/definition pairs (dl)):\n - Label and value are programmatically associated\n- **Agents:** Read each label with its value.\n\n### Disclosure\n\nProgressive disclosure: secondary content hidden behind a toggle.\n\n- **Use when:**\n - Details most people don't need (fees breakdown, advanced options, help text)\n- **Don't use when:**\n - Content everyone needs to complete the task\n - Primary navigation\n- **Rendering:**\n - Never hide required inputs or the primary action inside a closed Disclosure\n- **Accessibility** (role: button (aria-expanded) + region):\n - Summary is a button with expanded state\n - Hidden content is not in the tab order while closed\n- **Agents:** Expand by the summary text; state is exposed as expanded/collapsed.\n\n### FileInput\n\nChoose or drop files to attach or upload.\n\n- **Use when:**\n - Attaching a document, a receipt, a photo\n - Importing a file the product reads\n- **Don't use when:**\n - Taking a photo with the camera: the host's own flow\n - Pasting text: use TextInput\n- **Rendering:**\n - A dashed drop zone on color.surface.subtle with radius.control, the chooser control inside it\n - Each chosen file shows name, size and a remove control; a progress bar while the host uploads\n - Refusals use color.status.danger text under the zone\n- **Accessibility** (role: a native file input, labelled; the drop zone is a large target for the same input):\n - Keyboard opens the chooser; drag-and-drop is an addition, never the only way\n - Chosen files are listed as text with a 'Remove <name>' button each\n - Type and size limits are said before choosing and in any refusal\n- **Agents:** Reads the label and limits; attaches files through the host.\n\n### FilterPanel\n\nFilters for a list of results, with the result count.\n\n- **Use when:**\n - Browsing results people narrow by several attributes\n - More than two filters, or filters that take space (ranges, long lists)\n- **Don't use when:**\n - One or two quick filters: put a Choice (chips) above the results\n - Filling in information: use Form\n- **Rendering:**\n - Wide: filters in a sidebar beside the results\n - Compact: a 'Filters · n' button opens a bottom sheet whose action says 'Show n results'\n - Active filters show as removable chips above the results\n - Filters apply as they change (no separate Apply on wide)\n- **Accessibility** (role: region (filters) plus the results):\n - The result count is announced politely when it changes\n - Each active filter can be removed with a named button ('Remove filter: Desk')\n- **Agents:** Set filter inputs by label; read the result count; remove filters by their Remove buttons.\n\n### Form\n\nCollects inputs and submits them together.\n\n- **Use when:**\n - Any set of inputs that are submitted together\n- **Don't use when:**\n - Settings that apply immediately: use Toggles with actions\n - Several distinct stages: use Steps\n- **Rendering:**\n - One column; labels above fields\n - Submit is the primary action; cancel is secondary\n - Submit context is built from the form's input bindings\n - 'horizontal' becomes stacked on compact surfaces\n - 'aside' sits beside the form on wide surfaces; on compact ones it comes first, before the fields, so people read what they are agreeing to\n- **Accessibility** (role: form):\n - Submit is a real submit button\n - On submit errors, focus moves to an error summary that links to each field\n- **Agents:** Fill fields by label, then activate the submit button by its label.\n\n### Group\n\nVisually groups closely related items without a heading (proximity).\n\n- **Use when:**\n - A few items that belong together (a key figure and its caption, several metrics)\n- **Don't use when:**\n - The group needs a heading: use Section\n - Choosing between items: use Choice or Comparison\n- **Rendering:**\n - 'inline' collapses to a stack below the compact breakpoint\n - Gap uses space.stack.default or space.inline.default\n- **Accessibility** (role: group):\n - Has an accessible name when it contains interactive items\n- **Agents:** Treated as one unit when its label is present.\n\n### Identity\n\nA person, team or organisation: picture, name and details, or several of them together.\n\n- **Use when:**\n - Who something belongs to, was sent by or is assigned to\n - The recipient on a payment, the owner on a record, the members on a team\n - A list of people where the face helps recognition\n- **Don't use when:**\n - Choosing a person from a list: use Choice with avatarPath\n - A person's full record: use Card or DetailList\n- **Rendering:**\n - Initials come from the name's first letters, on a neutral surface with color.text.default; a pack may derive a stable colour from the name\n - Sizes: small 24px, default 40px, large 64px; the name uses type.body.default or type.heading.small for large\n - A group overlaps pictures by a quarter, with a '+N' tag for the rest\n - Images are never stretched; missing images fall back to initials, never to a broken image\n- **Accessibility** (role: group named by the name; the picture is decorative and the name is text):\n - The name is real text, never only an image or initials\n - A group's accessible name lists the first names and how many more\n - With an action, the whole element is one button or link named by the name\n- **Agents:** Reads the name and detail; a group exposes every member's name.\n\n### Media\n\nAn image, video, audio clip, gallery or QR code supplied by the host.\n\n- **Use when:**\n - Photos or illustrations that help identify something (a product, a place, a person)\n - A recording people play, or a code they scan\n- **Don't use when:**\n - Decoration with no information\n - Icons for actions (renderer supplies those)\n- **Rendering:**\n - Images never convey information that is not also in text\n - 'video' shows 'poster' until played; 'audio' is a compact player; both put 'transcript' under a disclosure\n - 'gallery' is a grid of the items' images, each with its own alt text\n - 'qr' is drawn on a canvas at a size that scans from a phone, with the alt as its accessible name\n- **Accessibility** (role: img (video / audio players, list for a gallery)):\n - Has alt text unless decorative (then hidden from assistive technology)\n - Video and audio have native controls and offer a transcript\n - A QR code's alt says what scanning it does\n- **Agents:** Reads the alt text; a gallery's images by their own alt text; a QR code's value.\n\n### Metric\n\nA key figure with a label, and optionally its change.\n\n- **Use when:**\n - One to four headline numbers the user asked about\n- **Don't use when:**\n - Many numbers: use Table or DetailList\n - Trends over time: use Chart\n- **Rendering:**\n - Value uses type.numeric.display\n - Change uses color.data.positive / negative according to 'favorable'\n- **Accessibility** (role: group (label + value)):\n - Change direction is conveyed in text as well as color\n - Screen readers read label, value and change as one sentence\n- **Agents:** Read label and value.\n\n### Navigation\n\nThe product's main navigation.\n\n- **Use when:**\n - Software with sections people move between (B2B apps, dashboards)\n - Only when the host doesn't already provide navigation\n- **Don't use when:**\n - Steps of one task: use Steps\n - Sections of one record: use Views\n - A surface embedded in a host that has its own navigation\n- **Rendering:**\n - Wide: a side navigation with grouped items\n - Compact: a menu button that opens the navigation\n - Badges sit at the end of their item\n - 'breadcrumb' is an ordered trail ending with the current item (aria-current=\"page\"), never behind a menu button\n - 'nested' shows each group as an expandable section; the group holding the current item starts open\n - 'toc' lists the page's sections as anchors, the section in view highlighted\n - 'local' lays the items out as tabs, the current one marked\n - 'placement' fixes the layout a Frame gives the main navigation: side (240px column), rail (80px, icons with labels), bar (bottom, up to 5 items), drawer (behind the AppBar's menu button)\n- **Accessibility** (role: navigation):\n - The current item carries aria-current=\"page\"\n - Badges say what they count ('12 overdue')\n- **Agents:** Move between sections by activating items by their labels.\n\n### Panel\n\nContent over the current view: a dialog, a drawer, a bottom sheet or a popover, opened from an action and dismissed to return.\n\n- **Use when:**\n - A short task on top of the page: edit one thing, pick one thing, see one record\n - Detail the person asked for that shouldn't replace where they are\n - A small set of options next to the control that opened them (popover)\n- **Don't use when:**\n - Confirming a consequential action: use Confirm, which is a dialog with the right words and order\n - A whole flow of several steps: use Steps on its own surface\n - Passing feedback: use Status\n- **Rendering:**\n - A backdrop of color.surface.inverse at opacity.overlay for modal kinds\n - dialog: max 560px on desktop, full width with space.inset.default on phones; drawer: 420px from the end edge; sheet: from the bottom with radius.large on the top corners; popover: color.surface.overlay with elevation.overlay and an arrow\n - The title is type.heading.medium with the close control at the end of the header\n - The action bar sits in a footer; on phones it is fixed to the bottom, full width\n - Motion uses motion.duration.default and motion.easing.standard; reduced motion fades instead\n- **Accessibility** (role: dialog (aria-modal for dialog, drawer and sheet) named by the title; popover is a non-modal dialog):\n - Focus moves into the panel on open and back to the opener on close\n - Tab stays inside a modal panel; Escape dismisses a dismissible one\n - The page behind a modal panel is inert\n - A sheet can be dismissed by dragging down as well as by the close control\n- **Agents:** Opens, reads the content and closes it by name; the footer actions are exposed like any ActionBar.\n\n### Progress\n\nHow far along something is, or how much of a bounded amount is used: a bar, a ring or a meter.\n\n- **Use when:**\n - A task that takes time, with a known share done\n - How much of a quota, budget or capacity is used\n - Progress towards a goal (pages read, steps walked)\n- **Don't use when:**\n - A number the person came to see: use Metric\n - Steps of a task the person moves through: use Steps\n - A short wait with nothing to measure: Status 'loading'\n- **Rendering:**\n - The track uses color.surface.subtle; the fill uses color.action.primary.background, or color.status.<tone>.emphasis for a toned meter\n - Height is size.control.small / 3 for a bar; a ring is size.control.default across\n - Readout in tabular figures, type.body.small, after the label\n - The bar's length means the fraction: never used for an amount with no bound\n- **Accessibility** (role: progressbar (bar, ring) or meter, named by the label, with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext):\n - The readout is real text next to the graphic, never only the fill\n - A meter's tone is also said in text ('nearly full'), not only shown by colour\n - Indeterminate progress has no value attributes and is announced as busy\n- **Agents:** Reads label, value and max as text.\n\n### RangeInput\n\nA number, or a range between two numbers, within known bounds.\n\n- **Use when:**\n - Approximate values within a range (budget cap, volume)\n - A price or date range for filtering (mode 'range')\n- **Don't use when:**\n - Exact values: use TextInput with kind 'number' or 'currency'\n- **Rendering:**\n - Shows min, max and the current formatted value\n - mode 'range' shows two thumbs and min/max fields that stay in sync\n- **Accessibility** (role: slider):\n - Current value is shown as text\n - Keyboard arrows change the value by step\n- **Agents:** Set the value directly by label.\n\n### Rating\n\nA score out of N: given by the person, or shown as others gave it.\n\n- **Use when:**\n - Asking how something went, out of five\n - Showing a product's or place's rating with the count behind it\n- **Don't use when:**\n - A number within bounds that isn't a score: use RangeInput\n - Yes or no: use Toggle or Choice\n- **Rendering:**\n - Filled shapes use color.status.warning.emphasis; empty ones use color.border.default\n - The readout ('4.6') is shown after the shapes in tabular figures, with the count in color.text.muted\n - A rating that can be given shows the label above, like every input\n- **Accessibility** (role: radiogroup of radios named '1 star' to 'N stars' when it can be given; an image named '4.6 out of 5' when read-only):\n - Every star is a real control at size.target.min when the person can rate\n - The current value is announced; half values are said as such\n - Read-only ratings carry the score as text, not only as filled shapes\n- **Agents:** Reads the score and the count; sets a score by choosing '<n> stars'.\n\n### Section\n\nA titled region of the surface that groups related content under a heading.\n\n- **Use when:**\n - The surface has two or more distinct topics (e.g. 'Recipient' and 'Amount')\n - Content would otherwise exceed one screen and needs signposting\n- **Don't use when:**\n - Only one topic: put content directly under the root\n - Visual grouping without a heading: use Group\n- **Rendering:**\n - Heading level follows nesting depth, never chosen by the model\n - Spacing between sections uses space.stack.section\n- **Accessibility** (role: region (with heading)):\n - Title is rendered as a real heading; nesting depth sets the heading level\n - Title is the region's accessible name\n- **Agents:** Navigate by heading; the title names the region.\n\n### Split\n\nMaster and detail side by side: a list that stays while the chosen item's detail shows beside it; on compact layouts the detail replaces the list.\n\n- **Use when:**\n - Mail, tickets, messages, files: a list people move through while reading\n - Settings with many sections on wide screens\n- **Don't use when:**\n - Under about 640px of surface width: it becomes a list then a page, so don't use it for a single record\n - Two unrelated things side by side: use Columns\n- **Rendering:**\n - Wide: two panes with a border between; the list scrolls independently\n - Compact: the list, then the detail as a page with a back control when an item is selected\n - Selection state in the list uses color.selection.*\n - Resizable splits keep the handle at size.target.min wide with a visible focus ring\n- **Accessibility** (role: none; the primary and detail keep their own roles):\n - Selection in the list moves focus to the detail on compact layouts and announces the item's name\n - A Back control returns to the list on compact layouts\n - The list keeps its scroll position and selection while the detail changes\n- **Agents:** Selects an item in the primary by name and reads the detail; on compact layouts it goes back to choose another.\n\n### Status\n\nFeedback about state: info, success, warning, error, empty or loading.\n\n- **Use when:**\n - Results of an action\n - Empty collections\n - Errors with a way to recover\n - Loading states\n - 'undo': after a reversible action ran, say what happened and offer Undo instead of asking first\n- **Don't use when:**\n - Validation errors on a field: inputs show their own errors\n - Confirmation before acting: use Confirm\n- **Rendering:**\n - error and warning use color.status.* tokens and an icon\n - empty states explain why and what to do next\n - loading shows a skeleton when layout is known, otherwise a progress indicator\n - 'undo' renders as a snackbar at the bottom of the surface, announced politely, with the Undo action\n - Empty states may carry an ActionBar: one primary and one secondary action\n - 'inline' renders a bordered notice with its action on the right\n- **Accessibility** (role: status or alert (live region)):\n - success/info/loading are polite live regions; error is assertive\n - Meaning is in text, not only color or icon\n- **Agents:** Reads the title and message; the recovery action is exposed.\n\n### Steps\n\nA task split into ordered steps with visible progress.\n\n- **Use when:**\n - Tasks with dependent stages or too many inputs for one view (checkout, onboarding)\n- **Don't use when:**\n - Independent views: use Views\n - Under ~6 inputs: a single Form\n- **Rendering:**\n - Renderer provides Back (ui.back) and Next (ui.next); the last step shows 'finish'\n - Each step validates before moving on\n - 'tasklist' is a list of tasks with a status tag each (GOV.UK task list); a task opens its content in place, and 'finish' follows the list, saying how many are done\n - 'guide' shows every step's title and content in a numbered list, with 'finish' after the last\n- **Accessibility** (role: group with step progress (aria-current on the current step)):\n - Current step and total are announced\n - Back never loses entered data\n- **Agents:** Reads 'step N of M'; next/back are exposed as buttons.\n\n### Table\n\nTabular data: many items sharing the same attributes.\n\n- **Use when:**\n - Scanning or comparing many rows by several attributes\n - Records people scan, sort, select and act on in bulk (B2B lists)\n- **Don't use when:**\n - One entity: use DetailList\n - A few entities where the user must choose: use Comparison\n- **Rendering:**\n - On compact screens, rows become stacked cards with label/value pairs\n - Alignment follows the column format, never chosen by the model\n - Numbers and currency are right-aligned with tabular figures; 'status' renders as a tag using 'tones'\n - On compact surfaces the table becomes a list of rows: the entity, the key fields in one line, and the status\n - Selection replaces the toolbar with the bulk-action bar while rows are selected\n - Paging shows rows per page, the range and the total\n - expandable: each row starts with a toggle (aria-expanded) named after the row; the open row's 'detail' spans the table beneath it\n- **Accessibility** (role: table with caption and column headers):\n - Has a caption\n - Column headers are real header cells\n - Numeric columns are right-aligned by format\n - Sortable headers carry aria-sort and say what sorting does\n - The select-all checkbox is mixed when some rows are selected\n - The bulk-action bar names how many rows are selected, announced politely\n - Each row's action menu is named after its row\n- **Agents:** Read by row and column headers; rows with rowAction are activatable. Sort by activating a column header; select rows by their checkboxes; act in bulk from the bar that appears.\n\n### Tag\n\nA short label, status or count attached to something else.\n\n- **Use when:**\n - The state of a record, next to its name: 'Past due', 'Draft', 'Live'\n - A category or label a thing carries\n - How many of something, on a navigation item or a section heading\n - Chosen items a person can take off again\n- **Don't use when:**\n - A whole sentence of feedback: use Status\n - Something the person switches on or off: use Toggle\n - A metric the person came for: use Metric\n- **Rendering:**\n - status uses color.status.<tone>.background and .foreground; label and count use neutral tokens\n - count is set in tabular figures\n - A tag never wraps: long labels are truncated with the full text on hover and in the accessible name\n - Fits inline with text and in a Card header; radius.small unless the pack sets a pill\n- **Accessibility** (role: text; for 'count', the label is the accessible name of the number; for a removable tag, a button named 'Remove <label>'):\n - Tone is conveyed by the label, never only by colour\n - A count reads as '<label>: <count>' to a screen reader\n - The remove control is at least size.target.min and named for what it removes\n- **Agents:** Reads label, tone and count; can activate the remove control by its name.\n\n### Text\n\nA run of text.\n\n- **Use when:**\n - Explanations, instructions, messages\n- **Don't use when:**\n - Headings: use Section title\n - Label/value pairs: use DetailList\n - Key figures: use Metric\n- **Rendering:**\n - 'supporting' uses color.text.muted\n - No inline styling; emphasis comes from structure\n - 'rich' renders only the four markup forms, as real elements; anything else, including HTML, is shown as typed, and only http, https, mailto and tel links are live\n - 'list' renders a ul or ol; entries are shown as text, or by 'itemPath' when they are objects\n - 'quote' is a blockquote, the cite on its own line after it\n - format 'color' shows a swatch of the value beside it; 'bytes' shows a size like 1.2 MB\n- **Accessibility** (role: text):\n - Body text is at least 16px (type.body.default)\n - Line length is capped by measure.max\n- **Agents:** Read as text.\n\n### TextInput\n\nA single text-like value: text, number, email, phone, currency, search or long text.\n\n- **Use when:**\n - Free-form values the user types\n- **Don't use when:**\n - A value from a known set: use Choice\n - Dates: use DateInput\n - Secrets (passwords, card numbers): not generated; hosts provide their own secure flows\n- **Rendering:**\n - Width suggests expected length\n - Errors appear after the user leaves the field or submits, not while typing\n - kind 'search' renders as a pill search field with an icon; the label stays as its accessible name\n - size 'hero' renders a large centred amount with the currency symbol dimmed\n - 'suggestions' and 'mentions' are comboboxes: the list opens as you type, arrow keys move through it, Enter takes an option, Escape closes it\n - 'richtext' is an editable area with Bold, Italic and List controls; the value is text with **bold**, *italic* and '- ' items\n - 'tags' shows each value as a chip with a remove control; Enter or a comma adds what was typed, Backspace in an empty field removes the last chip; the value is a list of strings\n - 'code' uses type.numeric (monospace) and turns off autocorrect, autocapitalize and spellcheck\n - 'masked' fills the mask's literal characters as you type and stores the text as shown\n - 'inline' renders the value as text with an Edit control; Enter saves, Escape restores the previous value\n- **Accessibility** (role: textbox / searchbox / spinbutton):\n - Visible label, never placeholder-only\n - Help and errors are associated with the field\n - Kind sets the right keyboard and autocomplete\n- **Agents:** Fill by label.\n\n### Toggle\n\nAn on/off setting.\n\n- **Use when:**\n - Settings that take effect immediately\n - A single yes/no inside a form\n- **Don't use when:**\n - Choosing between named options: use Choice\n- **Rendering:**\n - With 'action' it renders as a switch; inside a Form without action, as a checkbox\n- **Accessibility** (role: switch (immediate) / checkbox (in a form)):\n - Label says what 'on' means\n- **Agents:** Toggle by label; state is exposed as on/off.\n\n### Tree\n\nA hierarchy people expand, browse and pick from: folders, an org chart, nested categories.\n\n- **Use when:**\n - Things that contain things: folders and files, an organisation, nested categories\n - Picking a place in a hierarchy (move to folder, choose a category)\n- **Don't use when:**\n - A flat list, however long: use Collection or Table\n - Nested navigation of the product itself: use Navigation\n - Progressive disclosure of one section: use Disclosure\n- **Rendering:**\n - Indent per level uses space.inline.default; the expander is a chevron at size.target.min\n - Leaves have no expander and align with siblings' labels\n - Selection uses color.selection.background; the focused node shows color.border.focus\n - Beyond 200 nodes the renderer virtualises rows\n- **Accessibility** (role: tree with treeitem nodes; aria-expanded on nodes with children, aria-selected when selectable):\n - Arrow keys move and expand; Home and End jump; typing jumps to a label\n - Level and position are exposed (aria-level, aria-setsize, aria-posinset)\n - Expanded state is announced; selection is announced\n- **Agents:** Reads every node by label and level; expands a node by name and selects or activates one by name.\n\n### Views\n\nSwitch between alternative views of the same subject (tabs).\n\n- **Use when:**\n - 2–6 peer views of the same data (Overview / Transactions / Settings)\n- **Don't use when:**\n - Sequential steps: use Steps\n - Filtering one list: use Choice\n- **Rendering:**\n - More than 4 views on compact screens become a menu or scrollable tabs\n - Counts sit beside their labels and are part of the tab's accessible name\n- **Accessibility** (role: tablist / tab / tabpanel):\n - Each tab has a visible label\n - Arrow keys move between tabs\n- **Agents:** Select a view by its label.\n",
|
|
9
9
|
"components": {
|
|
10
10
|
"Action": {
|
|
11
11
|
"type": "object",
|
|
@@ -164,6 +164,77 @@
|
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
},
|
|
167
|
+
"AppBar": {
|
|
168
|
+
"type": "object",
|
|
169
|
+
"description": "The bar at the top of the product: brand or title, a leading action, search, trailing actions and the account.",
|
|
170
|
+
"properties": {
|
|
171
|
+
"component": {
|
|
172
|
+
"const": "AppBar"
|
|
173
|
+
},
|
|
174
|
+
"visible": {
|
|
175
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
176
|
+
"description": "Hide the component when false"
|
|
177
|
+
},
|
|
178
|
+
"title": {
|
|
179
|
+
"$ref": "common_types.json#/$defs/DynamicString",
|
|
180
|
+
"description": "The product's name, or the current screen's title on compact layouts"
|
|
181
|
+
},
|
|
182
|
+
"brand": {
|
|
183
|
+
"$ref": "common_types.json#/$defs/DynamicString",
|
|
184
|
+
"description": "A media reference for the logo, or initials; rendered before the title"
|
|
185
|
+
},
|
|
186
|
+
"leading": {
|
|
187
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
188
|
+
"description": "An Action at the start: back, or the menu button the renderer adds itself when the navigation is a drawer"
|
|
189
|
+
},
|
|
190
|
+
"search": {
|
|
191
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
192
|
+
"description": "A TextInput of kind 'search' (or a command palette opener: an Action with a shortcut)"
|
|
193
|
+
},
|
|
194
|
+
"actions": {
|
|
195
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
196
|
+
"description": "An ActionBar at the end: notifications, help, the primary action of the product"
|
|
197
|
+
},
|
|
198
|
+
"account": {
|
|
199
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
200
|
+
"description": "An Identity (the signed-in person) or an ActionMenu opened from it"
|
|
201
|
+
},
|
|
202
|
+
"variant": {
|
|
203
|
+
"enum": [
|
|
204
|
+
"standard",
|
|
205
|
+
"large",
|
|
206
|
+
"compact"
|
|
207
|
+
],
|
|
208
|
+
"default": "standard",
|
|
209
|
+
"description": "'large' puts the title under the bar on its own line on wide screens; 'compact' is 48px for dense tools"
|
|
210
|
+
},
|
|
211
|
+
"sticky": {
|
|
212
|
+
"type": "boolean",
|
|
213
|
+
"default": true
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
"required": [
|
|
217
|
+
"component",
|
|
218
|
+
"title"
|
|
219
|
+
],
|
|
220
|
+
"allowedChildren": [
|
|
221
|
+
"Action",
|
|
222
|
+
"ActionBar",
|
|
223
|
+
"ActionMenu",
|
|
224
|
+
"Identity",
|
|
225
|
+
"TextInput"
|
|
226
|
+
],
|
|
227
|
+
"metadata": {
|
|
228
|
+
"extensions": {
|
|
229
|
+
"com_polyxd": {
|
|
230
|
+
"category": "shell",
|
|
231
|
+
"target": "custom",
|
|
232
|
+
"basicAnalog": "Row(Text, TextField, Button, Image)",
|
|
233
|
+
"why": "Row loses the banner role, the title-not-heading rule, the search landmark and the menu button the frame adds on compact layouts."
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
},
|
|
167
238
|
"Card": {
|
|
168
239
|
"type": "object",
|
|
169
240
|
"description": "One self-contained entity (an account, an order, a place), optionally actionable as a whole.",
|
|
@@ -1031,6 +1102,94 @@
|
|
|
1031
1102
|
}
|
|
1032
1103
|
}
|
|
1033
1104
|
},
|
|
1105
|
+
"Columns": {
|
|
1106
|
+
"type": "object",
|
|
1107
|
+
"description": "Side-by-side columns that collapse to a stack on compact layouts: a main column with a narrower one beside it, or equal halves.",
|
|
1108
|
+
"properties": {
|
|
1109
|
+
"component": {
|
|
1110
|
+
"const": "Columns"
|
|
1111
|
+
},
|
|
1112
|
+
"visible": {
|
|
1113
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
1114
|
+
"description": "Hide the component when false"
|
|
1115
|
+
},
|
|
1116
|
+
"children": {
|
|
1117
|
+
"$ref": "common_types.json#/$defs/ChildList",
|
|
1118
|
+
"type": "array",
|
|
1119
|
+
"minItems": 1,
|
|
1120
|
+
"description": "One component per column, in reading order"
|
|
1121
|
+
},
|
|
1122
|
+
"layout": {
|
|
1123
|
+
"enum": [
|
|
1124
|
+
"two-thirds",
|
|
1125
|
+
"one-third",
|
|
1126
|
+
"halves",
|
|
1127
|
+
"thirds",
|
|
1128
|
+
"sidebar-start",
|
|
1129
|
+
"sidebar-end"
|
|
1130
|
+
],
|
|
1131
|
+
"default": "two-thirds",
|
|
1132
|
+
"description": "'two-thirds' is a wide first column (GOV.UK's default); 'one-third' the reverse; 'halves' and 'thirds' equal; 'sidebar-*' a fixed 18rem column at that edge"
|
|
1133
|
+
},
|
|
1134
|
+
"collapse": {
|
|
1135
|
+
"enum": [
|
|
1136
|
+
"compact",
|
|
1137
|
+
"medium",
|
|
1138
|
+
"never"
|
|
1139
|
+
],
|
|
1140
|
+
"default": "compact",
|
|
1141
|
+
"description": "The width below which the columns stack"
|
|
1142
|
+
},
|
|
1143
|
+
"align": {
|
|
1144
|
+
"enum": [
|
|
1145
|
+
"start",
|
|
1146
|
+
"center",
|
|
1147
|
+
"stretch"
|
|
1148
|
+
],
|
|
1149
|
+
"default": "stretch"
|
|
1150
|
+
}
|
|
1151
|
+
},
|
|
1152
|
+
"required": [
|
|
1153
|
+
"component",
|
|
1154
|
+
"children"
|
|
1155
|
+
],
|
|
1156
|
+
"allowedChildren": [
|
|
1157
|
+
"Card",
|
|
1158
|
+
"Chart",
|
|
1159
|
+
"Code",
|
|
1160
|
+
"Collection",
|
|
1161
|
+
"Comparison",
|
|
1162
|
+
"Custom",
|
|
1163
|
+
"DetailList",
|
|
1164
|
+
"Disclosure",
|
|
1165
|
+
"FilterPanel",
|
|
1166
|
+
"Form",
|
|
1167
|
+
"Group",
|
|
1168
|
+
"Identity",
|
|
1169
|
+
"Media",
|
|
1170
|
+
"Metric",
|
|
1171
|
+
"Navigation",
|
|
1172
|
+
"Progress",
|
|
1173
|
+
"Section",
|
|
1174
|
+
"Status",
|
|
1175
|
+
"Steps",
|
|
1176
|
+
"Table",
|
|
1177
|
+
"Tag",
|
|
1178
|
+
"Text",
|
|
1179
|
+
"Tree",
|
|
1180
|
+
"Views"
|
|
1181
|
+
],
|
|
1182
|
+
"metadata": {
|
|
1183
|
+
"extensions": {
|
|
1184
|
+
"com_polyxd": {
|
|
1185
|
+
"category": "structure",
|
|
1186
|
+
"target": "basic",
|
|
1187
|
+
"basicAnalog": "Row",
|
|
1188
|
+
"why": "Nothing: a Row of the children in order says what Columns says. The layout ratio and the collapse width are rendering hints a renderer may ignore."
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
}
|
|
1192
|
+
},
|
|
1034
1193
|
"Comparison": {
|
|
1035
1194
|
"type": "object",
|
|
1036
1195
|
"description": "Compare a few options across the same attributes, and choose one.",
|
|
@@ -1385,6 +1544,64 @@
|
|
|
1385
1544
|
}
|
|
1386
1545
|
}
|
|
1387
1546
|
},
|
|
1547
|
+
"Custom": {
|
|
1548
|
+
"type": "object",
|
|
1549
|
+
"description": "A slot for a component the host implements itself: a logo, a brand moment, a bespoke widget. The document names it and gives it props; the product renders it, and a fallback stands in when it can't.",
|
|
1550
|
+
"properties": {
|
|
1551
|
+
"component": {
|
|
1552
|
+
"const": "Custom"
|
|
1553
|
+
},
|
|
1554
|
+
"visible": {
|
|
1555
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
1556
|
+
"description": "Hide the component when false"
|
|
1557
|
+
},
|
|
1558
|
+
"name": {
|
|
1559
|
+
"type": "string",
|
|
1560
|
+
"pattern": "^[a-z][a-z0-9]*(\\.[a-z][a-z0-9]*)+$",
|
|
1561
|
+
"description": "The host's name for the component, namespaced: 'brand.logo', 'store.map'"
|
|
1562
|
+
},
|
|
1563
|
+
"props": {
|
|
1564
|
+
"type": "object",
|
|
1565
|
+
"description": "What the host component takes; values may be bindings",
|
|
1566
|
+
"additionalProperties": true
|
|
1567
|
+
},
|
|
1568
|
+
"fallback": {
|
|
1569
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
1570
|
+
"description": "What renders when the host has no component of that name: a Text, a Media, a Status. Required, so the document stands on its own"
|
|
1571
|
+
},
|
|
1572
|
+
"label": {
|
|
1573
|
+
"$ref": "common_types.json#/$defs/DynamicString",
|
|
1574
|
+
"description": "An accessible name for the slot when the host component is decorative or complex"
|
|
1575
|
+
}
|
|
1576
|
+
},
|
|
1577
|
+
"required": [
|
|
1578
|
+
"component",
|
|
1579
|
+
"name",
|
|
1580
|
+
"fallback"
|
|
1581
|
+
],
|
|
1582
|
+
"allowedChildren": [
|
|
1583
|
+
"Card",
|
|
1584
|
+
"Code",
|
|
1585
|
+
"Group",
|
|
1586
|
+
"Identity",
|
|
1587
|
+
"Media",
|
|
1588
|
+
"Metric",
|
|
1589
|
+
"Progress",
|
|
1590
|
+
"Status",
|
|
1591
|
+
"Tag",
|
|
1592
|
+
"Text"
|
|
1593
|
+
],
|
|
1594
|
+
"metadata": {
|
|
1595
|
+
"extensions": {
|
|
1596
|
+
"com_polyxd": {
|
|
1597
|
+
"category": "shell",
|
|
1598
|
+
"target": "custom",
|
|
1599
|
+
"basicAnalog": "the fallback component",
|
|
1600
|
+
"why": "Exporting only the fallback drops the host component's name and props; a host with that component would draw the fallback instead."
|
|
1601
|
+
}
|
|
1602
|
+
}
|
|
1603
|
+
}
|
|
1604
|
+
},
|
|
1388
1605
|
"DateInput": {
|
|
1389
1606
|
"type": "object",
|
|
1390
1607
|
"description": "A date, time, date-time or date range.",
|
|
@@ -1758,6 +1975,98 @@
|
|
|
1758
1975
|
}
|
|
1759
1976
|
}
|
|
1760
1977
|
},
|
|
1978
|
+
"Footer": {
|
|
1979
|
+
"type": "object",
|
|
1980
|
+
"description": "The bar at the bottom of the product: link groups, the legal line, locale or status.",
|
|
1981
|
+
"properties": {
|
|
1982
|
+
"component": {
|
|
1983
|
+
"const": "Footer"
|
|
1984
|
+
},
|
|
1985
|
+
"visible": {
|
|
1986
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
1987
|
+
"description": "Hide the component when false"
|
|
1988
|
+
},
|
|
1989
|
+
"groups": {
|
|
1990
|
+
"type": "array",
|
|
1991
|
+
"minItems": 1,
|
|
1992
|
+
"maxItems": 6,
|
|
1993
|
+
"items": {
|
|
1994
|
+
"type": "object",
|
|
1995
|
+
"required": [
|
|
1996
|
+
"key",
|
|
1997
|
+
"label",
|
|
1998
|
+
"items"
|
|
1999
|
+
],
|
|
2000
|
+
"properties": {
|
|
2001
|
+
"key": {
|
|
2002
|
+
"type": "string",
|
|
2003
|
+
"pattern": "^[a-z][a-z0-9_]*(\\.[a-z][a-z0-9_]*)*$",
|
|
2004
|
+
"description": "Stable semantic key (e.g. 'fee', 'recipient.name'). The same thing gets the same key across generations; interface memory uses it to keep placement, order and labels consistent."
|
|
2005
|
+
},
|
|
2006
|
+
"label": {
|
|
2007
|
+
"$ref": "common_types.json#/$defs/DynamicString"
|
|
2008
|
+
},
|
|
2009
|
+
"items": {
|
|
2010
|
+
"type": "array",
|
|
2011
|
+
"minItems": 1,
|
|
2012
|
+
"maxItems": 12,
|
|
2013
|
+
"items": {
|
|
2014
|
+
"type": "object",
|
|
2015
|
+
"required": [
|
|
2016
|
+
"key",
|
|
2017
|
+
"label",
|
|
2018
|
+
"action"
|
|
2019
|
+
],
|
|
2020
|
+
"properties": {
|
|
2021
|
+
"key": {
|
|
2022
|
+
"type": "string",
|
|
2023
|
+
"pattern": "^[a-z][a-z0-9_]*(\\.[a-z][a-z0-9_]*)*$",
|
|
2024
|
+
"description": "Stable semantic key (e.g. 'fee', 'recipient.name'). The same thing gets the same key across generations; interface memory uses it to keep placement, order and labels consistent."
|
|
2025
|
+
},
|
|
2026
|
+
"label": {
|
|
2027
|
+
"$ref": "common_types.json#/$defs/DynamicString"
|
|
2028
|
+
},
|
|
2029
|
+
"action": {
|
|
2030
|
+
"$ref": "common_types.json#/$defs/Action"
|
|
2031
|
+
}
|
|
2032
|
+
},
|
|
2033
|
+
"additionalProperties": false
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
},
|
|
2037
|
+
"additionalProperties": false
|
|
2038
|
+
},
|
|
2039
|
+
"description": "Columns of links, each under a heading"
|
|
2040
|
+
},
|
|
2041
|
+
"legal": {
|
|
2042
|
+
"$ref": "common_types.json#/$defs/DynamicString",
|
|
2043
|
+
"description": "The line at the very bottom: copyright, licence, company details"
|
|
2044
|
+
},
|
|
2045
|
+
"aside": {
|
|
2046
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2047
|
+
"description": "Something at the end of the legal row: a locale Choice, a status Tag, a Text"
|
|
2048
|
+
}
|
|
2049
|
+
},
|
|
2050
|
+
"required": [
|
|
2051
|
+
"component",
|
|
2052
|
+
"legal"
|
|
2053
|
+
],
|
|
2054
|
+
"allowedChildren": [
|
|
2055
|
+
"Choice",
|
|
2056
|
+
"Tag",
|
|
2057
|
+
"Text"
|
|
2058
|
+
],
|
|
2059
|
+
"metadata": {
|
|
2060
|
+
"extensions": {
|
|
2061
|
+
"com_polyxd": {
|
|
2062
|
+
"category": "shell",
|
|
2063
|
+
"target": "custom",
|
|
2064
|
+
"basicAnalog": "Column of Row(Text, Button)",
|
|
2065
|
+
"why": "Basic has no contentinfo landmark or link groups named by their headings; the legal line becomes plain text with no role."
|
|
2066
|
+
}
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
},
|
|
1761
2070
|
"Form": {
|
|
1762
2071
|
"type": "object",
|
|
1763
2072
|
"description": "Collects inputs and submits them together.",
|
|
@@ -1837,6 +2146,85 @@
|
|
|
1837
2146
|
}
|
|
1838
2147
|
}
|
|
1839
2148
|
},
|
|
2149
|
+
"Frame": {
|
|
2150
|
+
"type": "object",
|
|
2151
|
+
"description": "The product's frame: the regions around its screens (header, navigation, main, aside, footer, banner), with an outlet where screens and generated surfaces appear.",
|
|
2152
|
+
"properties": {
|
|
2153
|
+
"component": {
|
|
2154
|
+
"const": "Frame"
|
|
2155
|
+
},
|
|
2156
|
+
"visible": {
|
|
2157
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
2158
|
+
"description": "Hide the component when false"
|
|
2159
|
+
},
|
|
2160
|
+
"header": {
|
|
2161
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2162
|
+
"description": "An AppBar"
|
|
2163
|
+
},
|
|
2164
|
+
"navigation": {
|
|
2165
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2166
|
+
"description": "A Navigation of kind 'main'; its placement decides rail, bar, drawer or side"
|
|
2167
|
+
},
|
|
2168
|
+
"main": {
|
|
2169
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2170
|
+
"description": "The outlet: a component the host replaces with the current screen. Usually an Outlet; may be a Group holding a fixed screen"
|
|
2171
|
+
},
|
|
2172
|
+
"aside": {
|
|
2173
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2174
|
+
"description": "A secondary column beside main on wide layouts (help, context, activity)"
|
|
2175
|
+
},
|
|
2176
|
+
"footer": {
|
|
2177
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2178
|
+
"description": "A Footer"
|
|
2179
|
+
},
|
|
2180
|
+
"banner": {
|
|
2181
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2182
|
+
"description": "A Status shown above everything (a phase banner, an outage, a trial ending)"
|
|
2183
|
+
},
|
|
2184
|
+
"skipTarget": {
|
|
2185
|
+
"type": "boolean",
|
|
2186
|
+
"default": true,
|
|
2187
|
+
"description": "The renderer adds a skip link to main"
|
|
2188
|
+
},
|
|
2189
|
+
"width": {
|
|
2190
|
+
"enum": [
|
|
2191
|
+
"full",
|
|
2192
|
+
"contained"
|
|
2193
|
+
],
|
|
2194
|
+
"default": "contained",
|
|
2195
|
+
"description": "'contained' centres main at measure.max × 1.6; 'full' lets dense tools use the whole viewport"
|
|
2196
|
+
}
|
|
2197
|
+
},
|
|
2198
|
+
"required": [
|
|
2199
|
+
"component",
|
|
2200
|
+
"main"
|
|
2201
|
+
],
|
|
2202
|
+
"allowedChildren": [
|
|
2203
|
+
"AppBar",
|
|
2204
|
+
"Card",
|
|
2205
|
+
"Collection",
|
|
2206
|
+
"Custom",
|
|
2207
|
+
"DetailList",
|
|
2208
|
+
"Disclosure",
|
|
2209
|
+
"Footer",
|
|
2210
|
+
"Group",
|
|
2211
|
+
"Navigation",
|
|
2212
|
+
"Outlet",
|
|
2213
|
+
"Section",
|
|
2214
|
+
"Status",
|
|
2215
|
+
"Text"
|
|
2216
|
+
],
|
|
2217
|
+
"metadata": {
|
|
2218
|
+
"extensions": {
|
|
2219
|
+
"com_polyxd": {
|
|
2220
|
+
"category": "shell",
|
|
2221
|
+
"target": "custom",
|
|
2222
|
+
"basicAnalog": "Column(Row, Row(Column, Column, Column), Row)",
|
|
2223
|
+
"why": "Columns and Rows are layout. They lose the landmarks (banner, navigation, main, complementary, contentinfo), the skip link and which region is the outlet."
|
|
2224
|
+
}
|
|
2225
|
+
}
|
|
2226
|
+
}
|
|
2227
|
+
},
|
|
1840
2228
|
"Group": {
|
|
1841
2229
|
"type": "object",
|
|
1842
2230
|
"description": "Visually groups closely related items without a heading (proximity).",
|
|
@@ -2286,7 +2674,19 @@
|
|
|
2286
2674
|
"chart",
|
|
2287
2675
|
"people",
|
|
2288
2676
|
"card",
|
|
2289
|
-
"file"
|
|
2677
|
+
"file",
|
|
2678
|
+
"orders",
|
|
2679
|
+
"products",
|
|
2680
|
+
"customers",
|
|
2681
|
+
"discounts",
|
|
2682
|
+
"analytics",
|
|
2683
|
+
"calendar",
|
|
2684
|
+
"bell",
|
|
2685
|
+
"help",
|
|
2686
|
+
"folder",
|
|
2687
|
+
"star",
|
|
2688
|
+
"grid",
|
|
2689
|
+
"layers"
|
|
2290
2690
|
]
|
|
2291
2691
|
},
|
|
2292
2692
|
"badge": {
|
|
@@ -2336,6 +2736,17 @@
|
|
|
2336
2736
|
],
|
|
2337
2737
|
"default": "main",
|
|
2338
2738
|
"description": "'main' is the product's sections; 'breadcrumb' the ordered trail to here; 'nested' groups that expand; 'toc' the sections of this page (items link to anchors named by their keys); 'local' the sections of one area, as tabs"
|
|
2739
|
+
},
|
|
2740
|
+
"placement": {
|
|
2741
|
+
"enum": [
|
|
2742
|
+
"auto",
|
|
2743
|
+
"side",
|
|
2744
|
+
"rail",
|
|
2745
|
+
"bar",
|
|
2746
|
+
"drawer"
|
|
2747
|
+
],
|
|
2748
|
+
"default": "auto",
|
|
2749
|
+
"description": "For kind 'main' inside a Frame: where it lives. 'auto' is a side column on wide layouts, a rail on medium and a bottom bar (≤ 5 items) or a drawer on compact; the others fix it"
|
|
2339
2750
|
}
|
|
2340
2751
|
},
|
|
2341
2752
|
"required": [
|
|
@@ -2354,6 +2765,46 @@
|
|
|
2354
2765
|
}
|
|
2355
2766
|
}
|
|
2356
2767
|
},
|
|
2768
|
+
"Outlet": {
|
|
2769
|
+
"type": "object",
|
|
2770
|
+
"description": "Where the current screen renders inside a Frame: the host fills it with a screen document or a generated surface.",
|
|
2771
|
+
"properties": {
|
|
2772
|
+
"component": {
|
|
2773
|
+
"const": "Outlet"
|
|
2774
|
+
},
|
|
2775
|
+
"visible": {
|
|
2776
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
2777
|
+
"description": "Hide the component when false"
|
|
2778
|
+
},
|
|
2779
|
+
"label": {
|
|
2780
|
+
"$ref": "common_types.json#/$defs/DynamicString",
|
|
2781
|
+
"description": "Names the region for assistive tech when the screen has no title yet"
|
|
2782
|
+
},
|
|
2783
|
+
"loading": {
|
|
2784
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
2785
|
+
"description": "What shows while a screen is on its way; the renderer's skeleton when absent"
|
|
2786
|
+
}
|
|
2787
|
+
},
|
|
2788
|
+
"required": [
|
|
2789
|
+
"component"
|
|
2790
|
+
],
|
|
2791
|
+
"allowedChildren": [
|
|
2792
|
+
"Group",
|
|
2793
|
+
"Progress",
|
|
2794
|
+
"Status",
|
|
2795
|
+
"Text"
|
|
2796
|
+
],
|
|
2797
|
+
"metadata": {
|
|
2798
|
+
"extensions": {
|
|
2799
|
+
"com_polyxd": {
|
|
2800
|
+
"category": "shell",
|
|
2801
|
+
"target": "custom",
|
|
2802
|
+
"basicAnalog": "Column (empty)",
|
|
2803
|
+
"why": "An empty Column is a hole, not an outlet: it loses the main landmark, the label, the loading content and the rule that the host fills it with a screen."
|
|
2804
|
+
}
|
|
2805
|
+
}
|
|
2806
|
+
}
|
|
2807
|
+
},
|
|
2357
2808
|
"Panel": {
|
|
2358
2809
|
"type": "object",
|
|
2359
2810
|
"description": "Content over the current view: a dialog, a drawer, a bottom sheet or a popover, opened from an action and dismissed to return.",
|
|
@@ -2785,6 +3236,90 @@
|
|
|
2785
3236
|
}
|
|
2786
3237
|
}
|
|
2787
3238
|
},
|
|
3239
|
+
"Split": {
|
|
3240
|
+
"type": "object",
|
|
3241
|
+
"description": "Master and detail side by side: a list that stays while the chosen item's detail shows beside it; on compact layouts the detail replaces the list.",
|
|
3242
|
+
"properties": {
|
|
3243
|
+
"component": {
|
|
3244
|
+
"const": "Split"
|
|
3245
|
+
},
|
|
3246
|
+
"visible": {
|
|
3247
|
+
"$ref": "common_types.json#/$defs/DynamicBoolean",
|
|
3248
|
+
"description": "Hide the component when false"
|
|
3249
|
+
},
|
|
3250
|
+
"primary": {
|
|
3251
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
3252
|
+
"description": "The list: a Collection or a Table with selection 'single'"
|
|
3253
|
+
},
|
|
3254
|
+
"detail": {
|
|
3255
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
3256
|
+
"description": "What shows for the selected item; its bindings resolve against the selected item's scope"
|
|
3257
|
+
},
|
|
3258
|
+
"selected": {
|
|
3259
|
+
"type": "object",
|
|
3260
|
+
"required": [
|
|
3261
|
+
"path"
|
|
3262
|
+
],
|
|
3263
|
+
"properties": {
|
|
3264
|
+
"path": {
|
|
3265
|
+
"type": "string",
|
|
3266
|
+
"pattern": "^(/([^/~]|~[01])*)+$|^[A-Za-z0-9_]([^/~]|~[01])*(/([^/~]|~[01])*)*$",
|
|
3267
|
+
"description": "RFC 6901 JSON Pointer into host-provided data. Absolute ('/account/balance') or, inside a template, relative to the current item ('amount')."
|
|
3268
|
+
}
|
|
3269
|
+
},
|
|
3270
|
+
"additionalProperties": false,
|
|
3271
|
+
"description": "The selected item's value in host data, shared with the primary's 'selected'"
|
|
3272
|
+
},
|
|
3273
|
+
"empty": {
|
|
3274
|
+
"$ref": "common_types.json#/$defs/ComponentId",
|
|
3275
|
+
"description": "A Status shown in the detail pane while nothing is selected"
|
|
3276
|
+
},
|
|
3277
|
+
"ratio": {
|
|
3278
|
+
"enum": [
|
|
3279
|
+
"narrow",
|
|
3280
|
+
"balanced",
|
|
3281
|
+
"wide"
|
|
3282
|
+
],
|
|
3283
|
+
"default": "narrow",
|
|
3284
|
+
"description": "The list's share: about a third, half, or two thirds"
|
|
3285
|
+
},
|
|
3286
|
+
"resizable": {
|
|
3287
|
+
"type": "boolean",
|
|
3288
|
+
"default": false
|
|
3289
|
+
}
|
|
3290
|
+
},
|
|
3291
|
+
"required": [
|
|
3292
|
+
"component",
|
|
3293
|
+
"primary",
|
|
3294
|
+
"detail",
|
|
3295
|
+
"selected"
|
|
3296
|
+
],
|
|
3297
|
+
"allowedChildren": [
|
|
3298
|
+
"Card",
|
|
3299
|
+
"Code",
|
|
3300
|
+
"Collection",
|
|
3301
|
+
"DetailList",
|
|
3302
|
+
"Form",
|
|
3303
|
+
"Group",
|
|
3304
|
+
"Media",
|
|
3305
|
+
"Section",
|
|
3306
|
+
"Status",
|
|
3307
|
+
"Table",
|
|
3308
|
+
"Text",
|
|
3309
|
+
"Tree",
|
|
3310
|
+
"Views"
|
|
3311
|
+
],
|
|
3312
|
+
"metadata": {
|
|
3313
|
+
"extensions": {
|
|
3314
|
+
"com_polyxd": {
|
|
3315
|
+
"category": "structure",
|
|
3316
|
+
"target": "custom",
|
|
3317
|
+
"basicAnalog": "Row(List, Column)",
|
|
3318
|
+
"why": "Row loses the shared selection binding, the detail's item scope, the empty state and the list-then-page behaviour on compact layouts."
|
|
3319
|
+
}
|
|
3320
|
+
}
|
|
3321
|
+
}
|
|
3322
|
+
},
|
|
2788
3323
|
"Status": {
|
|
2789
3324
|
"type": "object",
|
|
2790
3325
|
"description": "Feedback about state: info, success, warning, error, empty or loading.",
|
|
@@ -4017,6 +4552,9 @@
|
|
|
4017
4552
|
{
|
|
4018
4553
|
"$ref": "#/components/ActionMenu"
|
|
4019
4554
|
},
|
|
4555
|
+
{
|
|
4556
|
+
"$ref": "#/components/AppBar"
|
|
4557
|
+
},
|
|
4020
4558
|
{
|
|
4021
4559
|
"$ref": "#/components/Card"
|
|
4022
4560
|
},
|
|
@@ -4038,12 +4576,18 @@
|
|
|
4038
4576
|
{
|
|
4039
4577
|
"$ref": "#/components/ColorInput"
|
|
4040
4578
|
},
|
|
4579
|
+
{
|
|
4580
|
+
"$ref": "#/components/Columns"
|
|
4581
|
+
},
|
|
4041
4582
|
{
|
|
4042
4583
|
"$ref": "#/components/Comparison"
|
|
4043
4584
|
},
|
|
4044
4585
|
{
|
|
4045
4586
|
"$ref": "#/components/Confirm"
|
|
4046
4587
|
},
|
|
4588
|
+
{
|
|
4589
|
+
"$ref": "#/components/Custom"
|
|
4590
|
+
},
|
|
4047
4591
|
{
|
|
4048
4592
|
"$ref": "#/components/DateInput"
|
|
4049
4593
|
},
|
|
@@ -4059,9 +4603,15 @@
|
|
|
4059
4603
|
{
|
|
4060
4604
|
"$ref": "#/components/FilterPanel"
|
|
4061
4605
|
},
|
|
4606
|
+
{
|
|
4607
|
+
"$ref": "#/components/Footer"
|
|
4608
|
+
},
|
|
4062
4609
|
{
|
|
4063
4610
|
"$ref": "#/components/Form"
|
|
4064
4611
|
},
|
|
4612
|
+
{
|
|
4613
|
+
"$ref": "#/components/Frame"
|
|
4614
|
+
},
|
|
4065
4615
|
{
|
|
4066
4616
|
"$ref": "#/components/Group"
|
|
4067
4617
|
},
|
|
@@ -4077,6 +4627,9 @@
|
|
|
4077
4627
|
{
|
|
4078
4628
|
"$ref": "#/components/Navigation"
|
|
4079
4629
|
},
|
|
4630
|
+
{
|
|
4631
|
+
"$ref": "#/components/Outlet"
|
|
4632
|
+
},
|
|
4080
4633
|
{
|
|
4081
4634
|
"$ref": "#/components/Panel"
|
|
4082
4635
|
},
|
|
@@ -4092,6 +4645,9 @@
|
|
|
4092
4645
|
{
|
|
4093
4646
|
"$ref": "#/components/Section"
|
|
4094
4647
|
},
|
|
4648
|
+
{
|
|
4649
|
+
"$ref": "#/components/Split"
|
|
4650
|
+
},
|
|
4095
4651
|
{
|
|
4096
4652
|
"$ref": "#/components/Status"
|
|
4097
4653
|
},
|
package/dist/catalog.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ interface ComponentSource {
|
|
|
19
19
|
agent: string;
|
|
20
20
|
rendering: string[];
|
|
21
21
|
a2ui: string;
|
|
22
|
+
/** A shell component: allowed only in an authored shell document, so never offered to a generator. */
|
|
23
|
+
shell?: boolean;
|
|
22
24
|
}
|
|
23
25
|
export declare function loadPolyxdSources(): {
|
|
24
26
|
common: Record<string, Json>;
|
package/dist/catalog.js
CHANGED
|
@@ -92,6 +92,9 @@ function convert(schema, common) {
|
|
|
92
92
|
}
|
|
93
93
|
const bullets = (items) => items.map((x) => ` - ${x}`).join("\n");
|
|
94
94
|
export function buildInstructions(components) {
|
|
95
|
+
// The shell components stay in the catalog (an authored shell exports faithfully) and out of the
|
|
96
|
+
// instructions: a generator writes surfaces, never the frame around them.
|
|
97
|
+
const shell = components.filter((c) => c.shell);
|
|
95
98
|
const head = `# Polyxd catalog for A2UI
|
|
96
99
|
|
|
97
100
|
Semantic components for just-in-time interfaces. The renderer maps each one onto its own native, design-system components and tokens. Pick components by meaning, not by look. Never send colours, sizes or fonts.
|
|
@@ -105,10 +108,11 @@ Semantic components for just-in-time interfaces. The renderer maps each one onto
|
|
|
105
108
|
5. At most one primary action is visible at a time. A Form's submit and a Steps finish count as primary.
|
|
106
109
|
6. Destructive or consequential actions go through \`Confirm\`.
|
|
107
110
|
7. Components carry their own roles and names. Use \`accessibility\` only to add to them.
|
|
111
|
+
8. Never use ${shell.map((c) => c.name).join(", ").replace(/, ([^,]*)$/, " or $1")}: the product's shell is authored, and a surface renders inside it.
|
|
108
112
|
|
|
109
113
|
## Components
|
|
110
114
|
`;
|
|
111
|
-
const body = components.map((c) => [
|
|
115
|
+
const body = components.filter((c) => !c.shell).map((c) => [
|
|
112
116
|
`### ${c.name}`,
|
|
113
117
|
"",
|
|
114
118
|
c.summary,
|
package/dist/catalog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../src/catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAa,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,GAAG,2BAA2B,CAAC;AAE3C,gEAAgE;AAChE,MAAM,MAAM,GAA2B;IACrC,EAAE,EAAE,aAAa;IACjB,aAAa,EAAE,eAAe;IAC9B,aAAa,EAAE,eAAe;IAC9B,cAAc,EAAE,gBAAgB;IAChC,YAAY,EAAE,cAAc;IAC5B,aAAa,EAAE,yBAAyB;IACxC,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF;;;;GAIG;AACH,SAAS,eAAe,CAAC,CAAkB;IACzC,MAAM,KAAK,GAAG,CAAC,CAAU,EAAE,EAAE;QAC3B,MAAM,GAAG,GAAI,CAAU,EAAE,IAAI,CAAC;QAC9B,OAAO,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IACnD,CAAC,CAAC;IACF,gGAAgG;IAChG,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IAC1F,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;SAClC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;SAChF,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IACnB,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IACpC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU,CAAC;IAChC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,KAAK,MAAM,CAAC,IAAI,OAAO;YAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IACD,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED,uFAAuF;AACvF,MAAM,CAAC,MAAM,kBAAkB,GAAwD;IACrF,YAAY,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,kEAAkE,EAAE;IAChH,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,6DAA6D,EAAE;IACrG,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;CACxF,CAAC;
|
|
1
|
+
{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../src/catalog.ts"],"names":[],"mappings":"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"}
|
package/dist/export.d.ts
CHANGED
package/dist/export.js
CHANGED
|
@@ -25,7 +25,7 @@ const deref = (s) => {
|
|
|
25
25
|
const pointer = (...parts) => "/" + parts.map((p) => String(p).replace(/~/g, "~0").replace(/\//g, "~1")).join("/");
|
|
26
26
|
const clone = (v) => structuredClone(v);
|
|
27
27
|
/** Fields of the Polyxd envelope that A2UI has no place for. */
|
|
28
|
-
const SURFACE_ONLY = ["title", "intent", "pattern", "journey", "dismissible"];
|
|
28
|
+
const SURFACE_ONLY = ["title", "intent", "pattern", "journey", "dismissible", "kind", "origin"];
|
|
29
29
|
export function exportToA2UI(doc, options = {}) {
|
|
30
30
|
const { mode = "inline", extensions = true } = options;
|
|
31
31
|
const surfaceId = options.surfaceId ?? doc.surface.id;
|
package/dist/export.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"export.js","sourceRoot":"","sources":["../src/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAa,MAAM,WAAW,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAgElD,MAAM,QAAQ,GAAS,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAC5H,MAAM,IAAI,GAAS,QAAQ,CAAC,KAAK,CAAC;AAClC,MAAM,OAAO,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AACpH,MAAM,KAAK,GAAG,CAAC,CAAmB,EAAoB,EAAE;IACtD,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,OAAO,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC;QAAE,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC;IACtD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,GAAG,KAA0B,EAAE,EAAE,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACxI,MAAM,KAAK,GAAG,CAAI,CAAI,EAAK,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;AAEjD,gEAAgE;AAChE,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,CAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"export.js","sourceRoot":"","sources":["../src/export.ts"],"names":[],"mappings":"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"}
|
package/dist/mapping.d.ts
CHANGED
|
@@ -5,8 +5,11 @@
|
|
|
5
5
|
* equivalent with the same meaning. Otherwise it is exported as a custom component with the same name and
|
|
6
6
|
* props, so the export stays a lossless projection rather than a lossy flattening
|
|
7
7
|
* (docs/decisions/0001 §6: "a faithful export", custom catalogs being the endorsed A2UI path).
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* Of the 44 components, only Columns meets the rule (a Row of its children, collapsing being the
|
|
9
|
+
* renderer's business). `basicAnalog` records the nearest Basic construct and `why` records what
|
|
10
|
+
* flattening into it would lose. The shell components (Frame, AppBar, Footer, Outlet, Custom) are in
|
|
11
|
+
* the catalog so an authored shell exports faithfully, and out of its generator instructions: a
|
|
12
|
+
* shell is authored, never generated.
|
|
10
13
|
*/
|
|
11
14
|
export interface MappingDecision {
|
|
12
15
|
target: "basic" | "custom";
|
package/dist/mapping.js
CHANGED
|
@@ -140,5 +140,41 @@ export const MAPPING = {
|
|
|
140
140
|
basicAnalog: "Tabs",
|
|
141
141
|
why: "Tabs has no stable view keys and no binding for the selected view.",
|
|
142
142
|
},
|
|
143
|
+
// Spec 0.3: side-by-side layout, and the shell.
|
|
144
|
+
Columns: {
|
|
145
|
+
target: "basic",
|
|
146
|
+
basicAnalog: "Row",
|
|
147
|
+
why: "Nothing: a Row of the children in order says what Columns says. The layout ratio and the collapse width are rendering hints a renderer may ignore.",
|
|
148
|
+
},
|
|
149
|
+
Split: {
|
|
150
|
+
target: "custom",
|
|
151
|
+
basicAnalog: "Row(List, Column)",
|
|
152
|
+
why: "Row loses the shared selection binding, the detail's item scope, the empty state and the list-then-page behaviour on compact layouts.",
|
|
153
|
+
},
|
|
154
|
+
Frame: {
|
|
155
|
+
target: "custom",
|
|
156
|
+
basicAnalog: "Column(Row, Row(Column, Column, Column), Row)",
|
|
157
|
+
why: "Columns and Rows are layout. They lose the landmarks (banner, navigation, main, complementary, contentinfo), the skip link and which region is the outlet.",
|
|
158
|
+
},
|
|
159
|
+
AppBar: {
|
|
160
|
+
target: "custom",
|
|
161
|
+
basicAnalog: "Row(Text, TextField, Button, Image)",
|
|
162
|
+
why: "Row loses the banner role, the title-not-heading rule, the search landmark and the menu button the frame adds on compact layouts.",
|
|
163
|
+
},
|
|
164
|
+
Footer: {
|
|
165
|
+
target: "custom",
|
|
166
|
+
basicAnalog: "Column of Row(Text, Button)",
|
|
167
|
+
why: "Basic has no contentinfo landmark or link groups named by their headings; the legal line becomes plain text with no role.",
|
|
168
|
+
},
|
|
169
|
+
Outlet: {
|
|
170
|
+
target: "custom",
|
|
171
|
+
basicAnalog: "Column (empty)",
|
|
172
|
+
why: "An empty Column is a hole, not an outlet: it loses the main landmark, the label, the loading content and the rule that the host fills it with a screen.",
|
|
173
|
+
},
|
|
174
|
+
Custom: {
|
|
175
|
+
target: "custom",
|
|
176
|
+
basicAnalog: "the fallback component",
|
|
177
|
+
why: "Exporting only the fallback drops the host component's name and props; a host with that component would draw the fallback instead.",
|
|
178
|
+
},
|
|
143
179
|
};
|
|
144
180
|
//# sourceMappingURL=mapping.js.map
|
package/dist/mapping.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapping.js","sourceRoot":"","sources":["../src/mapping.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mapping.js","sourceRoot":"","sources":["../src/mapping.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@polyxd/a2ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Exports Polyxd UI documents to A2UI v1.0 message streams, with a Polyxd A2UI catalog",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"NOTICE"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@polyxd/spec": "^0.
|
|
22
|
+
"@polyxd/spec": "^0.4.0",
|
|
23
23
|
"ajv": "^8.20.0",
|
|
24
24
|
"ajv-formats": "^3.0.1"
|
|
25
25
|
},
|