The action trigger of the system — three variants, eight roles, five sizes.
Components
Every component in the library, grouped the way the sidebar and Storybook group them. Each
card shows the component itself, drawn from the class plus data-* styling API with no
React involved — the same contract every preview on every page is written against.
Actions
Section titled “Actions”A button that opens a menu, with the full APG keyboard down to typeahead.
An anchored, non-modal surface a click opens.
A circular trigger docked in a viewport corner, with a speed-dial mode.
Inputs
Section titled “Inputs”One field for every input type, with a label, helper, and error the browser ties together.
A password field with a reveal toggle and a caps-lock warning.
Input with more than one line, differing only in height and resize.
A native checkbox with three corner shapes and a real mixed state.
A native radio for picking exactly one option, grouped by the platform.
A switch built from one native input, with role="switch" pinned.
Two icons in one spot, exchanged with an animation, driven by a real checkbox.
The native select wearing Input's field contract.
The editable APG combobox — Input's field outside, a filterable listbox inside.
A one-time-code field built on a single real input, with SMS autofill for free.
The native range input as a system slider — single or dual thumb, marks, a value bubble.
A score picker that is a real radio group, and a score display that is a picture.
A masked date field with a Calendar panel, whose value is always a plain ISO string.
A masked time field with an hours-and-minutes panel, valued as HH:MM.
M T W T F S S 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 An inline month grid for one date or a range, the same one the DatePicker opens.
A native form that hands its react-hook-form instance to every field below it.
Feedback
Section titled “Feedback”- A software update is available.
A feedback banner in four variants, with the announcement role derived from the colour.
An indeterminate activity indicator with twenty-two variants.
A linear bar on the native progress element.
- 66%
A determinate progress ring drawn entirely by CSS.
A placeholder box with a sheen crossing it while the real content loads.
- Changes saved
A deck of notifications stacked in a corner of the screen.
A short description of the element it wraps, revealed on hover and focus by one CSS rule.
Data display
Section titled “Data display”- DV AM LP
A person as a photo or their initials, with a presence dot and an overlapping group.
- Nuevo passing beta
A small status marker rendered as one span.
- Wi-Fi Casa
- Bluetooth On
A stack of rows on a named-line grid — the settings-pane and file-browser shape.
- Orders completed
- 1,284
- +3.1%
A metric card and the description list it lives in.
Sales by city City Total Quito $24,310 Guayaquil $18,740 A styled semantic table inside a named, focusable scroll region.
-
Order confirmed
-
Estimated arrival
An ordered list on a rail — entries, group headings, and a now marker.
-
Layout
Section titled “Layout”- OR
A hairline separator with an optional label, in either orientation.
General
Language and region.A disclosure built on native details and summary.
General
Language and region.Appearance
Collapse items sewn into one card, where opening one closes the rest.
Pro plan
Reports and API access.
A surface to put things on — the layout inside it stays yours.
Draft saved a moment ago.
A decorative device frame — window, browser, or phone — around a real screen.
Navigation
Section titled “Navigation”A labelled navigation landmark wrapping an ordered list of ancestor links.
- The General panel.
One row of tabs over one visible panel, or a row of links that navigate.