Chapter 12 — The Reckoning
Every named character converges on the harbour at dawn; two do not walk away, and the map was upside-down the whole time.
Revealable#
Component <neo-revealable> is a spoiler that obscures children behind an animated grain veil until the user activates it (click, rehide-after ms and whenever the content is patched, important for server-driven UIs so a morph that swaps the secret never flashes it. While concealed the content is inert and aria-hidden, so the secret never leaks to assistive tech and focus can't enter it. Honours prefers-reduced-motion.
Default
Text spoiler
Image spoiler
Blurred image spoiler
Section spoiler
Custom styling
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Set/remove (or use the open JS property / reveal() / conceal() / toggle()) to control it. |
rehide-after | number | 0 | Milliseconds before auto re-conceal after a reveal. 0 or absent keeps it revealed until re-activated. |
variant | "inline" | "media" | none | Obscure treatment. Inferred from the host's height when absent (tall → media, short → inline). |
density | number | 1 | Particle-count multiplier, clamped 0.3–3. |
blur-content | boolean | false | Media variant only: tease the shape with a heavy blur instead of hiding it outright. No effect on text (already hidden — blurring it would just waste a composite). |
| Name | Description |
|---|---|
| default | The content to obscure: text, an image, or a whole subtree. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
neo-revealable-toggle | { open: boolean } | yes | Fires when the content is revealed or concealed; detail.open is the new state. Conceal also fires from the rehide-after timer and the content-patch auto-hide. |
| Name | Default | Description |
|---|---|---|
--neo-revealable-radius | var(--page-radius, 0.375rem) | Corner radius of the host and cover. |
--neo-revealable-blur | 14px | Blur radius applied to media content while concealed. |
--neo-revealable-veil | color-mix(in srgb, var(--page-fg) 26%, var(--page-bg)) | Frosted cover color. |
--neo-revealable-focus-ring | color-mix(in srgb, var(--accent) 45%, transparent) | Focus outline color. |
--neo-revealable-particle-color | currentColor | Grain color painted onto the cover canvas. |
Examples#
Text spoiler#
The default (inline) variant: fine grain in the element's own text colour, sized to the run. Once revealed it stays revealed; set rehide-after to auto-conceal.
One-shot reveal (no auto re-hide):
Image spoiler#
variant="media" lays a veil plus sparser particles over a block. Here rehide-after="4000" re-covers it 4s after reveal and after all interactions and focus are gone.
Blurred image spoiler#
blur-content keeps the image visible but heavily blurred, so the composition teases without giving the subject away, a softer mode than the fully-veiled image above.
Section spoiler#
Any subtree works. blur-content also blurs the hidden block, so the shape teases without giving the text away.
Chapter 12: The Reckoning
Every named character converges on the harbour at dawn; two do not walk away, and the map was upside-down the whole time.
Custom styling#
Cover and grain are CSS custom properties, not attributes. Override --neo-revealable-veil (panel background) and --neo-revealable-particle-color (grain) per instance via inline style, or theme-wide.
Classified: Operation Nightjar
Rendezvous at pier 9, 02:00. The asset answers to "Wren".