JavaScript

Behaviours

Eight kilobytes, gzipped, of TypeScript for what HTML cannot do alone.

In markup.

aequitas.js is optional and self-initialising. Everything is driven by attributes, and markup that arrives later (an SPA render, a fetched fragment) is enhanced as it lands. Set data-ae-manual on <html> to call init() yourself, for example after hydration, as this site does.

Hook	What it does
`[role=tablist]`	Click and arrow-key tab switching; toggles `aria-controls` panels
`[data-open="#id"]`, `[data-close]`	Opens dialogs or popovers, closes the nearest one
`dialog[data-light-dismiss]`	Closes when the backdrop is clicked
`[data-dismiss]`	Removes the nearest `.alert`, `.toast` or `.chip`, or the nearest ancestor matching its value
`[data-toast]`	Shows a toast with that message; `data-toast-title` and `data-toast-tone` set its title and tone
`[data-theme-set]`	Light / dark / auto with a view transition, persisted
`input[type=range][data-output]`	Keeps the track fill and an output element in sync
`.range-pair`	Fills between its two ranges and keeps them from crossing
`.number > button[data-step]`, `[data-toggle]`	Stepper buttons; pressed-state toggles
`.tag-input`, `.otp`	Enter / Backspace chip editing; auto-advance, backspace and paste
`.combobox`	Opens on focus, filters as you type, arrow and Enter selection, `aria-activedescendant` on the highlight
`dialog.palette`	Filters options and group labels as you type, marks matches, ↑/↓ and Enter; `[data-manual]` leaves it to you
`.toc`	Marks the section currently in view
`[data-copy]`	Copies a `.code` block, or the given selector
`.dropzone`	`data-active` while files are dragged over it
`.dropzone[data-page]`	`data-active` while files are dragged anywhere over the page; the page takes the drop
`[popovertarget]`, `[data-open]` on a popover	`aria-expanded` follows the popover
`.input-group > [data-password]`	Toggles the input between hidden and shown; sets `aria-pressed`
`.table` with row checkboxes, `.selection-bar`	Header box selects all (indeterminate when partial), rows get `aria-selected`; the bar shows the count in `[data-selected]` and `[data-clear]` clears it

API.

Six functions, also bundled as one aequitas object. Import the module directly when you need them.

app.js

import { init, bind, enhance, toast, setTheme, markMatches } from "./aequitas.js";

toast("Northlight is live.", { title: "Published.", tone: "success", duration: 4000 });
setTheme("dark", button); // "light" | "dark" | "auto", revealed from the button
init(); // listeners, enhancements, and a watch that enhances markup added later
markMatches(list, "term"); // highlight a term in the options of a dialog.palette[data-manual]