Components

Rules per AWE element. Each component reads semantic or component tokens only, defines every state (hover, focus, active, disabled, invalid, loading, empty) and works in both densities and both modes. The sample screen and the AWE 5 components page show them live.

Buttons

Variant	Use
Primary	The main action of a screen, card or dialog. One per area.
Secondary	Frequent actions next to the primary (Import, Reset).
Outlined	Neutral actions, toolbars, button groups.
Text	Low-emphasis actions (History, Clear all, links inside cards).
Ghost icon	Toolbar and row actions. Always aria-label + tooltip.
Tonal	A secondary action that has to stand out next to the outlined ones (Preview), without being the primary (btn-tonal).
Danger / danger outlined	Destructive actions. Filled only in the confirmation step.

• Sizes: small (--awe-size-control-sm), default (--awe-size-control), large (--awe-size-control-lg, login).
• Label weight 500, icon on the left, 8px gap.
• Busy (#771): when the action a button launched is still running after about 400 ms, that button shows a spinner instead of its icon (before its label when it has none), stays disabled and is not faded; quick actions show nothing. The other buttons are disabled while actions run. show-loading="false" turns it off for a button (see Button).
• Button groups share borders; a split button is a primary plus a chevron button.

Do	Don't
"Save changes", "Delete customers"	"OK", "Yes"
One primary per area	Two filled buttons side by side
Disable and explain (tooltip)	Hide an action the user expects

Criteria (form fields)

Element	Rule
Label	Above the field, --awe-font-size-label, weight 500. Required: red *. Optional hints right-aligned in muted text.
Field	Height --awe-size-control, --awe-radius-field, border --awe-color-field-border. Leading icon optional.
Focus	Border in the primary plus a soft halo.
Invalid	Red border, message under the field with an icon (--awe-color-danger-text), aria-invalid and aria-describedby.
Disabled / read-only	Disabled: muted background, no shadow. Read-only: filled background, value selectable. Locked: lock icon plus the reason (see #791).
Help	One line under the field in muted text.
Layout	Auto-fill grid of 232px minimum columns; wide fields span 2 columns.

Numbers. Right-aligned, tabular figures, unit as a prefix or suffix (€, days), optional stepper.

Select, multiselect and autocomplete

The native browser list is not used: it ignores the theme and the mode. Every select is a combobox with a listbox popup in the AWE list style.

Part	Rule
Popup	Overlay surface, border, --awe-shadow-overlay, 4px padding, 2px gap, top layer (never clipped by grids or dialogs). Opens below, or above when there is no room.
Option	8px × 12px padding, --awe-radius-list-option. Hover/focus: --awe-color-list-option-focus. Selected: highlight background plus a check.
Groups	Optional group header (small, muted) and a separator.
Filter	A filter input at the top when there are more than 10 options.
Keyboard	↑/↓, Home/End, Enter/Space, Esc, Tab closes, type-ahead also when closed.
ARIA	role="combobox" with aria-expanded, aria-controls, aria-activedescendant; role="listbox" and role="option" with aria-selected.
Multiselect	Selected values as removable chips in the field; the popup lists every option with a checkbox and "n of m" in the field.
Autocomplete	Same list style; the matched text is highlighted; options can have a second line (meta).
Multiple autocomplete	The chosen values are the same removable chips as a multiselect, wrapped inside the field; a dropdown trigger at its right end opens the list without typing, and, when the field can be left empty, a clear button empties every chosen value at once.
Clear	A field that can be left empty shows a muted clear icon at its right end while it has a value (--awe-size-icon-sm, the color of the field icon).

Dates and times

• Date: text field with a calendar button. Calendar: today outlined, selected filled with the primary.
• Month picker (#820): 3×4 grid of months.
• Date formats (#820): the display format is shown as a hint next to the label.
• Range (#839): one field with two inputs and an arrow; shortcuts (7 days, 1 month, 3 months, year to date, 12 months, all) as pill buttons under the field; the end cannot be before the start.
• Time: text field with a clock icon, tabular figures.

Segmented control (button radio)

• A track with a border; the selected segment has its own surface, border, shadow and semibold text (--awe-segmented-*). It must read in both modes.
• Never clips. Segments wrap; in a cell narrower than 300px they become a two-column grid at full width.
• Give it enough width in examples and forms: a four-option control spans two criteria columns.

Checkbox, radio and switch

• Checkbox --awe-size-checkbox, --awe-radius-sm; supports indeterminate.
• Radio groups in a row, wrapping; disabled options keep their label visible.
• Switch for settings that apply at once; checkbox for values submitted with a form.

Uploader (#841)

Drop zone (dashed border, highlight on drag-over), "browse" link, accepted types and size as help. Files listed with icon, name, size, progress or status. An image shows a preview with Clear. A Take photo button opens the camera. Read-only uploaders show the file and disable the actions.

Grid

Part	Rule
Card	The grid lives in a card; title and count in the card header.
Toolbar	Search in results, Filters (with count), spacer, Saved searches (#912), Columns, Export (split button).
Active filters	A "Filtered by" row under the toolbar: one removable dashed chip per filtered column ("Profile: Operator, Viewer", three labels then "+N"), plus "Clear all" (#912).
Header	--awe-grid-header-*, sortable columns show an arrow; the sorted one in the primary. Sticky. A column with an autofilter shows a funnel: outlined without a filter, filled with one (#912).
Rows	Cell padding --awe-grid-cell-padding-*, hover background, no zebra.
Selection	Checkbox column; selected rows use the highlight background. While rows are selected, a selection bar takes the band of the toolbar, with its same height, so rows never move: clear button (x, also Esc), the count, a chip with the context of the selection (active quick filter, search text) and the bulk actions; Columns and Maximize stay at the right. A grid without toolbar draws the bar over the column header, leaving the select-all checkbox. Clearing returns the focus to the search, or to the select-all checkbox.
Numbers	Right-aligned, tabular, negatives in the danger colour with a minus sign.
Status	Tags with a dot (tag--success, --warning, --danger, --info).
Inline edit	The edited row gets a primary outline, fields inside the cells (small controls), Save and Cancel in the actions column.
Row actions	Ghost icon buttons at the end of the row, or a menu button (#801).
Pager	"Showing 1–10 of 1,284", page size (select), pages with first/previous/next/last, "Go to page" (#826, #874).
Loading	Skeleton rows under the real header (#856). A refresh dims the current rows and shows a top loading bar.
Empty	Empty state inside the grid body (#837).

Do	Don't
Keep the real header while loading	Show a spinner over an empty box
Put the key column first with a second line	Repeat the same data in two columns
Truncate with ellipsis and tooltip	Let a long text break the row height without a limit

Tabs and accordion

• Tabs: muted labels, active label and 2px underline in --awe-color-primary-text, optional count badge, ←/→ move. A tab with an error shows an error count (#827).
• Accordion: one header per section with an icon and a chevron; open sections animate; several can be open.

Overlays

Element	Rule
Dialog	<dialog>, --awe-radius-modal, header (title, subtitle, close), scrollable body, footer with actions on the right that stays at the bottom after a separator line (modal-footer). Mask --awe-color-mask with a slight blur. Sizes in #844.
Confirmation	Small dialog with a danger icon, a precise question ("Delete 2 customers?"), the consequence, Cancel focused by default.
Side panel (#843)	Slides from the right, full height, own footer of actions. For editing a record without leaving the list.
Popover (#843)	Anchored to its button, with an arrow; can hold criteria and a small grid; Cancel / Accept.
Dropdown menu	Overlay list of options with icons; destructive options last, in danger text, after a separator.
Toast	Top right, below the header, top layer (above dialogs). Success, info, warning, error; auto-dismiss 6s, close button. Errors use role="alert".
Tooltip	Inverse surface (--awe-color-tooltip), small text, appears on hover and focus. Never the only place of essential information.

Feedback

• Messages: subtle background, border and icon per status; bold first words state the fact.
• Tags for states, badges for counts.
• Empty state: icon in a circle, title, one or two lines of explanation, at most two actions.
• Progress bar for known progress; loading bar for unknown progress.

New AWE 5 elements

Grouped as in the components page. Done items are in AWE 5 and are redesigned; Planned items are proposals.

Grid features

Element	Issue	Status	Rule
Multi-line cells with tooltip	#825	Done	Up to N lines per column, then ellipsis; the full text in a tooltip.
Radio and button-bar columns	#838	Done	One column holds a set of options; arrow keys change the value. Use the segmented control style.
Sparkline column	#855	Done	Line, bars or area per row; negatives in danger; min, max and last marks.
Expandable row detail	#835	Done	A chevron opens a detail area under the row (fields or a nested grid), marked with a primary left border.
Move rows	#842	Done	Toolbar actions: top, up, down, bottom on the selected rows.
Data bars in cells	#831	Done	A light bar behind the number; negatives grow to the left in the danger tone. The number stays readable. A second value draws two thin rounded bars, the value on top; stacked segments use the data scale.
Secondary line, status and tags in cells	#832	Done	Muted second line, status with a dot, tags collapsing into "+n".
Row grouping with subtotals	#833	Done	Collapsible group header with count and totals, a subtotal row per group, grand total in the footer.
Column autofilter and grid saved searches	#834, #912	Done	A funnel in the header of the columns that declare filter opens a popover: sort, clear, conditions of the type (text, number, date with relative dates, custom filter of two conditions) and the list of values with search, Select all, Blanks and counts from the server. Filtered columns show chips under the toolbar. A Saved searches menu in the toolbar keeps the filters, sort, quick filter and search per user or profile. See Grids. Footer totals that say they are filtered are not part of it.
Pager with range, total and go to page	#826, #874	Done	See Grid.
Columns dialog per user	#813	Done	Popover anchored to the Columns button by default (columns-panel: popover, dialog or side-panel), changes applied live. Show, hide, reorder (drag or arrows), Restore default, Cancel, Save.

Criteria and forms

Element	Issue	Status	Rule
Month picker and date formats	#820	Done	See Dates and times.
Date range with shortcuts	#839	Done	See Dates and times.
Uploader with drop zone, preview and camera	#841	Done	See Uploader.
Section title	#910	Done	A small uppercase muted label followed by a line that fills the row splits a long form into sections: the awe-section-title style of a tag, best on a heading (<tag type="h3" style="awe-section-title" label="..."/>).
Reveal the first invalid field across tabs	#827	Done	On validation, open the tab with the first error, mark the tab, focus the field, show a summary with "Go to field".
Required to save vs. required to finish	#840	Planned	* blocks saving; a second marker (diamond, warning tone, dashed border) is needed to finish; a pending list with links; Save draft stays enabled.
Advanced search	#790	Done	A search window shows its essential criteria first and, right after them, an Advanced filters row with a count badge; the <advanced> block of the window opens below the row (inline) or, per window (advanced-mode), in a side panel opened by the same button (Reset to defaults, Cancel, Show results). After a divider the row lists as Filtered by chips every criterion that differs from its default, hidden ones with an eye-off icon; each chip clears its criterion and Clear all clears them all. Show results and Enter launch the submit button of the window. Saved searches and per-user memory are planned. See Window.
Visible access restrictions	#791	Planned	Locked fields and actions stay visible with a lock icon and the reason (help text or tooltip).

Overlays and panels

Element	Issue	Status	Rule
Field context menu and row menu button	#801	Done	Right-click or Shift+F10 on a field, button or tab; a menu button in a row opens that row's menu.
Maximize and restore	#799, #813	Done	Fills the content area; Restore or Esc returns.
Side panel	#843	Done	See Overlays.
Popover anchored to a button	#843	Done	See Overlays.
Dialog sizes	#844	Done	sm 360px, md 560px, lg 800px, xl 1140px, full screen.

Navigation and launchers

Element	Issue	Status	Rule
Launcher pages with descriptions	#828	Done	Cards with icon, title, one-line description and optional count; a launcher can open another one; the breadcrumb shows every level.

Data visualisation

Element	Issue	Status	Rule
Pivot table	#821, #878	Done	Drop zones for rows, columns and values; aggregation select; swap; totals per row and column.
Map	#798	Done	Controls and panels use AWE surfaces and buttons; markers and routes in the primary.
Colour scale cells and grid without header	#830	Done	5-step scale from the primary with a legend; a headerless grid starts with its first row.
Card	#899	Done	Metric tile: title, value (tabular) with unit, change as a tag with arrow and text (tone from good-trend), optional target progress, an optional status chip at the top right, before the icon (#836) and a body with any component; laid out with awe-card-grid. The card-note style (#791) turns it into a note: a soft band in the tone of its icon with the title and the description, for hints and summaries.
KPI	#836	Planned	Adds the filter mode on top of the card (#899): a selected state, and a click filters a grid through dependencies.

Feedback and loading

Element	Issue	Status	Rule
Skeletons: grid, screen, dim	#856, #869	Done	Show the structure that is coming; a refresh dims instead of hiding.
Configurable grid empty state	#837	Done	Own icon, title, text and action per grid.
Avatar without image and first-load splash	#864	Done	Photo, initials, or a generic user icon; never an empty circle. Splash with the logo, then the screen skeleton.