Responsive behavior

Named conditions

A condition is written once in the theme and emitted as a literal query, because var() cannot appear in a query. Thresholds are rem lengths, so they follow the reader’s font size.

Named conditions
Condition	Kind	Emitted as
`motion.reduced`	media	`@media (prefers-reduced-motion: reduce)`
`navigation.expanded`	container	`@container shell (min-inline-size: 48rem)`
`page.medium`	media	`@media (min-width: 40rem)`
`page.wide`	media	`@media (min-width: 64rem)`

Layout roles

Pages and recipes lay out with these roles. Below, the same items in a container as wide as layout.item-min and in one as wide as layout.measure.

Layout roles
Token	Value
`layout.gap`	`1rem`
`layout.inset`	`1.5rem`
`layout.item-min`	`16rem`
`layout.main-min`	`20rem`
`layout.measure`	`40rem`
`layout.sidebar-width`	`16rem`

layout.item-min: 16rem

layout.gap
layout.inset
layout.item-min
layout.main-min
layout.measure
layout.sidebar-width

layout.measure: 40rem

layout.gap
layout.inset
layout.item-min
layout.main-min
layout.measure
layout.sidebar-width

Profiles

A profile is a named set of role overrides. It never inspects or rewrites descendants: it declares custom properties where it applies, through data-odd-profile or a recipe condition, and they inherit.

Profiles in the default theme
Profile	Roles it sets
`navigation.compact`	navigation.indent, navigation.item.gap, navigation.item.padding.block, navigation.item.padding.inline
`layout.compact`	layout.gap, layout.inset

Keep concerns separate

Concerns kept apart
Concern	Mechanism	Must not
Responsive layout	Recipe conditions + profiles	Shrink text or targets automatically
Density	data-odd-density	Change font size
Typography preference	User agent / root font size	Be overridden by layout conditions
Interaction target size	Component roles with a documented minimum (WCAG 2.5.8 target size minimum as baseline)	Drop below the minimum in any profile or density

Components