Not applicable: Every entry links to a heading on the page.
loading
Not applicable: Build time.
empty
Fewer than three sections: nothing is rendered.
error
Not applicable: No data that can fail.
current
Not applicable: No scroll spy: the list does not change as you scroll.
visited
Not applicable: In-page links.
expanded
Not applicable: Does not open.
Tokens
Part
Token
title.font
--type-eyebrow
link.color
--ink-2
--contents-top-header-h
var(--header-h)
--contents-top-space-9
var(--space-9)
--contents-font-type-label
var(--type-label)
--contents-margin-bottom-space-6
var(--space-6)
--contents-border-left-line
var(--line)
--contents-padding-space-3
var(--space-3)
--contents-padding-space-6
var(--space-6)
--contents-margin-left-space-2
var(--space-2)
--contents-font-size-fs-small
var(--fs-small)
--contents-color-ink-2
var(--ink-2)
--contents-color-ink
var(--ink)
--contents-border-left-color-indigo
var(--indigo)
--contents-font-type-strong
var(--type-strong)
--contents-border-left-color-thread
var(--thread)
Layout
Aspect
Value
breakpoints
Checked at 390, 768, 1024 and 1440 px; a sticky side column from 1024 px, above the text below it.
wrapping
Text wraps; nothing scrolls sideways.
textExpansion
Japanese runs 20 to 40% longer; headings break between phrases (jaBreaks) and blocks grow downwards.
Spacing and rhythm
Aspect
Value
internal
--space-3 between entries.
external
In the page grid's side column.
rhythm
Beside the prose.
Motion
Aspect
Value
None
No intrinsic element animation. The optional claude-entrance consumer profile may translate below-fold structure once (20px, --dur-weave, --ease-enter, --stagger); reduced motion disables it. This preserved baseline entrance is separate from element playback.
Runtime and reuse
Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
Aspect
Value
role
a landmark or list, as stated in its parts
name
Its visible text
keyboard
Links and buttons inside, in reading order.
focus
The --focus ring on every link and button inside.
screenReader
Read in source order; decorative weaving is aria-hidden.
contrast
Ink on cotton 14:1; text on every dye field 4.5:1 or better (checked by check-brand).
target
Links and buttons are 44 px tall.
Content
Slot
Length
Voice
entry
The heading's text
As written
Good: “On this page”
Bad: “TOC”
Japanese: このページの内容
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
None.
Usage
49 uses across the built pages (measured by npm run site:system).
Tests
Aspect
Value
unit
tests/unit/site-system.test.ts: renders every do and don't example through the registry and checks the classes it owns
visual
Not yet: there are no screenshot baselines; the Library page is checked for sideways scroll at 1440 px by tests/site/system.spec.ts
a11y
tests/site/system.spec.ts: axe (0 serious or critical) on the element's Library page in light and dark
parity
scripts/site/system/check.ts: Library examples are rendered by the same render function the site imports
Figma
not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.