Widgets demo
Interactive widget components — tabs, accordion, and modal dialog —
styled through the frozen
astro-* vocabulary. All visual styles
resolve to --astro-* design tokens, so panel tweaks update them
live.
Tabs
Three-tab nav with animated sliding indicator. Uses
astro-tabs,
astro-tabs__list, astro-tabs__tab,
astro-tabs__panel. Interactive — mounted with client:visible.
Overview
Details
Settings
Overview panel. Indicator slides on
easing-tab-open (→ --astro-easing-tab-open).Accordion
Three expandable sections using native
<details>/<summary>.
Uses astro-accordion, astro-accordion__summary,
astro-accordion__body. No JavaScript — pure CSS progressive enhancement.
What is a design token? ▾
A design token is a named CSS custom property (e.g. --spacing-md: 1rem) that centralises a raw value behind a semantic name, making it easy to update globally.
Open timing:
easing-tab-open → --astro-easing-tab-open. Close timing: easing-tab-close → --astro-easing-tab-close.
How does the panel update tokens live? ▾
The panel writes :root overrides directly into the page via a <style> tag, so every class that references a --astro-* var picks up the new value before the next paint — no rebuild required.
Open timing:
easing-tab-open → --astro-easing-tab-open. Close timing: easing-tab-close → --astro-easing-tab-close.
Which easing tokens does this accordion use? ▾
The open transition uses easing-tab-open and the close transition uses easing-tab-close. Change either in the Easing tab of the panel to see the effect here.
Open timing:
easing-tab-open → --astro-easing-tab-open. Close timing: easing-tab-close → --astro-easing-tab-close.
Modal dialog
Native
<dialog> with open/close animation via
--astro-easing-modal. Closes on Escape or the close button.
Mounted with client:visible.