Components
Every component in the framework — 42 of them — with the facts you need before opening one: what it is for, whether it works without JavaScript, the browser floor of its own stylesheet rather than the framework's, and its design-system score. Each card links to the live component page, where the thing actually renders. Not a gallery of screenshots — a still picture of a demo that is live one click away earns nothing, so the cards carry facts and the page carries the link.
Actions
The framework's action control, in solid, secondary, ghost and danger settings.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
A popover menu that renders in the top layer, so a table or sticky header never clips it.
Chrome/Edge 117 · Firefox 129 · Safari 17.5 · initContextMenu() initDropdowns()
A toggle between a handful of mutually exclusive views, built on real radio inputs.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Data input
Fields, labels, help and error text, sections and fieldsets — the form surface.
Chrome/Edge 119 · Firefox 128 · Safari 17.4 · initGroupedNumber() initValidationSummary()
An editable text field with list autocomplete, following the ARIA combobox pattern.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initCombobox()
The filter bar above a table or list, with chips showing what is applied.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initSavedViews()
An editable currency select and amount input working as one field.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initGroupedNumber() initMoneyField()
A count field with increment and decrement buttons around a real number input.
Chrome/Edge 105 · Firefox 121 · Safari 15.4 · initGroupedNumber() initQuantity()
Multi-value entry that looks like one input and commits each value as a tag.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initTagInput()
Fields, labels, help and error text, sections and fieldsets — the form surface.
Chrome/Edge 119 · Firefox 128 · Safari 17.4 · initGroupedNumber() initValidationSummary()
A real file input, with the one part of it a browser lets you restyle.
Chrome/Edge 119 · Firefox 121 · Safari 16.5 · initFileDropzone()
A contenteditable rich-text editor whose formatting is native browser behaviour.
Chrome/Edge 105 · Firefox 121 · Safari 15.4
Tables & lists
The dense ERP table, sized by its own width rather than the viewport's.
Chrome/Edge 117 · Firefox 129 · Safari 17.5 · initDataGrid() initDataTables() initRowEdit() initStickyCols() initTableSum() initTableToolbar() initWindowedList()
A section of another component’s page — no stylesheet of its own.
floor not derived
A section of another component’s page — no stylesheet of its own.
floor not derived
Page navigation for a long result set, with the current page marked programmatically.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initLoadMore()
Hierarchy navigation on native details and summary elements, with no JS.
Chrome/Edge 99 · Firefox 128 · Safari 17.4
Hierarchical rows inside a plain data table, expanded by disclosure buttons.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initTreeTable()
A native ordered list where the sequence is real semantics, not decoration.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Values
A monetary or quantity value laid out for scanning down a column, in tabular figures.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Key-value facts for a record header, as a native description list.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Display
A responsive widget grid and its cards, both named containers so widgets size to themselves.
Chrome/Edge 105 · Firefox 121 · Safari 16 · initCollapsibleCards()
A responsive widget grid and its cards, both named containers so widgets size to themselves.
Chrome/Edge 105 · Firefox 121 · Safari 16 · initCollapsibleCards()
An author, role and timestamp provenance line for a record header, comment or audit note.
Chrome/Edge 105 · Firefox 121 · Safari 15.4
A short status chip for approval states and document statuses.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
A keycap chip for rendering a keyboard shortcut inline.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Initials or a photo in a disc, em-sized so it tracks the text beside it.
Chrome/Edge 105 · Firefox 121 · Safari 15.4
Rendered rich content wherever a stored rich-text value is displayed.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
A month grid that says which days are special — deliberately not a date picker.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Feedback
Inline alerts and toasts — a message the screen must carry, announced only when it arrives.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initAlerts()
Empty and error states for a region with nothing to show, the icon shape differing too.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Continuous progress on the native progress element — always paired with visible text.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
Numbered steps through a multi-step document, with the current step marked.
Chrome/Edge 105 · Firefox 110 · Safari 16 · initWizard()
An ordered timeline of workflow steps, with each step's state in real marker markup.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
The visible half of a scan acknowledgement, readable in peripheral vision.
Chrome/Edge 99 · Firefox 97 · Safari 15.4 · initScanInput()
Navigation & layout
The application's top bar — brand, primary links and account actions.
Chrome/Edge 99 · Firefox 97 · Safari 15.4
The fixed navigation rail, wide enough for a two-word ERP label on one line.
Chrome/Edge 105 · Firefox 110 · Safari 16
The path trail through a deep ERP hierarchy, wrapping rather than truncating.
Chrome/Edge 99 · Firefox 128 · Safari 17.4
An edge sheet built on the dialog wiring, for navigation and secondary panels.
Chrome/Edge 117 · Firefox 129 · Safari 17.5 · initDialogs()
The ARIA tabs pattern — CSS styles the selection, the behaviour supplies arrow keys.
Chrome/Edge 105 · Firefox 110 · Safari 16 · initTabs()
A native dialog element — backdrop, Esc and focus return come from the platform.
Chrome/Edge 117 · Firefox 129 · Safari 17.5 · initDialogs()
CSS-rendered mask icons that take currentColor and scale with font size.
Chrome/Edge 99 · Firefox 97 · Safari 15.4