Breakpoints

BREAKPOINTS: Readonly<Record<string, string>>
getBreakpoints(): Record<string, string>
setBreakpoints(next: Record<string, string>): void

The named breakpoint set is the single source of truth for every responsive spelling in the framework.

• The defaults
• Replacing them
• The values are in rem
• What uses them
• What it costs
• There is no defineFeatures()

The defaults

import { BREAKPOINTS, getBreakpoints } from '@studiometa/js-toolkit';

getBreakpoints(); // the current set
BREAKPOINTS; // the defaults

Name	Min width
xxs	0rem
xs	30rem
s	48rem
m	64rem
l	80rem
xl	90rem
xxl	120rem
xxxl	160rem

These are the names every data-component:<name> and data-option-<x>:<name> suffix is checked against.

Replacing them

import { setBreakpoints } from '@studiometa/js-toolkit';

setBreakpoints({
  xs: '0rem',
  s: '48rem',
  m: '64rem',
  l: '80rem',
  xl: '96rem',
});

setBreakpoints() is the single source of breakpoint truth, and calling it does three things at once:

1. rebuilds the scoped attribute names — every data-component:<name> and every data-option-<x>:<name> spelling;
2. replaces that slice of the observer's attributeFilter, draining the records of the previous filter first;
3. emits at once on useBreakpoint(), so a subscriber sees the new active name immediately.

The values are in rem

And in a media query, rem resolves against the initial font size, not against the root element. That is deliberate: a breakpoint that moved when a component changed the root font size would not be a breakpoint.

What uses them

Feature	How
responsive options	data-option-x:<name>, cascading upwards
responsive components	data-component:<name>, replacing not merging
useBreakpoint()	the active name, as a service

A suffix that names no configured breakpoint gives one responsive.unknown-breakpoint warning and is ignored — including the v3 list syntax :xxs:xs:s.

What it costs

• The MediaQueryList objects are built once.
• The active name is memoised for the length of one task, through utils/memo. setBreakpoints() and the change handler of a running service clear that memo at once.
• A matchMedia subscription opens only for a component that declares option<Name>Changed(); connected elements with a scoped data-component share one reference-counted subscription. A page with plain declarations and read-only options opens none.

The breakpoint service is part of the core graph on every page. What a page pays is the subscriptions it asks for.

The defaults and Tailwind

The current default breakpoints are not aligned with @studiometa/tailwind-config. That alignment is a separate product decision. Call setBreakpoints() to match your own scale.

There is no defineFeatures()

Breakpoints are the one configurable feature, and setBreakpoints() is it. Attribute names and the attribute prefix are not configurable.