) around or inside the stack. aihio-stack does not create a landmark. ## Examples ### A heading and its copy ```html

Notifications

Choose how you want to hear from us.

``` ### Centered, with room between ```html

``` ## Mistakes ### gap="medium" is not valid. The scale is tight, sm, md, lg. Don't (aihio lint: invalid-enum-attribute): ```html

One

``` Do: ```html

One

``` ### Hand-rolled spacing drifts from the token scale. Use aihio-stack so the rhythm stays system-owned. Don't (aihio lint: hand-rolled-layout): ```html

One

``` Do: ```html

One

``` --- # An on/off setting that submits with its form, such as Email notifications on a settings page. Renders a real . Put it inside aihio-field for a label and description; for a pressed state in a toolbar (Bold, Italic) use aihio-toggle instead. Intents: `form-field`, `toggle-state`. ## Attributes - `checked` (boolean): Whether the switch starts on. Like a native checkbox's checked attribute, this is the reset default; the checked property is live state. Default: `false`. - `disabled` (boolean): Disables the switch. Default: `false`. - `required` (boolean): The form cannot submit until the switch is on. Default: `false`. - `name` (string): Form field name. The switch submits name=value when on and nothing when off. - `value` (string): Value submitted when the switch is on. Default: `on`. - `form` (string): Id of an external form that owns the switch. ## Properties - `checked` (`boolean`): Live on/off state. - `defaultChecked` (`boolean`): Reset state; reflects the checked attribute. - `control` (`HTMLInputElement | null`, read-only): The native checkbox the component delegates to. - `form` (`HTMLFormElement | null`, read-only): The owning form, or null outside one. - `validity` (`ValidityState | null`, read-only): Native constraint validation state. - `validationMessage` (`string`, read-only): Native validation message. - `willValidate` (`boolean`, read-only): Whether the switch takes part in constraint validation. ## Methods - `click()`: Flips the switch, as a click on it would. - `focus()`: Moves focus to the native checkbox. - `checkValidity()`: Runs native constraint validation. - `reportValidity()`: Runs native constraint validation and shows the browser's message. - `setCustomValidity()`: Sets a custom validation message; an empty string clears it. ## Events - `aihio-change` (detail: checked: boolean): Fired when the user turns the switch on or off. The native change and input events also bubble from the inner checkbox. ## Accessibility obligations - (error, switch-label) When the switch has no label: Name the switch after the setting it controls: put it in aihio-field with a , wrap it in a , or give it aria-label. Never label it with its state ("On", "Enabled"). - (warn, switch-form-name) When the switch is inside a

and its state should be submitted: Set name. A switch without a name is omitted from FormData entirely. - (warn, switch-state-name) When the switch is named by a state word (On, Off, Enabled): Name the switch after the setting it controls. The switch announces its own state, so a switch named "On" is read as "On, switch, on" and never says what is on. ## Examples ### In a field Laid out as a row beside its label, with a description beneath. ```html Email notifications

A digest of activity, sent weekly. ``` ### Wrapped in a label ```html Remember this device ``` ## Mistakes ### The visible text is not associated with the switch, so it is announced as an unnamed switch. Use aihio-field with , or wrap both in a . Don't (aihio lint: switch-label): ```html Email notifications ``` Do: ```html Email notifications

``` ### A switch named by its state is announced as "On, switch, on". Name it after the setting it controls. Don't (aihio lint: switch-state-name): ```html ``` Do: ```html ``` ### Boolean attributes are on by presence. checked="false" starts the switch on; omit the attribute for off. Don't (aihio lint: boolean-attribute-value): ```html ``` Do: ```html ``` --- # A data table: records in rows and columns, compared by scanning down a column. It wraps a native and gives it the system's styles, sortable columns, and a scroll box the keyboard can reach when the table is too wide for the screen. Use it for records people compare (invoices, members, deployments); use aihio-grid of cards for a few summaries, and never a table for layout. For more rows than a page can hold, show one page at a time with aihio-pagination, or use aihio-data-grid. Intents: `tabular-data`. ## Attributes - `density` (`default` | `compact`): Row spacing. compact fits more rows on screen, for dense data that people scan. Default: `default`. - `sticky-header` (boolean): Keeps the header in view while the rows scroll. The table scrolls inside its own box, which grows to --aihio-table-max-height (min(32rem, 75dvh) unless you set it) before its rows scroll. Default: `false`. - `manual-sort` (boolean): Leaves the order of the rows to your code. A click on a sortable header still marks it with aria-sort, announces it, and fires aihio-sort, but the rows stay as rendered: sort them yourself, as a framework re-rendering from state or a request to the server does. Without it the table reorders its own rows. Default: `false`. - `loading` (boolean): Marks the rows as stale while new ones load, such as after a sort sent to the server: they are dimmed, and the table has aria-busy. Default: `false`. - `sort-ascending-text` (string): Announced after sorting a column ascending, with {column} for the header's text. For localisation (e.g. "Lajiteltu: {column}, nouseva"). Default: `Sorted by {column}, ascending`. - `sort-descending-text` (string): Announced after sorting a column descending, with {column} for the header's text. Default: `Sorted by {column}, descending`. ## Properties - `table` (`HTMLTableElement | null`, read-only): The

the element enhances. ## Methods - `sort()`: Sorts by the column whose data-sortable value, or header text, is column: ascending unless direction says otherwise. It moves aria-sort to that header and, without manual-sort, reorders the rows. Like a value set from script, it fires no aihio-sort and announces nothing. ## Events - `aihio-sort` (detail: column: string, direction: 'ascending' | 'descending'): Fired when the person sorts by a column, once its header carries the new aria-sort and, without manual-sort, the rows are in their new order. column is the header's data-sortable value, or its text when that is empty. Not fired by sort(). ## Native elements reads these attributes on the native elements inside it. ### it names a column; in a body row, with scope="row", it names the row. #### . - `aria-sort` (`ascending` | `descending` | `none` | `other`): The order the rows are in. Write it on the header the rows are sorted by when the page loads; without manual-sort the table puts the rows in that order. The table moves it from header to header as people sort. - `data-numeric` (boolean): Lines a column of figures up by place value: end-aligned, in tabular digits. Put it on the column's header and on each of its cells. Default: `false`. - `data-sort-value` (string): What a row header sorts by, when its text does not sort the way it reads. See row, and each row with , and the cell that names each row is a holds the totals. ```html

