Not applicable: The panel is not interactive, so it has no hover state.
focus-visible
Not applicable: The panel does not take focus; links and buttons inside it carry their own focus ring.
active
Not applicable: The panel cannot be pressed.
disabled
Not applicable: The panel has nothing to disable.
loading
Not applicable: The panel is rendered at build time and is complete when the page loads.
empty
Not applicable: The panel is not rendered without content; the builder skips it.
error
Not applicable: The panel shows no data that can fail.
current
Not applicable: The panel has no current item.
visited
Not applicable: The panel is not a link.
expanded
Not applicable: The panel does not open or close.
Tokens
Part
Token
panel.background
--surface
panel.border
--rule-hair --line
--panel-gap-space-5
var(--space-5)
--panel-padding-space-8
var(--space-8)
--panel-background-surface
var(--surface)
--panel-border-top-rule-frame
var(--rule-frame)
--panel-border-top-ink
var(--ink)
--panel-border-radius-radius
var(--radius)
--panel-card-rule-band-woven
var(--band-woven)
--panel-card-rule-band-holding
var(--band-holding)
--panel-card-rule-saffron
var(--saffron)
--panel-card-rule-band-loose
var(--band-loose)
--panel-font-type-h3
var(--type-h3)
--panel-letter-spacing-ls-h3
var(--ls-h3)
--panel-background-field-ink
var(--field-ink)
--panel-color-on-dye
var(--on-dye)
--panel-border-top-color-saffron
var(--saffron)
--panel-color-on-dye-2
var(--on-dye-2)
--panel-padding-space-7
var(--space-7)
--panel-padding-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-8 padding.
external
--space-7 between panels.
rhythm
One task per panel.
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
title
8 words
The task
Good: “How are tokens used?”
Bad: “Section 3”
Japanese: From the app's i18n tables.
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
None.
Usage
13 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.