Icon Gallery — YAML Spec Rendered

A live rendering of the icon-gallery-005 YAML spec by the Juris runtime, displayed on the proofs page. The upper portion shows the rendered web component: a dark-background glass-morphism grid of 42 icons drawn from mixed icon families (Tabler, Phosphor, Lucide, Nucleo UI, Lucide Lab, and more), each card color-coded by family using CSS variables.

What the spec declares — all in YAML, no hand-written component code:

• vars — static array of 42 family::name:variant icon keys
• forEachString — iterates the icon key array, destructuring each into item.family, item.name, item.variant
• Dynamic class composition — family-{{item.family}} drives per-family color theming via CSS custom properties
• data-is-selected attribute — expression {{selectedIcon==item}} drives selected card glow and checkmark badge
• setState with dataAttribute — reads the clicked card's data-icon-key rather than a hardcoded value
• proto-svg-icon web component — renders the selected icon at large scale in the detail panel below the grid
• State-reactive showToast and emitEvent actions — fire automatically on selectedIcon state change

The lower portion of the screenshot shows the proofs page scaffolding: State Variables panel, Actions list, and raw YAML source — the full spec visible alongside the running component.

Source spec: specs://icon-gallery