Not applicable: Build time; works without JavaScript.
empty
A Questions section without ### questions is left as is.
error
Not applicable: No data.
current
Not applicable: No current item.
visited
Not applicable: Not links.
expanded
Open: the answer shows and the marker turns.
Tokens
Part
Token
item.rule
--rule-hair --line
summary.font
--type-strong
--faq-list-border-top-rule
var(--rule)
--faq-list-border-top-ink
var(--ink)
--faq-list-border-bottom-rule-hair
var(--rule-hair)
--faq-list-border-bottom-line
var(--line)
--faq-list-gap-space-6
var(--space-6)
--faq-list-padding-space-6
var(--space-6)
--faq-list-font-type-strong
var(--type-strong)
--faq-list-font-family-font-display
var(--font-display)
--faq-list-font-type-h3
var(--type-h3)
--faq-list-transition-dur-moderate
var(--dur-moderate)
--faq-list-transition-ease-standard
var(--ease-standard)
--faq-list-padding-bottom-space-6
var(--space-6)
Layout
Aspect
Value
breakpoints
Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; columns stack under 768 px; the wrap keeps a 16 px gutter on phones.
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-5 per item.
external
In the prose column.
rhythm
After the Questions heading.
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
question
15 words
As the reader would ask it
Good: “Do you change how our components look?”
Bad: “Pricing info”
Japanese: よくある質問
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
None.
Usage
9 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.