as its first child, aria-labelledby pointing at the visible heading above it, or aria-label. An unnamed table is announced only as "table", and so is the scroll box it gets on a narrow screen. - (error, table-header-cells) When the table has no
A header cell. In
attributes - `data-sortable` (string): Makes the column sortable: the header's content becomes a button that sorts the rows by it, ascending first and then descending. The value names the column for aihio-sort and sort(), and can be left empty when nothing reads it. Only on a	in
. ###	A data cell. ####	attributes - `data-sort-value` (string): What the cell sorts by when its text does not sort the way it reads, such as a priority ("High" before "Low") or a date written out. A in the cell is read the same way, so a date marked up as one needs nothing more. Figures written for the page's language ("€1,250.50") are read as numbers without it. - `data-numeric` (boolean): Lines the figure up with the rest of its column. See	. Default: `false`. ## Accessibility obligations - (error, table-accessible-name) When the table has no caption, aria-label, or aria-labelledby: Name the table: a
cells: Name each column with a	in a
where one cell identifies it. Bold text in an ordinary cell is not a header. - (error, table-click-handler) When a row, header, or cell responds to clicks and holds no link or button: Sort with data-sortable on the	, and put a link or button in the row for anything else, such as a link in the cell that names it. A click handler on a row or cell is reachable by pointer only. - (warn, table-sort-column-name) When manual-sort is set and a sortable header has no column name: Give each sortable header a name, data-sortable="amount", so aihio-sort says which column to sort by without depending on the header's wording. ## Examples ### Records with a caption Each column is named by a	in
. data-numeric lines figures up by place value, and a

Invoices
Invoice	Customer	Status	Amount
INV-1042	Northwind Traders	Paid	€1,250.00
INV-1043	Fabrikam	Due	€980.50
INV-1044	Contoso	Overdue	€12,400.00
Total			€14,630.50

``` ### Sortable columns data-sortable makes a header a sort button. The rows load sorted by the header with aria-sort. A sorts by its machine-readable value, and data-sort-value gives a priority an order its words do not have. ```html

Deployments
Service	Priority	Deployed	Duration (s)
api-gateway	High	5 Oct, 14:20	42.5
billing-worker	Low	4 Oct, 09:05	118.0
search-indexer	Medium	29 Sep, 17:45	7.25

``` ### Compact, with a sticky header density="compact" fits more rows on screen, and sticky-header keeps the column names in view as they scroll. --aihio-table-max-height sets how tall the box grows first. ```html

Requests
Time	Method	Path	Status	Duration (ms)
09:41:02	GET	/api/projects	200	38
09:41:03	GET	/api/projects/42	200	21
09:41:07	POST	/api/deployments	201	412
09:41:09	GET	/api/deployments/97	200	17
09:41:12	PATCH	/api/projects/42	200	64
09:41:15	GET	/api/members	200	29
09:41:18	DELETE	/api/tokens/7	204	33
09:41:21	GET	/api/billing	503	1204
09:41:22	GET	/api/billing	200	88
09:41:30	POST	/api/invites	422	45
09:41:31	POST	/api/invites	201	97
09:41:36	GET	/api/audit	200	143

``` ### Sorted by your code manual-sort leaves the rows to you: listen for aihio-sort and render them sorted by event.detail.column and event.detail.direction, as a framework re-rendering from state or a request to the server does. The table still marks the header and announces the sort. ```html

Customers
Name	Plan	Seats
Contoso	Business	120
Fabrikam	Team	18
Northwind Traders	Enterprise	740

``` ### Links and row actions The cell that names each row links to it, and each row's menu is named for its row, so a screen reader can tell the menus apart. ```html

Team members
Name	Role	Actions
Ada Lovelace	Owner	⋯ Change role Remove from team
Grace Hopper	Admin	⋯ Change role Remove from team

``` ## Mistakes ### An unnamed table is announced only as "table". On a narrow screen it also scrolls inside a box with no name. Give it a