One layer of the Library as a grid of cards, each with a live thumbnail rendered by the element's own module, its name, lifecycle, matrix score and purpose.
Organism · stable · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Not applicable: The library grid is not interactive, so it has no hover state.
focus-visible
Not applicable: The library grid does not take focus; links and buttons inside it carry their own focus ring.
active
Not applicable: The library grid cannot be pressed.
disabled
Not applicable: The library grid has nothing to disable.
loading
Not applicable: The library grid is rendered at build time and is complete when the page loads.
empty
Not applicable: The library grid is not rendered without content; the builder skips it.
error
Not applicable: The library grid shows no data that can fail.
current
Not applicable: The library grid has no current item.
visited
Not applicable: The library grid is not a link.
expanded
When more than six cards are supplied, native details.lib-more opens the remaining cards through its summary. Enter or Space toggles it; the same disclosure works without JavaScript.
Tokens
Part
Token
card.ground
--surface
card.rule
--rule (top) in --ink
thumb.ground
--cotton
meta.font
--type-label
gap
--space-6
--library-grid-margin-block-space-9
var(--space-9)
--library-grid-gap-space-4
var(--space-4)
--library-grid-gap-space-6
var(--space-6)
--library-grid-gap-space-3
var(--space-3)
--library-grid-padding-space-5
var(--space-5)
--library-grid-background-surface
var(--surface)
--library-grid-border-block-start-rule
var(--rule)
--library-grid-border-block-start-ink
var(--ink)
--library-grid-font-type-h3
var(--type-h3)
--library-grid-color-ink
var(--ink)
--library-grid-font-type-small
var(--type-small)
--library-grid-color-ink-2
var(--ink-2)
--library-grid-font-type-label
var(--type-label)
--library-grid-background-cotton
var(--cotton)
--library-grid-border-rule-hair
var(--rule-hair)
--library-grid-border-line
var(--line)
--library-grid-padding-space-9
var(--space-9)
--library-grid-margin-block-start-space-6
var(--space-6)
--library-grid-font-type-small-strong
var(--type-small-strong)
--library-grid-padding-block-space-4
var(--space-4)
--library-grid-gap-space-5
var(--space-5)
Layout
Aspect
Value
breakpoints
Checked at 390, 768, 1024 and 1440 px; one column under 600 px, then auto-fill columns of at least 260 px.
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-4 inside a card; --space-6 between cards.
external
--space-9 between layers.
rhythm
One grid per layer, in atomic order.
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
region (section) with a list of cards
name
Its h2
keyboard
One link per card; the thumbnail is inert, so it takes no focus.
focus
The --focus ring on each card's link.
screenReader
Reads the name, the meta line and the purpose; the thumbnail is inert and hidden from the accessibility tree.
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
purpose
1 sentence
What the element is for
Good: “Marks the reader's next step.”
Bad: “A reusable button component.”
Japanese: The Library is English only.
Icons and illustrations
None: this element uses no icon or illustration of its own.