Open Components changelog

https://opencomponents.dev/llms.txt

+ - [Field](https://opencomponents.dev/raw/docs/components/field.yaml): The Field contract, with every rule from its checklist+ - [Popover](https://opencomponents.dev/raw/docs/components/popover.yaml): The Popover contract, with every rule from its checklist+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/field/ui.md): How a field looks, from its parts and where they go around each kind of control to its sizes, states and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/field/ux.md): How a field behaves for every person and setting, so its control is named, described and marked required or invalid the way assistive technologies expect.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/field/dx.md): How developers use the Field, with one typed API that labels, describes and validates every form control, without changing any of them.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/field/ax.md): How agents read, fill in and check a field, from its accessibility tree to its contract, its DOM and its tests.+ - [Field](https://opencomponents.dev/raw/docs/components/field.md): How to build a field that labels, describes and explains the errors of any form control, works for everyone, feels familiar to every developer and can be checked by your agents.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/popover/ui.md): How a popover looks, from its parts and where it opens to what goes in it, its states and its tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/popover/ux.md): How a popover behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/popover/dx.md): How developers use the Popover, opened by a Button with popovertarget, with one typed API and an open state that follows every open and close.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/popover/ax.md): How agents read, open and check a popover, from its accessibility tree to its contract, its DOM and its tests.+ - [Popover](https://opencomponents.dev/raw/docs/components/popover.md): How to build a popover that shows more next to what opened it, leaves the rest of the page working, opens and closes the way people expect and can be checked by your agents.+ - [The Field](https://opencomponents.dev/raw/changelog/field.md): A new component page, on a field that labels, describes and explains the errors of any form control, so screen readers announce what it asks and what's wrong, and that agents can check.+ - [The Popover](https://opencomponents.dev/raw/changelog/popover.md): A new component page, on a popover that shows more next to what opened it, leaves the rest of the page working, opens and closes the way people expect and that agents can check.

• + field
• + popover

https://raw.githubusercontent.com/uxfront-com/open-components/HEAD/AGENTS.md

− - **Checklists.** Rules are rows of the tables under `### UI rules`, `### UX rules`, `### DX rules` and `### AX rules`, with the columns Rule, Level, Scope, Requirement, Basis and Check, named exactly that. Every rule ID is unique, every rule has a Basis and every Check is one `mcp/lib/rules.ts` knows, or `pnpm test` fails.− - **Prompts.** The prompts on the pages (the Button's `#### Prompts`, the Design Tokens' `### Prompts`), the MCP prompts in `mcp/lib/prompts.ts` and the plugin's skills ask for the same things. `prompts.test.ts` checks the first two, so change all three together.− - **Replaced theme components.** `app/components/app/AppHeaderBody.vue` and `app/components/docs/DocsPageHeaderLinks.vue` replace the layer's and Docus's own, so keep them in step with the originals.− - Every page has a `title` and a `description`, and a file name that's unique across `content/docs/` once its number is dropped.− The [Button](./content/docs/3.components/1.button.md) page is the model for every page, so read the sections you're about to mirror before you write. It's long, about 35,000 tokens, so read it a section at a time.+ - **Checklists.** Rules are rows of the tables under `### UI rules`, `### UX rules`, `### DX rules` and `### AX rules` (on a split page, `## UI Checklist` and so on, on each layer's page after its sections and before its FAQ: the join turns them back into `### UI rules`), with the columns Rule, Level, Scope, Requirement, Basis and Check, named exactly that. Every rule ID is unique, every rule has a Basis and every Check is one `mcp/lib/rules.ts` knows, or `pnpm test` fails.+ - **Prompts.** The prompts on the pages (the Button's `### Prompts` on its AX page, the Design Tokens' `### Prompts`), the MCP prompts in `mcp/lib/prompts.ts` and the plugin's skills ask for the same things. `prompts.test.ts` checks the first two, so change all three together.+ - **Replaced theme components.** `app/components/app/AppHeaderBody.vue`, `app/components/docs/DocsPageHeaderLinks.vue` and `app/components/docs/DocsAsideLeftBody.vue` replace the layer's and Docus's own, `app/components/docs/DocsNavigation.vue` renders the sidebar's and the menu's navigation in place of Nuxt UI's `UContentNavigation`, and `app/components/UContentSurround.vue` replaces Nuxt UI's links to the previous and next pages, so both list the component pages by name (`app/lib/navigation.ts+ - Every page has a `title` and a `description`, and a file name that's unique across `content/docs/` once its number is dropped. The parts of a split page, below, count as one page.+ - Number the folders and the pages outside `3.components/` to order them in the sidebar, and leave component folders without one, like `3.components/card/`, so the sidebar lists them by name. It sorts file names as text, which would put a `10.` before a `2.`, and two component branches open at once would reach for the same number.+ - Every component page is split into parts, like the Button's in `3.components/button/`, which stays the model: its Overview in `index.md`, with link cards to the parts, and a page per layer, numbered to set their order inside the folder. A part's `title` is the heading it has on the whole page, its `before` names the Overview's section it goes before, and its headings sit a level higher. After its sections come its rules table, under `## UI Checklist` and so on, then its questions, if it has an+ The [Button](./content/docs/3.components/button/index.md) page, split into an Overview and a page per part in `3.components/button/`, is the model for every page, so read the sections you're about to mirror before you write. It's long, about 35,000 tokens, so read it a section at a time.

https://opencomponents.dev/llms.txt

− - [Spinner](https://opencomponents.dev/raw/docs/components/spinner.yaml): The Spinner contract, with every rule from its checklist− - [Input](https://opencomponents.dev/raw/docs/components/input.yaml): The Input contract, with every rule from its checklist− - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.yaml): The Checkbox Group contract, with every rule from its checklist− - [Spinner](https://opencomponents.dev/raw/docs/components/spinner.md): How to build a spinner that shows something is busy, without getting in the way of screen readers, reduced motion or the layout around it.− - [Input](https://opencomponents.dev/raw/docs/components/input.md): How to build a text input that people can label, fill in and fix, that works with every keyboard, autofill and password manager, and that agents can check.− - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.md): How to build a group of checkboxes that people can pick any number of options from, that's named by its question, that says when they need to pick one, and that agents can check.+ - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.yaml): The Checkbox Group contract, with every rule from its checklist+ - [Input](https://opencomponents.dev/raw/docs/components/input.yaml): The Input contract, with every rule from its checklist+ - [Radio Group](https://opencomponents.dev/raw/docs/components/radio-group.yaml): The Radio Group contract, with every rule from its checklist+ - [Spinner](https://opencomponents.dev/raw/docs/components/spinner.yaml): The Spinner contract, with every rule from its checklist+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/button/ui.md): How a button looks, from its parts, variants and colours to its sizes, icons, states and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/button/ux.md): How a button behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/button/dx.md): How developers use the Button, with one consistent, typed API that composes with links, routers and other components.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/button/ax.md): How agents read, build and check a button, from its accessibility tree to its contract, its DOM and its tests.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/card/ui.md): How a card looks, from its parts and what goes in each of them to how cards sit together, its states and its tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/card/ux.md): How a card behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/card/dx.md): How developers use the Card, with one consistent, typed API that composes with links, routers and other components, and needs no script.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/card/ax.md): How agents read, build and check a card, from its accessibility tree to its contract, its DOM and its tests.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/checkbox-group/ui.md): How a checkbox group looks, from its parts, sizes and orientation to its states and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/checkbox-group/ux.md): How a checkbox group behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/checkbox-group/dx.md): How developers use the Checkbox Group, with one consistent, typed API that's built from Checkboxes and works with your forms however you build them.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/checkbox-group/ax.md): How agents read, build and check a checkbox group, from its accessibility tree to its contract, its DOM and its tests.+ - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.md): How to build a group of checkboxes that people can pick any number of options from, that's named by its question, that says when they need to pick one, and that agents can check.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/checkbox/ui.md): How a checkbox looks, from its parts and sizes to its states and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/checkbox/ux.md): How a checkbox behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/checkbox/dx.md): How developers use the Checkbox, with one consistent, typed API that works with your forms however you build them.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/checkbox/ax.md): How agents read, build and check a checkbox, from its accessibility tree to its contract, its DOM and its tests.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/dialog/ui.md): How a dialog looks, from its parts and how wide it gets to what goes in it, how it shows that it's open and its tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/dialog/ux.md): How a dialog behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/dialog/dx.md): How developers use the Dialog, with one consistent, typed API that composes with forms and other components and leaves when to open and close it to you.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/dialog/ax.md): How agents read, open and check a dialog, from its accessibility tree to its contract, its DOM and its tests.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/input/ui.md): How an input looks, from its parts and sizes to its icons, prefixes, actions, states, width and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/input/ux.md): How an input behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/input/dx.md): How developers use the Input, with one consistent, typed API that works with any form and other components, whether its value is bound or not.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/input/ax.md): How agents read, fill in and check an input, from its accessibility tree to its contract, its DOM and its tests.+ - [Input](https://opencomponents.dev/raw/docs/components/input.md): How to build a text input that people can label, fill in and fix, that works with every keyboard, autofill and password manager, and that agents can check.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/radio-group/ui.md): How a radio group looks, from its parts and sizes to its states, layout and tokens.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/radio-group/ux.md): How a radio group behaves for every person, input and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/radio-group/dx.md): How developers use the Radio Group, with one consistent, typed API that works with your forms however you build them.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/radio-group/ax.md): How agents read, fill in and check a radio group, from its accessibility tree to its contract, its DOM and its tests.+ - [Radio Group](https://opencomponents.dev/raw/docs/components/radio-group.md): How to build a radio group that asks one clear question, lets people pick one answer with a pointer or the arrow keys, says what's wrong when they skip it, and that agents can check.+ - [User Interface (UI)](https://opencomponents.dev/raw/docs/components/spinner/ui.md): How a spinner looks, from its parts, size and colour to how it moves and the one variable you can set.+ - [User Experience (UX)](https://opencomponents.dev/raw/docs/components/spinner/ux.md): How a spinner behaves for every person and setting, so it's accessible, predictable, clear in every state and adaptive.+ - [Developer Experience (DX)](https://opencomponents.dev/raw/docs/components/spinner/dx.md): How developers use the Spinner, with no props, events or slots, and one implementation that every component shares.+ - [Agentic Experience (AX)](https://opencomponents.dev/raw/docs/components/spinner/ax.md): How agents read, build and check a spinner, from the text around it to its contract, its DOM and its tests.+ - [Spinner](https://opencomponents.dev/raw/docs/components/spinner.md): How to build a spinner that shows something is busy, without getting in the way of screen readers, reduced motion or the layout around it.

• + dialog
• + radio-group

https://opencomponents.dev/llms.txt

+ - [Card](https://opencomponents.dev/raw/docs/components/card.yaml): The Card contract, with every rule from its checklist+ - [Checkbox](https://opencomponents.dev/raw/docs/components/checkbox.yaml): The Checkbox contract, with every rule from its checklist+ - [Dialog](https://opencomponents.dev/raw/docs/components/dialog.yaml): The Dialog contract, with every rule from its checklist+ - [Switch](https://opencomponents.dev/raw/docs/components/switch.yaml): The Switch contract, with every rule from its checklist+ - [Textarea](https://opencomponents.dev/raw/docs/components/textarea.yaml): The Textarea contract, with every rule from its checklist+ - [Tooltip](https://opencomponents.dev/raw/docs/components/tooltip.yaml): The Tooltip contract, with every rule from its checklist+ - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.yaml): The Checkbox Group contract, with every rule from its checklist+ - [Card](https://opencomponents.dev/raw/docs/components/card.md): How to build a card that groups what people need to know about one thing, that keyboard and screen reader users can move through, and that agents can check.+ - [Checkbox](https://opencomponents.dev/raw/docs/components/checkbox.md): How to build a checkbox that people can check with a click on its label, that says what it means and when it's mixed, that forms send the way they expect, and that agents can check.+ - [Dialog](https://opencomponents.dev/raw/docs/components/dialog.md): How to build a modal dialog that takes focus and gives it back, that everyone can close, that developers control and that agents can check.+ - [Switch](https://opencomponents.dev/raw/docs/components/switch.md): How to build a switch that turns a setting on or off right away, that everyone can see, label and flip, and that agents can check.+ - [Textarea](https://opencomponents.dev/raw/docs/components/textarea.md): How to build a textarea that people can label, write in at length and fix, that grows or resizes without cutting anything off, and that agents can check.+ - [Tooltip](https://opencomponents.dev/raw/docs/components/tooltip.md): How to build a tooltip that shows a short hint on hover and keyboard focus, that people can reach, read and dismiss, and that agents can check.+ - [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.md): How to build a group of checkboxes that people can pick any number of options from, that's named by its question, that says when they need to pick one, and that agents can check.+ - [The Card](https://opencomponents.dev/raw/changelog/card.md): Our fourth component page, on a card that groups what people need to know about one thing, that keyboard and screen reader users can move through, and that agents can check.+ - [The Checkbox](https://opencomponents.dev/raw/changelog/checkbox.md): Our fourth component page, on a checkbox that people can check with a click on its label, that says what it means and when it's mixed, that forms send the way they expect, and that agents can check.+ - [The Checkbox Group](https://opencomponents.dev/raw/changelog/checkbox-group.md): A new component page, on a group of checkboxes that its question names, that people can pick any number of options from, with a select-all box that's never out of step, and that agents can check.+ - [The Dialog](https://opencomponents.dev/raw/changelog/dialog.md): A new component page, on a modal dialog that takes focus and gives it back, that everyone can close, that developers control and that agents can check.+ - [The Switch](https://opencomponents.dev/raw/changelog/switch.md): Our fourth component page, on a switch that turns a setting on or off right away, that everyone can see, label and flip, and that agents can check.+ - [The Textarea](https://opencomponents.dev/raw/changelog/textarea.md): Our component page on a textarea that people can label, write in at length and fix, that grows or resizes without cutting anything off, and that agents can check.+ - [The Tooltip](https://opencomponents.dev/raw/changelog/tooltip.md): Our fourth component page, on a tooltip that shows a short hint on hover and keyboard focus, that people can reach, read and dismiss, and that agents can check.

• + card
• + checkbox
• + switch
• + textarea
• + tooltip
• + checkbox-group