Utilities

Stack

One explicit gap between every child, in spacing units: stack-16 = 1rem.
Children's own block margins are cleared so the gap is exact.

The gap is written straight onto the children, not passed through an
inherited variable, so a nested stack can't pick up its parent's gap.
For per-element spacing, use flow.

Rules

Kite Co.'s keylines: a hairline on one edge, in the context's foreground at
half strength, so it follows every surface.

  rule-block-start | rule-block-end | rule-inline-start | rule-inline-end

Reads the global knobs --rule-width (declared) and --rule-color (not
declared; set it on a context to change every rule inside). For the
keyline down a layout-grid's wide edge, see layout-grid--ruled.

Lists

list-reset: no markers, no indent.
list-styled: markers back, with spacing between items. prose applies it.

list-styled knobs: --list-styled--padding-inline-start, --list-styled--gap,
--list-styled__marker--color (read with a fallback to currentColor).

A box whose child image or video covers it. Give the box a size or aspect ratio.

Hit area

Grows the clickable area of a small control to at least 44px, centred,
without changing how big it looks. An invisible ::before does it, so the
element needs its ::before free.
  <button class="btn btn--square hit-area [--btn--size:--spacing(32)]">…</button>

Keep 44px clear around the control's centre, or the areas overlap.
Knob, read with a fallback: --hit-area--size (44px).

Show or hide parts of a disclosure trigger based on its aria-expanded state:

  <button aria-controls="menu" aria-expanded="false">
      <span data-show-collapsed>Open menu</span>
      <span data-show-expanded>Close menu</span>
  </button>

data-show-expanded / data-hide-collapsed: visible only when expanded.
data-hide-expanded / data-show-collapsed: visible only when collapsed.

Scroll lock

The page stops scrolling while a modal dialog, or a popover with
data-scroll-lock, is open, with no JS. The gutter stays reserved so the
content doesn't shift sideways.

  <nav popover data-scroll-lock>…</nav>

For anything else that should lock scrolling, add scroll-lock to <html>.

Strip a button back to its content, for buttons that shouldn't look like buttons.

Remove the outer margins of a container's first and/or last child.

Remove focus styles. Only for elements that are never reached by keyboard,
or that draw their own focus indicator. Getting this wrong hides focus.

dynamicElements: run setup code for every element matching a selector, now
and whenever one is added later. Like customElements.define(), but for any
markup.

  import { define } from './dynamic-elements';
  define('[data-disclosure]', (el) => new Disclosure(el));

- Elements already in the DOM are set up on DOMContentLoaded (or straight
  away if that has passed).
- A MutationObserver sets up elements added later, checking each added node
  and its descendants.
- Each element is set up once per selector, so one element can match several.
- `disconnected` runs when a set-up element leaves the DOM (not when it's
  moved), and the element is set up again if it comes back.

Delay calling `fn` until `wait` ms have passed without another call.

  window.addEventListener('resize', debounce(measure, 150));

Keyboard-focusable elements inside a container, in DOM order. Skips
disabled, inert and hidden elements (checkVisibility covers display: none,
content-visibility and ancestors).

Read a boolean data attribute. Present means true (whatever the value),
except an explicit "false". Missing means the default.

  <div data-animate>                → true
  <div data-animate="false">        → false
  <div>                             → defaultValue

@param name - The dataset key, e.g. "disclosureAnimate" for data-disclosure-animate.

Minimal first-party cookie helpers. Names and values are URI-encoded, so
any string is safe to store.