@excom/valence 0.1.0

package/support/package-meta.json

@@ -0,0 +1,1820 @@
+{
+  "shortName": "valence",
+  "package": {
+    "name": "@excom/valence",
+    "version": "0.1.0",
+    "description": "Semantic CSS with class / ARIA aliases for native HTML and custom elements",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "library"
+    }
+  },
+  "demos": {
+    "accordion": "<div>\n  <details open>\n    <summary>Plain accordion</summary>\n    <p>Content animates open and closed.</p>\n  </details>\n  <details>\n    <summary role=\"button\">Button summary</summary>\n    <p>A <code>summary[role=\"button\"]</code> is a full-width button.</p>\n  </details>\n  <details>\n    <summary role=\"button\" class=\"outline secondary\">Outline secondary</summary>\n    <p>Button flavors apply to summaries too.</p>\n  </details>\n  <x-disclosure class=\"tag-details\" open>\n    <span class=\"tag-summary\">Aliased accordion</span>\n    <p>Custom elements join in with <code>.tag-details</code> / <code>.tag-summary</code>.</p>\n  </x-disclosure>\n</div>\n",
+    "aliases": "<div>\n  <article>Native <code>&lt;article&gt;</code></article>\n  <div role=\"article\">Role alias <code>[role=\"article\"]</code></div>\n  <x-panel class=\"tag-article\">Class alias on a custom element <code>.tag-article</code></x-panel>\n  <x-action class=\"tag-button\">.tag-button</x-action>\n</div>\n",
+    "button": "<div>\n  <button>Primary</button>\n  <button class=\"secondary\">Secondary</button>\n  <button class=\"contrast\">Contrast</button>\n  <button class=\"outline\">Outline</button>\n  <button class=\"outline secondary\">Outline secondary</button>\n  <button class=\"outline contrast\">Outline contrast</button>\n  <button disabled>Disabled</button>\n  <button aria-busy=\"true\">Busy</button>\n  <x-action class=\"tag-button\">Custom element</x-action>\n  <style>\n    #demo-valence-button > :first-child > * { margin: 0 0.25rem 0.5rem 0; }\n  </style>\n</div>\n",
+    "card": "<article>\n  <header>Header</header>\n  <p>Cards are <code>article</code>s: padding, radius and shadow come from <code>--v-card-*</code>.</p>\n  <article class=\"nested\">\n    <p>A <code>.nested</code> card sits quietly inside another.</p>\n  </article>\n  <footer>Footer</footer>\n</article>\n",
+    "checkboxes": "<form>\n  <fieldset>\n    <legend>Checkboxes</legend>\n    <label><input type=\"checkbox\" checked /> Checked</label>\n    <label><input type=\"checkbox\" id=\"demo-indeterminate\" /> Indeterminate</label>\n    <label><input type=\"checkbox\" disabled /> Disabled</label>\n  </fieldset>\n  <fieldset>\n    <legend>Radios</legend>\n    <label><input type=\"radio\" name=\"r\" checked /> One</label>\n    <label><input type=\"radio\" name=\"r\" /> Two</label>\n  </fieldset>\n  <fieldset>\n    <legend>Switches</legend>\n    <label><input type=\"checkbox\" role=\"switch\" checked /> On</label>\n    <label><input type=\"checkbox\" role=\"switch\" /> Off</label>\n    <label><input type=\"checkbox\" role=\"switch\" aria-invalid=\"true\" checked /> Invalid</label>\n  </fieldset>\n  <script type=\"module\">\n    document.getElementById(\"demo-indeterminate\").indeterminate = true;\n  </script>\n</form>\n",
+    "code": "<div>\n  <p>Inline <code>code</code>, keyboard <kbd>⌘</kbd> <kbd>K</kbd> and sample output <samp>ok</samp>.</p>\n  <pre><code>&lt;article class=\"tag-article\"&gt;\n  Aliased card\n&lt;/article&gt;</code></pre>\n</div>\n",
+    "container": "<div>\n  <div class=\"container\">\n    <p><code>.container</code> — centered, max-width per breakpoint</p>\n  </div>\n  <div class=\"container-fluid\">\n    <p><code>.container-fluid</code> — full width, padding only</p>\n  </div>\n  <style>\n    #demo-valence-container > :first-child > div {\n      margin-bottom: var(--v-spacing);\n      border: 1px dashed var(--v-muted-color);\n      p { margin: 0; padding: var(--v-spacing) 0; }\n    }\n  </style>\n</div>\n",
+    "css-variables": "<section>\n  <button>Themed button</button>\n  <a href=\"#\">Themed link</a>\n  <style>\n    #demo-valence-css-variables > :first-child {\n      --v-primary: #7c3aed;\n      --v-primary-background: #7c3aed;\n      --v-primary-hover: #5b21b6;\n      --v-primary-hover-background: #6d28d9;\n      --v-primary-underline: rgba(124, 58, 237, 0.5);\n      --v-border-radius: 2rem;\n    }\n  </style>\n</section>\n",
+    "dropdown": "<div>\n  <details class=\"dropdown\">\n    <summary>Choose a planet…</summary>\n    <ul>\n      <li><a href=\"#\">Mercury</a></li>\n      <li><a href=\"#\">Venus</a></li>\n      <li><a href=\"#\">Earth</a></li>\n    </ul>\n  </details>\n  <details class=\"dropdown\">\n    <summary role=\"button\">Button dropdown</summary>\n    <ul>\n      <li><label><input type=\"checkbox\" checked /> Rings</label></li>\n      <li><label><input type=\"checkbox\" /> Moons</label></li>\n    </ul>\n  </details>\n</div>\n",
+    "embedded": "<figure>\n  <svg viewBox=\"0 0 320 120\" role=\"img\" aria-label=\"Placeholder image\" style=\"width: 100%; background: var(--v-card-sectioning-background-color); border-radius: var(--v-border-radius)\">\n    <circle cx=\"60\" cy=\"60\" r=\"36\" fill=\"var(--v-primary)\" />\n    <rect x=\"130\" y=\"30\" width=\"150\" height=\"60\" rx=\"8\" fill=\"var(--v-secondary)\" />\n  </svg>\n  <figcaption>Media is responsive and middle-aligned; <code>figcaption</code> is muted.</figcaption>\n</figure>\n",
+    "forms": "<form>\n  <label>\n    Email\n    <input type=\"email\" name=\"email\" placeholder=\"you@example.com\" autocomplete=\"email\" />\n  </label>\n  <label>\n    Password\n    <input type=\"password\" name=\"password\" aria-invalid=\"true\" />\n    <small>At least 8 characters.</small>\n  </label>\n  <fieldset>\n    <legend>Plan</legend>\n    <label><input type=\"radio\" name=\"plan\" value=\"free\" checked /> Free</label>\n    <label><input type=\"radio\" name=\"plan\" value=\"pro\" /> Pro</label>\n  </fieldset>\n  <label><input type=\"checkbox\" name=\"terms\" /> I agree to the terms</label>\n  <button type=\"submit\">Sign up</button>\n</form>\n",
+    "grid": "<div class=\"grid\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <style>\n    #demo-valence-grid > :first-child > div {\n      padding: var(--v-spacing);\n      text-align: center;\n      border: 1px dashed var(--v-muted-color);\n      border-radius: var(--v-border-radius);\n    }\n  </style>\n</div>\n",
+    "group": "<form>\n  <fieldset role=\"group\">\n    <input type=\"email\" placeholder=\"Email\" aria-label=\"Email\" autocomplete=\"email\" />\n    <button type=\"submit\">Subscribe</button>\n  </fieldset>\n  <fieldset role=\"search\">\n    <input type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />\n    <button type=\"submit\">Go</button>\n  </fieldset>\n  <fieldset role=\"group\">\n    <input type=\"text\" placeholder=\"Domain\" aria-label=\"Domain\" />\n    <label><input type=\"checkbox\" role=\"switch\" checked /> HTTPS</label>\n  </fieldset>\n</form>\n",
+    "input": "<form>\n  <input type=\"text\" placeholder=\"Text\" aria-label=\"Text\" />\n  <input type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />\n  <input type=\"date\" aria-label=\"Date\" />\n  <input type=\"text\" value=\"Valid\" aria-invalid=\"false\" aria-label=\"Valid\" />\n  <input type=\"text\" value=\"Invalid\" aria-invalid=\"true\" aria-label=\"Invalid\" />\n  <input type=\"text\" value=\"Read-only\" readonly aria-label=\"Read-only\" />\n  <input type=\"text\" value=\"Disabled\" disabled aria-label=\"Disabled\" />\n  <input type=\"file\" aria-label=\"File\" />\n  <input type=\"color\" value=\"#0172ad\" aria-label=\"Color\" />\n</form>\n",
+    "landmarks": "<div>\n  <section>\n    <hgroup>\n      <h4>First section</h4>\n      <p>Sections space themselves vertically</p>\n    </hgroup>\n  </section>\n  <section>\n    <hgroup>\n      <h4>Second section</h4>\n      <p><code>--v-block-spacing-vertical</code> grows with the viewport</p>\n    </hgroup>\n  </section>\n  <style>\n    #demo-valence-landmarks > :first-child section {\n      border: 1px dashed var(--v-muted-color);\n      padding: var(--v-spacing);\n    }\n  </style>\n</div>\n",
+    "link": "<p>\n  <a href=\"#\">Primary</a> ·\n  <a href=\"#\" class=\"secondary\">Secondary</a> ·\n  <a href=\"#\" class=\"contrast\">Contrast</a> ·\n  <a href=\"#\" aria-current=\"page\">Current</a> ·\n  <a href=\"#\" role=\"button\">Link as button</a>\n</p>\n",
+    "loading": "<div>\n  <button aria-busy=\"true\">Saving…</button>\n  <button class=\"secondary outline\" aria-busy=\"true\"></button>\n  <article aria-busy=\"true\">Loading the card…</article>\n</div>\n",
+    "modal": "<div>\n  <event-handler target-ref=\":scope ~ dialog\" command-name=\"show-modal\" class=\"tag-button\">Open modal</event-handler>\n  <dialog>\n    <article>\n      <header>\n        <event-handler target-ref=\":scope ~ dialog, dialog:has(:scope)\" command-name=\"close\" class=\"tag-button\" rel=\"prev\" aria-label=\"Close\"></event-handler>\n        <h5>Confirm</h5>\n      </header>\n      <p>A <code>dialog</code> centers its <code>article</code>; the header close control and the footer buttons are styled for you.</p>\n      <footer>\n        <form method=\"dialog\">\n          <button class=\"secondary\">Cancel</button>\n          <button>Confirm</button>\n        </form>\n      </footer>\n    </article>\n  </dialog>\n</div>\n",
+    "nav": "<div>\n  <nav>\n    <ul>\n      <li><strong>Brand</strong></li>\n    </ul>\n    <ul>\n      <li><a href=\"#\">Docs</a></li>\n      <li><a href=\"#\" aria-current=\"page\">Blog</a></li>\n      <li>\n        <details class=\"dropdown\">\n          <summary>More</summary>\n          <ul dir=\"rtl\">\n            <li><a href=\"#\">About</a></li>\n            <li><a href=\"#\">Contact</a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n  </nav>\n  <nav aria-label=\"breadcrumb\">\n    <ul>\n      <li><a href=\"#\">Home</a></li>\n      <li><a href=\"#\">Docs</a></li>\n      <li><a href=\"#\" aria-current=\"page\">Nav</a></li>\n    </ul>\n  </nav>\n  <aside>\n    <nav>\n      <ul role=\"tree\">\n        <li><a href=\"#\" aria-current=\"page\">Getting started</a></li>\n        <li><a href=\"#\">Layout</a>\n          <ul role=\"tree\">\n            <li><a href=\"#\">Grid</a></li>\n          </ul>\n        </li>\n      </ul>\n    </nav>\n  </aside>\n</div>\n",
+    "opt-outs": "<div>\n  <button>Styled</button>\n  <button class=\"unstyled\">Unstyled (browser default)</button>\n  <article class=\"unstyled-all\">\n    <p>This card and everything inside it is left to the browser.</p>\n    <button>Native button</button>\n  </article>\n</div>\n",
+    "overflow-auto": "<div class=\"overflow-auto\">\n  <table>\n    <thead>\n      <tr><th>Planet</th><th>Diameter (km)</th><th>Distance from Sun (10⁶ km)</th><th>Orbital period (days)</th><th>Moons</th></tr>\n    </thead>\n    <tbody>\n      <tr><td>Mercury</td><td>4,879</td><td>57.9</td><td>88</td><td>0</td></tr>\n      <tr><td>Venus</td><td>12,104</td><td>108.2</td><td>224.7</td><td>0</td></tr>\n      <tr><td>Earth</td><td>12,756</td><td>149.6</td><td>365.2</td><td>1</td></tr>\n    </tbody>\n  </table>\n</div>\n",
+    "popover": "<p>\n  <button popovertarget=\"demo-valence-pop-top\" popovertargetaction=\"toggle\">Top</button>\n  <div id=\"demo-valence-pop-top\" popover>Anchored above the button.</div>\n  <button popovertarget=\"demo-valence-pop-bottom\" class=\"secondary\">Bottom</button>\n  <div id=\"demo-valence-pop-bottom\" popover data-placement=\"bottom\">Anchored below the button.</div>\n</p>\n",
+    "progress": "<div>\n  <progress value=\"35\" max=\"100\"></progress>\n  <progress></progress>\n</div>\n",
+    "range": "<form>\n  <label>\n    Brightness\n    <input type=\"range\" min=\"0\" max=\"100\" value=\"40\" />\n  </label>\n</form>\n",
+    "schemes": "<div>\n  <article data-scheme=\"light\">\n    <h4>Light</h4>\n    <p>Forced with <code>data-scheme=\"light\"</code>.</p>\n    <button>Primary</button>\n  </article>\n  <article data-scheme=\"dark\">\n    <h4>Dark</h4>\n    <p>Forced with <code>data-scheme=\"dark\"</code>.</p>\n    <button>Primary</button>\n  </article>\n</div>\n",
+    "select": "<form>\n  <select name=\"planet\" aria-label=\"Planet\" required>\n    <option selected disabled value=\"\">Select a planet…</option>\n    <option>Mercury</option>\n    <option>Venus</option>\n    <option>Earth</option>\n  </select>\n  <select name=\"moons\" aria-label=\"Moons\" multiple size=\"3\">\n    <option selected>Luna</option>\n    <option>Phobos</option>\n    <option>Deimos</option>\n  </select>\n</form>\n",
+    "table": "<table class=\"striped\">\n  <thead>\n    <tr>\n      <th scope=\"col\" aria-sort=\"ascending\">Planet</th>\n      <th scope=\"col\" aria-sort=\"none\">Diameter</th>\n      <th scope=\"col\">Moons</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr><th scope=\"row\">Mercury</th><td>4,879 km</td><td>0</td></tr>\n    <tr><th scope=\"row\">Venus</th><td>12,104 km</td><td>0</td></tr>\n    <tr><th scope=\"row\">Earth</th><td>12,756 km</td><td>1</td></tr>\n    <tr><th scope=\"row\">Mars</th><td>6,792 km</td><td>2</td></tr>\n  </tbody>\n  <tfoot>\n    <tr><th scope=\"row\">Total</th><td></td><td>3</td></tr>\n  </tfoot>\n</table>\n",
+    "textarea": "<form>\n  <label>\n    Message\n    <textarea name=\"message\" placeholder=\"Write something…\" rows=\"3\"></textarea>\n    <small>Resizes vertically.</small>\n  </label>\n</form>\n",
+    "tooltip": "<p>\n  <span role=\"tooltip\" aria-description=\"Shown above by default\">Hover me</span>\n  ·\n  <button role=\"tooltip\" aria-description=\"Placed below\" data-placement=\"bottom\">Bottom</button>\n  ·\n  <a href=\"#\" role=\"tooltip\" aria-description=\"To the right\" data-placement=\"right\">Right</a>\n</p>\n",
+    "typography": "<div>\n  <hgroup>\n    <h3>Heading group</h3>\n    <p>The last child of an <code>hgroup</code> is muted</p>\n  </hgroup>\n  <p>A paragraph with <strong>strong</strong>, <em>emphasis</em>, <mark>mark</mark>, <ins>ins</ins>, <del>del</del>, <abbr title=\"Accessible Rich Internet Applications\">ARIA</abbr>, <kbd>Ctrl</kbd> and <code>code</code>.</p>\n  <ul>\n    <li>Square markers on <code>ul</code></li>\n    <li>Nested lists keep their spacing\n      <ul><li>like this one</li></ul>\n    </li>\n  </ul>\n  <blockquote>\n    Valence.css is a lightly modified fork of Pico.\n    <footer><cite>— the README</cite></footer>\n  </blockquote>\n  <small role=\"note\">A <code>small[role=\"note\"]</code> is a block-level muted note.</small>\n</div>\n"
+  },
+  "readme": "<h1 id=\"md-valence-css\">Valence.css</h1>\n<p>Classless CSS that still loves your custom elements — Pico&#39;s elegance, remixed for the modern web.</p>\n<p>Valence.css is a lightly modified fork of the excellent <a href=\"https://picocss.com\">Pico CSS</a>. Pico styles are tightly bound to native tag names (<code>article</code>, <code>button</code>, …), which custom elements cannot reuse. Valence.css keeps Pico&#39;s look and adds:</p>\n<ul>\n<li><strong>Tag aliases</strong> — <code>@custom-selector</code> synonyms so <code>[role=&quot;…&quot;]</code> / <code>.tag-*</code> (and custom element tags) share the same semantic styles</li>\n<li><strong>Opt-outs</strong> — <code>.unstyled</code> / <code>.unstyled-all</code> (and <code>.unanimated*</code>) for document flexibility where framework styles would fight you</li>\n<li><strong>Drop-in themes</strong> — <code>basic</code> (Pico-faithful) ships today; further themes share the same tokens so they can be swapped without touching markup. Light/dark is a <em>scheme</em> (<code>[data-scheme]</code>)</li>\n<li><strong>Molecules</strong> — cards, dropdowns, modals (<code>dialog::backdrop</code> / <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code>), nav, progress, and native <code>[popover]</code> styles on top of Pico&#39;s element styles</li>\n<li><strong>Tokens</strong> — <code>--pico-*</code> renamed to <code>--v-*</code> for a clear Valence.css namespace</li>\n</ul>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Semantic tag aliases</strong> Style <code>article</code>, <code>dialog</code>, <code>button</code>, … — the same rules apply to the <code>[role=&quot;…&quot;]</code> / <code>.tag-*</code> forms</li>\n<li><strong>Custom-element friendly</strong> <code>class=&quot;tag-article&quot;</code> on any host inherits Valence.css styles without rewriting selectors</li>\n<li><strong>Drop-in themes</strong> <code>basic</code> (Pico-flavor) ships; further themes share the same tokens. Scheme via <code>[data-scheme=&quot;light|dark&quot;]</code></li>\n<li><strong>Opt-outs</strong> <code>.unstyled</code> / <code>.unstyled-all</code> (and motion: <code>.unanimated*</code>)</li>\n<li><strong>Molecules</strong> Cards, dropdowns, modals (<code>dialog::backdrop</code> / <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code>), nav, progress, popovers, tooltips</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Import a theme entry (CSS). Prefer aliases when styling custom elements.</p>\n<include-content data-language=\"css\"><template>@import \"@excom/valence/basic.css\";</template></include-content>\n<include-content data-language=\"html\"><template>&lt;article&gt;Native card&lt;/article&gt;\n&lt;event-handler class=\"tag-article\"&gt;Aliased card&lt;/event-handler&gt;\n&lt;button class=\"outline secondary\"&gt;Outline&lt;/button&gt;</template></include-content>\n<h3 id=\"md-documentation\">Documentation</h3>\n<p>Getting started</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/schemes\" role=\"link\">Color schemes</spa-a> — automatic light / dark, <code>data-scheme</code></li>\n<li><spa-a route-href=\"/nucleus/packages/valence/aliases\" role=\"link\">Aliases</spa-a> — tag, role and <code>.tag-*</code> forms of every alias; custom elements</li>\n<li><spa-a route-href=\"/nucleus/packages/valence/opt_outs\" role=\"link\">Opt-outs</spa-a> — <code>.unstyled</code>, <code>.unanimated</code>, <code>.abstract</code></li>\n</ul>\n<p>Customization</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/css_variables\" role=\"link\">CSS variables</spa-a> — the <code>--v-*</code> tokens</li>\n<li><spa-a route-href=\"/nucleus/packages/valence/themes\" role=\"link\">Themes &amp; layers</spa-a> — entries, <code>@layer</code> strategy, mixins for element authors</li>\n</ul>\n<p>Layout</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/container\" role=\"link\">Container</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/landmarks\" role=\"link\">Landmarks &amp; section</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/grid\" role=\"link\">Grid</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/overflow_auto\" role=\"link\">Overflow auto</spa-a></li>\n</ul>\n<p>Content</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/typography\" role=\"link\">Typography</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/link\" role=\"link\">Link</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/button\" role=\"link\">Button</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/table\" role=\"link\">Table</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/code\" role=\"link\">Code</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/embedded\" role=\"link\">Embedded content</spa-a></li>\n</ul>\n<p>Forms</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/input\" role=\"link\">Input</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/textarea\" role=\"link\">Textarea</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/select\" role=\"link\">Select</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/checkboxes\" role=\"link\">Checkboxes, radios &amp; switches</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/range\" role=\"link\">Range</spa-a></li>\n</ul>\n<p>Components</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/accordion\" role=\"link\">Accordion</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/card\" role=\"link\">Card</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/dropdown\" role=\"link\">Dropdown</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/group\" role=\"link\">Group</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/loading\" role=\"link\">Loading</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/modal\" role=\"link\">Modal</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/nav\" role=\"link\">Nav</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/popover\" role=\"link\">Popover</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/progress\" role=\"link\">Progress</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/tooltip\" role=\"link\">Tooltip</spa-a></li>\n</ul>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n",
+  "docs": {
+    "accordion": "<h1 id=\"md-accordion\">Accordion</h1>\n<p><code>details</code> / <code>summary</code> is the accordion: a chevron marker, animated content, and a <code>summary[role=&quot;button&quot;]</code> variant.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"accordion\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;details&gt;\n  &lt;summary&gt;Title&lt;/summary&gt;\n  &lt;p&gt;Content&lt;/p&gt;\n&lt;/details&gt;\n&lt;details&gt;\n  &lt;summary role=\"button\" class=\"outline secondary\"&gt;Button summary&lt;/summary&gt;\n  &lt;p&gt;Content&lt;/p&gt;\n&lt;/details&gt;</template></include-content>\n<ul>\n<li>The content (<code>::details-content</code>) animates height and opacity on open / close (<code>interpolate-size</code>; instant under reduced motion).</li>\n<li><code>summary[role=&quot;button&quot;]</code> is a full-width button and takes every <spa-a route-href=\"/nucleus/packages/valence/button\" role=\"link\">button</spa-a> flavor.</li>\n<li>Open state is <code>:--details--open</code>: <code>[open]</code> or <code>aria-expanded=&quot;true&quot;</code>, so a custom disclosure element reflecting ARIA gets the rotated marker and colors.</li>\n</ul>\n<h2 id=\"md-aliases\">Aliases</h2>\n<p><code>.tag-details</code> / <code>.tag-summary</code> (<code>details</code> has no ARIA role; <code>summary</code>&#39;s implicit role is <code>button</code>, deliberately not aliased to avoid colliding with <code>:--button</code>). A <spa-a route-href=\"/nucleus/packages/valence/dropdown\" role=\"link\">dropdown</spa-a> is an accordion with <code>.dropdown</code>.</p>\n",
+    "aliases": "<h1 id=\"md-aliases\">Aliases</h1>\n<p>Every Valence.css tag alias is a <code>@custom-selector</code> that matches the native tag, its ARIA role and an <code>.tag-*</code> class — so a custom element or a plain <code>div</code> can wear any semantic style.</p>\n<h2 id=\"md-three-ways-to-match\">Three ways to match</h2>\n<p><code>:--article</code> expands to <code>article, [role=&quot;article&quot;], .tag-article</code>. Pico ties its styles to tag names, which custom elements cannot reuse; Valence.css adds the role and class forms to every tag alias:</p>\n<p><include-content data-demo=\"aliases\"></include-content></p>\n<table>\n<thead>\n<tr>\n<th>Alias</th>\n<th>Matches</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>:--article</code></td>\n<td><code>article</code>, <code>[role=&quot;article&quot;]</code>, <code>.tag-article</code></td>\n</tr>\n<tr>\n<td><code>:--button</code></td>\n<td><code>button</code>, <code>[role=&quot;button&quot;]</code>, <code>[type=&quot;button&quot;]</code>, <code>.tag-button</code></td>\n</tr>\n<tr>\n<td><code>:--details</code> / <code>:--summary</code></td>\n<td><code>details</code> / <code>summary</code>, <code>.tag-details</code> / <code>.tag-summary</code></td>\n</tr>\n<tr>\n<td><code>:--dialog</code></td>\n<td><code>dialog</code>, <code>[role=&quot;dialog&quot;]</code>, <code>.tag-dialog</code></td>\n</tr>\n<tr>\n<td><code>:--nav</code>, <code>:--list</code>, <code>:--li</code></td>\n<td><code>nav</code> / <code>[role=&quot;navigation&quot;]</code>, <code>ul</code> / <code>ol</code> / <code>[role=&quot;list&quot;]</code>, <code>li</code> / <code>[role=&quot;listitem&quot;]</code></td>\n</tr>\n<tr>\n<td><code>:--table</code>, <code>:--tr</code>, <code>:--th</code>, <code>:--td</code></td>\n<td>tags, <code>[role=&quot;table&quot;]</code> / <code>&quot;row&quot;</code> / <code>&quot;columnheader&quot;</code> / <code>&quot;cell&quot;</code>, <code>[scope]</code></td>\n</tr>\n<tr>\n<td><code>:--heading</code>, <code>:--h1</code> … <code>:--h6</code></td>\n<td><code>h1</code>…<code>h6</code>, <code>[role=&quot;heading&quot;][aria-level]</code></td>\n</tr>\n</tbody></table>\n<p>The full list is in the <em>API Reference</em> on the <spa-a route-href=\"/nucleus/packages/valence#md-api-reference\" role=\"link\">package page</spa-a> (<em>CSS aliases</em>). Prefer the role form when the element genuinely has that role (screen readers benefit too); use <code>.tag-*</code> when it does not.</p>\n<h2 id=\"md-state-aliases\">State aliases</h2>\n<p>States are <code>:--{element}--{state}</code> and match ARIA as well as native state: <code>:--details--open</code> is <code>[open], [aria-expanded=&quot;true&quot;]</code>; <code>:--button--disabled</code> is <code>[disabled], [aria-disabled=&quot;true&quot;]</code>; <code>:--progress--value</code> is <code>[value], [aria-valuenow]</code>. A custom element that reflects <code>aria-expanded</code> gets the open styling for free.</p>\n<h2 id=\"md-custom-elements\">Custom elements</h2>\n<ul>\n<li>Put the tag alias class on the host (<code>&lt;content-drawer class=&quot;tag-article&quot;&gt;</code>) — styles apply without the element knowing Valence.css exists.</li>\n<li>Elements with a shadow root inherit the tokens through <code>:host</code>; only the tokens cross the boundary, the rules do not.</li>\n<li><code>.abstract</code> (<code>display: contents</code>) lets a wrapper element sit between a parent and the children a rule expects (<code>article &gt; header</code>): see <spa-a route-href=\"/nucleus/packages/valence/opt_outs\" role=\"link\">Opt-outs</spa-a>.</li>\n</ul>\n<h2 id=\"md-not-aliased\">Not aliased</h2>\n<p>Inimitable natives — <code>input</code>, <code>textarea</code>, <code>select</code> — have no alias; style a wrapper or use the native control. Pseudo-elements cannot be aliased (<code>postcss-custom-selectors</code> wraps in <code>:is()</code>), which is why the modal backdrop is a sibling element for custom hosts (see <spa-a route-href=\"/nucleus/packages/valence/modal\" role=\"link\">Modal</spa-a>).</p>\n",
+    "button": "<h1 id=\"md-button\">Button</h1>\n<p>Buttons come in primary, <code>.secondary</code> and <code>.contrast</code>, each with an <code>.outline</code> variant, and the same styles apply to any <code>[role=&quot;button&quot;]</code> or <code>.tag-button</code> element.</p>\n<h2 id=\"md-flavors\">Flavors</h2>\n<p><include-content data-demo=\"button\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;button&gt;Primary&lt;/button&gt;\n&lt;button class=\"secondary\"&gt;Secondary&lt;/button&gt;\n&lt;button class=\"contrast\"&gt;Contrast&lt;/button&gt;\n&lt;button class=\"outline\"&gt;Outline&lt;/button&gt;\n&lt;button class=\"outline secondary\"&gt;Outline secondary&lt;/button&gt;</template></include-content>\n<p><code>[type=&quot;submit&quot;]</code> is primary, <code>[type=&quot;reset&quot;]</code> secondary and <code>[type=&quot;file&quot;]</code>&#39;s selector button secondary. Buttons are <code>inline-block</code>; a <code>[type=&quot;submit&quot;]</code> inside a form is full-width (see <spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a>).</p>\n<h2 id=\"md-states\">States</h2>\n<ul>\n<li><strong>Disabled</strong> — <code>[disabled]</code> or <code>aria-disabled=&quot;true&quot;</code> (<code>:--button--disabled</code>): half opacity, no pointer events; a <code>fieldset[disabled]</code> disables every button inside.</li>\n<li><strong>Busy</strong> — <code>aria-busy=&quot;true&quot;</code> shows the <spa-a route-href=\"/nucleus/packages/valence/loading\" role=\"link\">loading</spa-a> spinner and blocks pointer events.</li>\n<li><strong>Current</strong> — <code>[aria-current]</code> (not <code>&quot;false&quot;</code>) renders the hover state.</li>\n<li><strong>Focus</strong> — a <code>--v-primary-focus</code> ring (<code>-secondary-</code> / <code>-contrast-</code> per flavor).</li>\n</ul>\n<h2 id=\"md-tokens\">Tokens</h2>\n<p>A button reads <code>--v-background-color</code>, <code>--v-border-color</code>, <code>--v-color</code> and <code>--v-box-shadow</code> from its flavor (<code>--v-primary-background</code>, <code>--v-primary-border</code>, <code>--v-primary-inverse</code>, …); override those on the element or restyle a flavor globally through the <spa-a route-href=\"/nucleus/packages/valence/css_variables\" role=\"link\">CSS variables</spa-a>.</p>\n",
+    "card": "<h1 id=\"md-card\">Card</h1>\n<p>An <code>article</code> is a card: padding, radius, shadow, and sectioned <code>header</code> / <code>footer</code> bands.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"card\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;article&gt;\n  &lt;header&gt;Header&lt;/header&gt;\n  Body\n  &lt;footer&gt;Footer&lt;/footer&gt;\n&lt;/article&gt;</template></include-content>\n<p><code>header</code> / <code>footer</code> (direct children, or through an <code>.abstract</code> wrapper) bleed to the card edges with <code>--v-card-sectioning-background-color</code> and a <code>--v-card-border-color</code> rule. <code>.nested</code> quiets a card inside another card (<code>--v-multiply-color-*</code> surfaces).</p>\n<p>Tokens: <code>--v-card-background-color</code>, <code>--v-card-border-color</code>, <code>--v-card-box-shadow</code>, <code>--v-card-sectioning-background-color</code>; the padding is <code>--v-block-spacing-vertical</code> / <code>-horizontal</code>, so cards grow with the viewport like <spa-a route-href=\"/nucleus/packages/valence/landmarks\" role=\"link\">sections</spa-a>.</p>\n<h2 id=\"md-aliases\">Aliases</h2>\n<p><code>[role=&quot;article&quot;]</code> / <code>.tag-article</code> — the usual way to make a custom element a card (<code>&lt;content-drawer class=&quot;tag-article&quot;&gt;</code>).</p>\n",
+    "checkboxes": "<h1 id=\"md-checkboxes-radios-amp-switches\">Checkboxes, radios &amp; switches</h1>\n<p>Native <code>checkbox</code> and <code>radio</code> inputs are restyled with the primary color; <code>role=&quot;switch&quot;</code> turns a checkbox into a toggle.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"checkboxes\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;label&gt;&lt;input type=\"checkbox\" checked /&gt; Checked&lt;/label&gt;\n&lt;label&gt;&lt;input type=\"radio\" name=\"r\" /&gt; Radio&lt;/label&gt;\n&lt;label&gt;&lt;input type=\"checkbox\" role=\"switch\" /&gt; Switch&lt;/label&gt;</template></include-content>\n<ul>\n<li>A checkbox in the <code>indeterminate</code> state (set from JS) shows a minus.</li>\n<li>A <code>label</code> that wraps a checkbox / radio shrinks to its content and gets a pointer cursor; labels after the input (<code>input ~ label</code>) stay inline.</li>\n<li><code>aria-invalid=&quot;true&quot;</code> / <code>&quot;false&quot;</code> recolor the checked control.</li>\n</ul>\n<h2 id=\"md-switch\">Switch</h2>\n<p><code>[type=&quot;checkbox&quot;][role=&quot;switch&quot;]</code> is a <code>2.25em × 1.25em</code> track (<code>--v-switch-background-color</code>, checked <code>--v-switch-checked-background-color</code>) with an animated thumb; inside a <spa-a route-href=\"/nucleus/packages/valence/group\" role=\"link\">group</spa-a> a switch label becomes an attached segment.</p>\n",
+    "code": "<h1 id=\"md-code\">Code</h1>\n<p><code>code</code>, <code>kbd</code>, <code>samp</code> and <code>pre</code> share the monospace tokens; <code>pre &gt; code</code> becomes a scrollable block.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"code\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;p&gt;Press &lt;kbd&gt;⌘&lt;/kbd&gt; &lt;kbd&gt;K&lt;/kbd&gt; to run &lt;code&gt;build&lt;/code&gt;.&lt;/p&gt;\n&lt;pre&gt;&lt;code&gt;npm install @excom/valence&lt;/code&gt;&lt;/pre&gt;</template></include-content>\n<ul>\n<li>Inline <code>code</code> / <code>samp</code>: <code>--v-code-background-color</code> / <code>--v-code-color</code>, small padding, <code>0.75em</code>.</li>\n<li><code>kbd</code>: inverted (<code>--v-code-kbd-background-color</code> / <code>-color</code>).</li>\n<li><code>pre</code>: block, <code>overflow-x: auto</code>, <code>--v-spacing</code> padding on the inner <code>code</code> / <code>samp</code>.</li>\n</ul>\n<p>Aliases: <code>[role=&quot;code&quot;]</code> / <code>.tag-code</code>, <code>.tag-pre</code>, <code>.tag-kbd</code>, <code>.tag-samp</code>.</p>\n",
+    "container": "<h1 id=\"md-container\">Container</h1>\n<p><code>.container</code> centers content in a responsive column; <code>.container-fluid</code> spans the full width with padding only.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"container\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;main class=\"container\"&gt;…&lt;/main&gt;</template></include-content>\n<h2 id=\"md-breakpoints\">Breakpoints</h2>\n<table>\n<thead>\n<tr>\n<th>Viewport</th>\n<th><code>.container</code> max-width</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>&lt; 576px</td>\n<td>100% (with <code>--v-spacing</code> padding)</td>\n</tr>\n<tr>\n<td>≥ 576px</td>\n<td>510px</td>\n</tr>\n<tr>\n<td>≥ 768px</td>\n<td>700px</td>\n</tr>\n<tr>\n<td>≥ 1024px</td>\n<td>950px</td>\n</tr>\n<tr>\n<td>≥ 1280px</td>\n<td>1200px</td>\n</tr>\n<tr>\n<td>≥ 1536px</td>\n<td>1450px</td>\n</tr>\n</tbody></table>\n<p>Landmark children of <code>body</code> (<code>header</code>, <code>main</code>, <code>footer</code>) get the same column without any class — see <spa-a route-href=\"/nucleus/packages/valence/landmarks\" role=\"link\">Landmarks &amp; section</spa-a>.</p>\n",
+    "css_variables": "<h1 id=\"md-css-variables\">CSS variables</h1>\n<p>Every color, size and spacing is a <code>--v-*</code> custom property; override them on <code>:root</code> or on any subtree.</p>\n<h2 id=\"md-overriding-tokens\">Overriding tokens</h2>\n<p><include-content data-demo=\"css-variables\"></include-content></p>\n<include-content data-language=\"css\"><template>:root {\n  --v-primary: #7c3aed;\n  --v-primary-background: #7c3aed;\n  --v-border-radius: 2rem;\n}</template></include-content>\n<p>Scheme-dependent tokens (colors) are declared per scheme, so override them under both <code>[data-scheme=&quot;light&quot;]</code> / <code>:root:not([data-scheme=&quot;dark&quot;])</code> and <code>[data-scheme=&quot;dark&quot;]</code> (plus the <code>prefers-color-scheme: dark</code> auto case) when the value should differ — see <spa-a route-href=\"/nucleus/packages/valence/schemes\" role=\"link\">Color schemes</spa-a>.</p>\n<h2 id=\"md-token-families\">Token families</h2>\n<table>\n<thead>\n<tr>\n<th>Family</th>\n<th>Examples</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Typography</td>\n<td><code>--v-font-family</code>, <code>--v-font-size</code>, <code>--v-line-height</code>, <code>--v-font-weight</code>, <code>--v-h1-color</code> … <code>--v-h6-color</code></td>\n</tr>\n<tr>\n<td>Spacing</td>\n<td><code>--v-spacing</code>, <code>--v-typography-spacing-vertical</code>, <code>--v-block-spacing-vertical</code> / <code>-horizontal</code>, <code>--v-grid-column-gap</code> / <code>-row-gap</code></td>\n</tr>\n<tr>\n<td>Borders &amp; outline</td>\n<td><code>--v-border-radius</code>, <code>--v-border-width</code>, <code>--v-outline-width</code>, <code>--v-box-shadow</code></td>\n</tr>\n<tr>\n<td>Colors</td>\n<td><code>--v-background-color</code>, <code>--v-color</code>, <code>--v-muted-color</code>, <code>--v-muted-border-color</code>, <code>--v-primary*</code>, <code>--v-secondary*</code>, <code>--v-contrast*</code> (each with <code>-background</code>, <code>-border</code>, <code>-hover</code>, <code>-focus</code>, <code>-inverse</code>, <code>-underline</code>)</td>\n</tr>\n<tr>\n<td>Forms</td>\n<td><code>--v-form-element-*</code> (background, border, color, placeholder, active, focus, valid / invalid, disabled opacity), <code>--v-switch-*</code>, <code>--v-range-*</code>, <code>--v-icon-*</code></td>\n</tr>\n<tr>\n<td>Components</td>\n<td><code>--v-card-*</code>, <code>--v-accordion-*</code>, <code>--v-dropdown-*</code>, <code>--v-modal-overlay-*</code>, <code>--v-popover-*</code>, <code>--v-progress-*</code>, <code>--v-tooltip-*</code>, <code>--v-nav-*</code>, <code>--v-table-*</code>, <code>--v-code-*</code></td>\n</tr>\n<tr>\n<td>Motion</td>\n<td><code>--v-transition</code>, <code>--v-transition-duration-fast</code> / <code>-standard</code> / <code>-slow</code>, <code>--v-transition-ease-out</code> / <code>-in</code> / <code>-in-out</code></td>\n</tr>\n</tbody></table>\n<p>The complete list with defaults is the <em>CSS properties</em> table of the <spa-a route-href=\"/nucleus/packages/valence#md-api-reference\" role=\"link\">API Reference</spa-a>.</p>\n<h2 id=\"md-element-level-tokens\">Element-level tokens</h2>\n<p>Elements redefine tokens locally rather than setting properties: a button sets <code>--v-background-color</code> and <code>--v-color</code>, headings set <code>--v-font-size</code>, <code>--v-line-height</code> and <code>--v-typography-spacing-top</code>. Override those on the element to restyle one kind of element without touching the rule:</p>\n<include-content data-language=\"css\"><template>h1 { --v-font-size: 2.5rem; }\nbutton.cta { --v-background-color: var(--v-contrast-background); }</template></include-content>\n<h2 id=\"md-writing-tokens-from-quark\">Writing tokens from Quark</h2>\n<p><code>--name:</code> declarations write custom properties on matched elements, so State can drive theming (<code>:scope { --v-primary: $brand; }</code>) — see the quark docs <em>CSS variables</em>.</p>\n",
+    "dropdown": "<h1 id=\"md-dropdown\">Dropdown</h1>\n<p>A <code>details.dropdown</code> opens a menu below its <code>summary</code>: select-styled by default, button-styled with <code>role=&quot;button&quot;</code>, and inline inside a <spa-a route-href=\"/nucleus/packages/valence/nav\" role=\"link\">nav</spa-a>.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"dropdown\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;details class=\"dropdown\"&gt;\n  &lt;summary&gt;Choose…&lt;/summary&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Option&lt;/a&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;label&gt;&lt;input type=\"checkbox\" /&gt; Toggle&lt;/label&gt;&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/details&gt;</template></include-content>\n<ul>\n<li>The default <code>summary</code> looks like a <code>select</code> (chevron, <code>--v-form-element-*</code> tokens, <code>aria-invalid</code> colors); <code>summary[role=&quot;button&quot;]</code> looks like a <spa-a route-href=\"/nucleus/packages/valence/button\" role=\"link\">button</spa-a>.</li>\n<li>The menu is the <code>ul</code> right after the summary: absolutely positioned, <code>--v-dropdown-*</code> tokens, links and labels fill each row; <code>dir=&quot;rtl&quot;</code> on the list right-aligns it.</li>\n<li>While open, an invisible full-page <code>::before</code> on the summary closes the menu on an outside click — no JS.</li>\n<li>Inside a <code>nav</code>, the dropdown sits inline with the links; inside a <code>label</code>, it aligns like a control.</li>\n</ul>\n",
+    "embedded": "<h1 id=\"md-embedded-content\">Embedded content</h1>\n<p>Images, media and figures are responsive by default; <code>figcaption</code> is muted.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"embedded\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;figure&gt;\n  &lt;img src=\"…\" alt=\"…\" /&gt;\n  &lt;figcaption&gt;Caption&lt;/figcaption&gt;\n&lt;/figure&gt;</template></include-content>\n<ul>\n<li><code>img</code> (and <code>[role=&quot;img&quot;]</code> / <code>.tag-img</code>): <code>max-width: 100%</code>, <code>height: auto</code>, no border.</li>\n<li><code>audio</code>, <code>canvas</code>, <code>iframe</code>, <code>img</code>, <code>svg</code>, <code>video</code>: middle-aligned; <code>iframe</code> has no border; <code>svg</code> without <code>fill</code> inherits <code>currentColor</code>.</li>\n<li><code>figure</code> has no margin; <code>figcaption</code> (<code>[role=&quot;caption&quot;]</code> inside a figure) is padded and <code>--v-muted-color</code>.</li>\n</ul>\n",
+    "forms": "<h1 id=\"md-forms\">Forms</h1>\n<p>Form controls are full-width, labels stack above them, and validity, helper text and disabled states come from attributes alone.</p>\n<h2 id=\"md-overview\">Overview</h2>\n<p><include-content data-demo=\"forms\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;form&gt;\n  &lt;label&gt;\n    Email\n    &lt;input type=\"email\" name=\"email\" /&gt;\n    &lt;small&gt;We never share it.&lt;/small&gt;\n  &lt;/label&gt;\n  &lt;fieldset&gt;\n    &lt;legend&gt;Plan&lt;/legend&gt;\n    &lt;label&gt;&lt;input type=\"radio\" name=\"plan\" checked /&gt; Free&lt;/label&gt;\n  &lt;/fieldset&gt;\n  &lt;button type=\"submit\"&gt;Sign up&lt;/button&gt;\n&lt;/form&gt;</template></include-content>\n<h2 id=\"md-layout\">Layout</h2>\n<ul>\n<li><code>input</code> (except checkbox / radio), <code>select</code>, <code>textarea</code> and <code>button[type=&quot;submit&quot;]</code> are <code>width: 100%</code> with <code>--v-spacing</code> below.</li>\n<li>A <code>label</code> is a block with the control inside it or before it; <code>fieldset</code> / <code>legend</code> group controls without borders.</li>\n<li>Put controls in a <spa-a route-href=\"/nucleus/packages/valence/grid\" role=\"link\"><code>.grid</code></spa-a> for columns, or in a <spa-a route-href=\"/nucleus/packages/valence/group\" role=\"link\">group</spa-a> for an input + button pair.</li>\n</ul>\n<h2 id=\"md-helper-text\">Helper text</h2>\n<p>A <code>small</code> right after an <code>input</code>, <code>select</code>, <code>textarea</code>, <code>fieldset</code> or <code>.grid</code> becomes a muted note; it turns green / red after a control with <code>aria-invalid=&quot;false&quot;</code> / <code>&quot;true&quot;</code>.</p>\n<h2 id=\"md-validation\">Validation</h2>\n<p><code>aria-invalid=&quot;true&quot;</code> / <code>&quot;false&quot;</code> colors the border and focus ring and draws an icon inside text-like inputs (<code>--v-icon-invalid</code> / <code>--v-icon-valid</code>). No class is needed and the state stays in the document, where CSS, Quark and assistive technology all read it.</p>\n<h2 id=\"md-disabled\">Disabled</h2>\n<p><code>[disabled]</code> controls (and every control inside a <code>fieldset[disabled]</code>) drop to <code>--v-form-element-disabled-opacity</code> and ignore the pointer; a <code>label[aria-disabled=&quot;true&quot;]</code> mutes its text too.</p>\n<h2 id=\"md-controls\">Controls</h2>\n<p><spa-a route-href=\"/nucleus/packages/valence/input\" role=\"link\">Input</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/textarea\" role=\"link\">Textarea</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/select\" role=\"link\">Select</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/checkboxes\" role=\"link\">Checkboxes, radios &amp; switches</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/range\" role=\"link\">Range</spa-a></p>\n",
+    "grid": "<h1 id=\"md-grid\">Grid</h1>\n<p><code>.grid</code> lays its children out in equal auto-fit columns from 768px up, and stacks them below.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"grid\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;div class=\"grid\"&gt;\n  &lt;div&gt;1&lt;/div&gt;\n  &lt;div&gt;2&lt;/div&gt;\n  &lt;div&gt;3&lt;/div&gt;\n&lt;/div&gt;</template></include-content>\n<p>Gaps are <code>--v-grid-column-gap</code> / <code>--v-grid-row-gap</code> (both <code>--v-spacing</code>). Children get <code>min-width: 0</code> so overflowing content scrolls instead of stretching the column.</p>\n<p>Inside a form, <code>.grid</code> also carries the helper-text rule: a <code>small</code> right after a <code>.grid</code> of inputs is a muted note (see <spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a>).</p>\n",
+    "group": "<h1 id=\"md-group\">Group</h1>\n<p><code>[role=&quot;group&quot;]</code> joins an input and a button (or several controls) into one pill; <code>[role=&quot;search&quot;]</code> is the rounded variant.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"group\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;fieldset role=\"group\"&gt;\n  &lt;input type=\"email\" placeholder=\"Email\" /&gt;\n  &lt;button type=\"submit\"&gt;Subscribe&lt;/button&gt;\n&lt;/fieldset&gt;\n&lt;fieldset role=\"search\"&gt;\n  &lt;input type=\"search\" placeholder=\"Search\" /&gt;\n  &lt;button type=\"submit\"&gt;Go&lt;/button&gt;\n&lt;/fieldset&gt;</template></include-content>\n<ul>\n<li>Children lose their inner radii and margins; buttons shrink to their content and get wider padding.</li>\n<li>Focus moves to the group: <code>--v-group-box-shadow-focus-with-input</code> when an input is focused, <code>--v-group-box-shadow-focus-with-button</code> (per button flavor) when a button is.</li>\n<li>A <code>label</code> holding a <code>role=&quot;switch&quot;</code> checkbox becomes an attached segment.</li>\n</ul>\n<p>Aliases: <code>.tag-group</code>, <code>.tag-search</code>.</p>\n",
+    "input": "<h1 id=\"md-input\">Input</h1>\n<p>Text-like inputs share one look; <code>search</code>, date / time, <code>color</code> and <code>file</code> add their own affordances.</p>\n<h2 id=\"md-types\">Types</h2>\n<p><include-content data-demo=\"input\"></include-content></p>\n<table>\n<thead>\n<tr>\n<th>Type</th>\n<th>Extra</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>text</code>, <code>email</code>, <code>password</code>, <code>number</code>, <code>tel</code>, <code>url</code></td>\n<td>The base look: <code>--v-form-element-*</code> tokens, focus ring</td>\n</tr>\n<tr>\n<td><code>search</code></td>\n<td>Pill radius (<code>5rem</code>) and a leading search icon</td>\n</tr>\n<tr>\n<td><code>date</code>, <code>datetime-local</code>, <code>month</code>, <code>time</code>, <code>week</code></td>\n<td>Trailing calendar / clock icon over the native picker</td>\n</tr>\n<tr>\n<td><code>color</code></td>\n<td>Swatch fills the control</td>\n</tr>\n<tr>\n<td><code>file</code></td>\n<td>Borderless, with a secondary-flavored selector button</td>\n</tr>\n<tr>\n<td><code>range</code></td>\n<td>See <spa-a route-href=\"/nucleus/packages/valence/range\" role=\"link\">Range</spa-a></td>\n</tr>\n</tbody></table>\n<h2 id=\"md-states\">States</h2>\n<ul>\n<li><code>placeholder</code> uses <code>--v-form-element-placeholder-color</code>.</li>\n<li><code>aria-invalid=&quot;true&quot;</code> / <code>&quot;false&quot;</code> — border, focus ring and a trailing icon (see <spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a>).</li>\n<li><code>readonly</code> keeps the resting look on focus; <code>disabled</code> fades the control.</li>\n</ul>\n<h2 id=\"md-sizing\">Sizing</h2>\n<p>Height is derived from the tokens (<code>1rem × --v-line-height + 2 × --v-form-element-spacing-vertical + 2 × --v-border-width</code>), so a button and an input line up in a <spa-a route-href=\"/nucleus/packages/valence/group\" role=\"link\">group</spa-a>.</p>\n",
+    "landmarks": "<h1 id=\"md-landmarks-amp-section\">Landmarks &amp; section</h1>\n<p><code>body &gt; header</code>, <code>main</code> and <code>footer</code> are centered columns out of the box; <code>section</code>s space themselves vertically.</p>\n<h2 id=\"md-landmarks\">Landmarks</h2>\n<include-content data-language=\"html\"><template>&lt;body&gt;\n  &lt;header&gt;…&lt;/header&gt;\n  &lt;main&gt;…&lt;/main&gt;\n  &lt;footer&gt;…&lt;/footer&gt;\n&lt;/body&gt;</template></include-content>\n<p>Each direct landmark child of <code>body</code> gets the <spa-a route-href=\"/nucleus/packages/valence/container\" role=\"link\">container</spa-a> column and <code>--v-block-spacing-vertical</code> / <code>-horizontal</code> padding. The role and class aliases (<code>[role=&quot;main&quot;]</code>, <code>.tag-main</code>, …) count as landmarks too, and an <code>.abstract</code> wrapper between <code>body</code> and the landmark is looked through (an <code>&lt;include-content class=&quot;abstract&quot;&gt;</code> around a header keeps it a landmark).</p>\n<h2 id=\"md-section\">Section</h2>\n<p><include-content data-demo=\"landmarks\"></include-content></p>\n<p><code>section</code> (and <code>[role=&quot;section&quot;]</code> / <code>.tag-section</code>) is a block with <code>--v-block-spacing-vertical</code> below it. The spacing grows with the viewport: <code>1×</code> <code>--v-spacing</code> below 576px up to <code>2.25×</code> at 1536px, on landmarks, sections and cards alike.</p>\n<h2 id=\"md-document\">Document</h2>\n<p>The root sets the font stack, size, weight, line height, <code>overflow-wrap: break-word</code>, <code>box-sizing: border-box</code> everywhere and a responsive root font size (<code>100%</code> → <code>131.25%</code> at 1536px), so every <code>rem</code> scales with the viewport.</p>\n",
+    "link": "<h1 id=\"md-link\">Link</h1>\n<p>Links are primary-colored and underlined; <code>.secondary</code> and <code>.contrast</code> change the flavor, <code>aria-current</code> marks the active one.</p>\n<h2 id=\"md-flavors\">Flavors</h2>\n<p><include-content data-demo=\"link\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;a href=\"#\"&gt;Primary&lt;/a&gt;\n&lt;a href=\"#\" class=\"secondary\"&gt;Secondary&lt;/a&gt;\n&lt;a href=\"#\" class=\"contrast\"&gt;Contrast&lt;/a&gt;</template></include-content>\n<p>Hover, focus, active and <code>[aria-current]</code> (any value but <code>&quot;false&quot;</code>) switch to the <code>-hover</code> tokens; <code>:focus-visible</code> adds a <code>--v-primary-focus</code> ring. The underline color is <code>--v-primary-underline</code> (and <code>-secondary-</code> / <code>-contrast-</code>).</p>\n<h2 id=\"md-link-as-button\">Link as button</h2>\n<p><code>&lt;a role=&quot;button&quot;&gt;</code> (or <code>.tag-button</code>) takes the full <spa-a route-href=\"/nucleus/packages/valence/button\" role=\"link\">button</spa-a> styling, including the flavors and <code>.outline</code>.</p>\n<h2 id=\"md-aliases\">Aliases</h2>\n<p><code>:--link</code> is <code>a</code>, <code>[role=&quot;link&quot;]</code>, <code>.tag-link</code> — a <code>&lt;spa-a role=&quot;link&quot;&gt;</code> custom element is styled as a link without any CSS of its own.</p>\n",
+    "loading": "<h1 id=\"md-loading\">Loading</h1>\n<p><code>aria-busy=&quot;true&quot;</code> on almost any element shows a spinner before its content; on buttons and links it also blocks the pointer.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"loading\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;button aria-busy=\"true\"&gt;Saving…&lt;/button&gt;\n&lt;button aria-busy=\"true\"&gt;&lt;/button&gt;       &lt;!-- spinner only --&gt;\n&lt;article aria-busy=\"true\"&gt;Loading…&lt;/article&gt;</template></include-content>\n<p>The spinner is <code>--v-icon-loading</code> (<code>1em</code>); empty busy elements center it. Form controls (<code>input</code>, <code>select</code>, <code>textarea</code>) and <code>form</code> / <code>html</code> are excluded. Because the state is an attribute, a Quark rule sets it from any fact: <code>button { aria-busy: attr(&quot;is-loading&quot;) != null; }</code> or <code>provider-fetch[is-loading] button { aria-busy: &quot;true&quot;; }</code> (with its inverse).</p>\n",
+    "modal": "<h1 id=\"md-modal\">Modal</h1>\n<p>A native <code>dialog</code> centers an <code>article</code> over a dimmed backdrop; the header&#39;s close control and the footer buttons are styled, and <code>[role=&quot;dialog&quot;]</code> hosts get the same look with a sibling backdrop.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"modal\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;dialog&gt;\n  &lt;article&gt;\n    &lt;header&gt;\n      &lt;button rel=\"prev\" aria-label=\"Close\"&gt;&lt;/button&gt;\n      &lt;h5&gt;Confirm&lt;/h5&gt;\n    &lt;/header&gt;\n    &lt;p&gt;…&lt;/p&gt;\n    &lt;footer&gt;\n      &lt;form method=\"dialog\"&gt;\n        &lt;button class=\"secondary\"&gt;Cancel&lt;/button&gt;\n        &lt;button&gt;Confirm&lt;/button&gt;\n      &lt;/form&gt;\n    &lt;/footer&gt;\n  &lt;/article&gt;\n&lt;/dialog&gt;</template></include-content>\n<ul>\n<li>Open it with <code>dialog.showModal()</code>, <code>&lt;dialog-anchor&gt;</code>, or an <code>&lt;event-handler command-name=&quot;show-modal&quot;&gt;</code> (the demo); a <code>form[method=&quot;dialog&quot;]</code> closes it without JS.</li>\n<li><strong>Close control</strong>: <code>.close</code>, or a <code>button</code> / <code>a</code> with <code>rel=&quot;prev&quot;</code> (<code>:--dialog-close</code>), renders the <code>--v-icon-close</code> glyph; in the <code>header</code> it floats right.</li>\n<li>The <code>article</code> caps its width per breakpoint (510px / 700px), scrolls internally, and its <code>footer</code> right-aligns buttons.</li>\n<li><code>dialog::backdrop</code> blurs and dims (<code>--v-modal-overlay-backdrop-filter</code>, <code>--v-modal-overlay-background-color</code>); scrolling stays inside the dialog.</li>\n</ul>\n<h2 id=\"md-custom-hosts\">Custom hosts</h2>\n<p><code>[role=&quot;dialog&quot;]</code> / <code>.tag-dialog</code> (<code>:--dialog</code>) get the same layout; open state is <code>[open]</code> or <code>aria-expanded=&quot;true&quot;</code>. Pseudo-elements cannot be aliased, so a custom host dims with a <strong>sibling</strong> element: <code>[role=&quot;presentation&quot;]</code> or <code>.tag-backdrop</code> as the dialog&#39;s first child (<code>:--dialog-backdrop-aliases</code>) — <code>&lt;content-drawer&gt;</code> uses this. <code>.absolute</code> on the dialog positions it (and its backdrop) inside a <code>position: relative</code> parent instead of the viewport.</p>\n<p>Element authors reuse the exact same dimmer through the <code>modal-backdrop</code> mixin — see <spa-a route-href=\"/nucleus/packages/valence/themes\" role=\"link\">Themes &amp; layers</spa-a>.</p>\n",
+    "nav": "<h1 id=\"md-nav\">Nav</h1>\n<p>A <code>nav</code> lays its lists out horizontally — one left, one right — and becomes a breadcrumb with <code>aria-label=&quot;breadcrumb&quot;</code>, a vertical menu inside an <code>aside</code>, or an outline tree with <code>role=&quot;tree&quot;</code>.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"nav\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;nav&gt;\n  &lt;ul&gt;&lt;li&gt;&lt;strong&gt;Brand&lt;/strong&gt;&lt;/li&gt;&lt;/ul&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Docs&lt;/a&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;a href=\"#\" aria-current=\"page\"&gt;Blog&lt;/a&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;details class=\"dropdown\"&gt;&lt;summary&gt;More&lt;/summary&gt;&lt;ul dir=\"rtl\"&gt;…&lt;/ul&gt;&lt;/details&gt;&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/nav&gt;</template></include-content>\n<ul>\n<li>Links are padded pills (<code>--v-nav-link-spacing-*</code>) without underline until hover; buttons, inputs and selects inside a nav shrink to fit; a <spa-a route-href=\"/nucleus/packages/valence/dropdown\" role=\"link\">dropdown</spa-a> sits inline.</li>\n<li><strong>Breadcrumb</strong>: <code>nav[aria-label=&quot;breadcrumb&quot;]</code> joins items with <code>--v-nav-breadcrumb-divider</code> (<code>&gt;</code>) and mutes the <code>aria-current</code> link.</li>\n<li><strong>Vertical</strong>: inside an <code>aside</code>, <code>nav</code>, its lists and items stack; links fill the row.</li>\n<li><strong>Tree</strong>: <code>ul[role=&quot;tree&quot;]</code> (or <code>.tag-tree</code>) draws a left rule, indents nested trees and highlights the <code>aria-current</code> link with a primary border — the docs sidebar is one.</li>\n</ul>\n<p>Aliases: <code>[role=&quot;navigation&quot;]</code> / <code>.tag-nav</code>, <code>[role=&quot;list&quot;]</code> / <code>.tag-list</code>, <code>[role=&quot;listitem&quot;]</code> / <code>.tag-li</code>.</p>\n",
+    "opt_outs": "<h1 id=\"md-opt-outs\">Opt-outs</h1>\n<p>Valence.css is opinionated; these classes hand an element — or a subtree — back to the browser.</p>\n<h2 id=\"md-unstyled\">Unstyled</h2>\n<p><code>.unstyled</code> reverts every Valence.css rule on one element; <code>.unstyled-all</code> does it for the element and all its descendants (<code>all: revert !important</code>).</p>\n<p><include-content data-demo=\"opt-outs\"></include-content></p>\n<p>Use them where a third-party widget or a custom element brings its own styling and Valence.css would fight it.</p>\n<h2 id=\"md-unanimated\">Unanimated</h2>\n<p><code>.unanimated</code> / <code>.unanimated-all</code> kill transitions and animations (the same rules <code>prefers-reduced-motion: reduce</code> applies everywhere, except on <code>[aria-busy=&quot;true&quot;]</code> spinners).</p>\n<h2 id=\"md-abstract-wrappers\">Abstract wrappers</h2>\n<p><code>.abstract</code> sets <code>display: contents</code>, so a wrapper — typically a custom element — is invisible to layout <em>and</em> to the Valence.css direct-child rules: <code>article &gt; .abstract &gt; header</code> is still styled as a card header. Rules that expect direct children (<code>article &gt; header</code>, <code>details &gt; summary</code>, <code>dialog &gt; article</code>, <code>label &gt; input</code>) look through one or two <code>.abstract</code> levels.</p>\n<include-content data-language=\"html\"><template>&lt;article&gt;\n  &lt;event-handler class=\"abstract\"&gt;\n    &lt;header&gt;Still a card header&lt;/header&gt;\n  &lt;/event-handler&gt;\n&lt;/article&gt;</template></include-content>\n<h2 id=\"md-layers\">Layers</h2>\n<p>Element and alias styles sit in an anonymous <code>@layer</code>, so a consumer stylesheet or a custom element&#39;s own CSS overrides them at any specificity. The class utilities (<code>.grid</code>, <code>.container</code>, <code>.abstract</code>, the opt-outs) stay unlayered so they still win — see <spa-a route-href=\"/nucleus/packages/valence/themes\" role=\"link\">Themes &amp; layers</spa-a>.</p>\n",
+    "overflow_auto": "<h1 id=\"md-overflow-auto\">Overflow auto</h1>\n<p>Wrap wide content in <code>.overflow-auto</code> to scroll it inside its box; <code>.show-scrollbar</code> keeps a styled scrollbar visible.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"overflow-auto\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;div class=\"overflow-auto\"&gt;\n  &lt;table&gt;…&lt;/table&gt;\n&lt;/div&gt;</template></include-content>\n<p><code>.show-scrollbar</code> forces <code>overflow-y: scroll</code> with a slim themed thumb (<code>--v-muted-color</code>) — useful for panels whose content changes height.</p>\n",
+    "popover": "<h1 id=\"md-popover\">Popover</h1>\n<p>A native <code>[popover]</code> opened by a <code>popovertarget</code> button is styled as a bubble and anchored to its invoker; <code>data-placement</code> picks the side.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"popover\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;button popovertarget=\"tip\"&gt;Info&lt;/button&gt;\n&lt;div id=\"tip\" popover data-placement=\"bottom\"&gt;Bubble content&lt;/div&gt;</template></include-content>\n<ul>\n<li>Anchored with CSS anchor positioning (<code>position-anchor</code> on the invoker&#39;s parent); <code>data-placement</code> is <code>top</code> (default), <code>bottom</code>, <code>left</code> or <code>right</code>.</li>\n<li>Fades in and out (<code>@starting-style</code>, <code>transition-behavior: allow-discrete</code>); the UA backdrop is hidden.</li>\n<li><code>--v-popover-max-width</code> (20rem), <code>--v-popover-background-color</code>, <code>--v-popover-border-color</code>, <code>--v-popover-color</code>, <code>--v-popover-box-shadow</code>.</li>\n<li>Open state is <code>:--popover--open</code>: <code>:popover-open</code> or <code>aria-expanded=&quot;true&quot;</code> (<code>.tag-popover</code> for custom hosts).</li>\n</ul>\n<p>For text-only hints use a <spa-a route-href=\"/nucleus/packages/valence/tooltip\" role=\"link\">tooltip</spa-a>.</p>\n",
+    "progress": "<h1 id=\"md-progress\">Progress</h1>\n<p><code>progress</code> is a slim primary bar; without a <code>value</code> it animates as indeterminate.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"progress\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;progress value=\"35\" max=\"100\"&gt;&lt;/progress&gt;\n&lt;progress&gt;&lt;/progress&gt;</template></include-content>\n<p>Tokens: <code>--v-progress-background-color</code>, <code>--v-progress-color</code>. The indeterminate animation respects <code>prefers-reduced-motion</code>. <code>[role=&quot;progressbar&quot;]</code> / <code>.tag-progress</code> hosts get the track and, with <code>aria-valuenow</code>, the bar color on their <code>::before</code> (custom hosts size the bar themselves).</p>\n",
+    "range": "<h1 id=\"md-range\">Range</h1>\n<p><code>input[type=&quot;range&quot;]</code> is a themed slider: a slim track and a round thumb that grows while dragging.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"range\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;label&gt;\n  Brightness\n  &lt;input type=\"range\" min=\"0\" max=\"100\" value=\"40\" /&gt;\n&lt;/label&gt;</template></include-content>\n<p>Tokens: <code>--v-range-border-color</code> (track), <code>--v-range-active-border-color</code>, <code>--v-range-thumb-color</code>, <code>--v-range-thumb-active-color</code>, <code>--v-range-thumb-border-color</code>.</p>\n",
+    "readme": "<h1 id=\"md-valence-css\">Valence.css</h1>\n<p>Classless CSS that still loves your custom elements — Pico&#39;s elegance, remixed for the modern web.</p>\n<p>Valence.css is a lightly modified fork of the excellent <a href=\"https://picocss.com\">Pico CSS</a>. Pico styles are tightly bound to native tag names (<code>article</code>, <code>button</code>, …), which custom elements cannot reuse. Valence.css keeps Pico&#39;s look and adds:</p>\n<ul>\n<li><strong>Tag aliases</strong> — <code>@custom-selector</code> synonyms so <code>[role=&quot;…&quot;]</code> / <code>.tag-*</code> (and custom element tags) share the same semantic styles</li>\n<li><strong>Opt-outs</strong> — <code>.unstyled</code> / <code>.unstyled-all</code> (and <code>.unanimated*</code>) for document flexibility where framework styles would fight you</li>\n<li><strong>Drop-in themes</strong> — <code>basic</code> (Pico-faithful) ships today; further themes share the same tokens so they can be swapped without touching markup. Light/dark is a <em>scheme</em> (<code>[data-scheme]</code>)</li>\n<li><strong>Molecules</strong> — cards, dropdowns, modals (<code>dialog::backdrop</code> / <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code>), nav, progress, and native <code>[popover]</code> styles on top of Pico&#39;s element styles</li>\n<li><strong>Tokens</strong> — <code>--pico-*</code> renamed to <code>--v-*</code> for a clear Valence.css namespace</li>\n</ul>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Semantic tag aliases</strong> Style <code>article</code>, <code>dialog</code>, <code>button</code>, … — the same rules apply to the <code>[role=&quot;…&quot;]</code> / <code>.tag-*</code> forms</li>\n<li><strong>Custom-element friendly</strong> <code>class=&quot;tag-article&quot;</code> on any host inherits Valence.css styles without rewriting selectors</li>\n<li><strong>Drop-in themes</strong> <code>basic</code> (Pico-flavor) ships; further themes share the same tokens. Scheme via <code>[data-scheme=&quot;light|dark&quot;]</code></li>\n<li><strong>Opt-outs</strong> <code>.unstyled</code> / <code>.unstyled-all</code> (and motion: <code>.unanimated*</code>)</li>\n<li><strong>Molecules</strong> Cards, dropdowns, modals (<code>dialog::backdrop</code> / <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code>), nav, progress, popovers, tooltips</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Import a theme entry (CSS). Prefer aliases when styling custom elements.</p>\n<include-content data-language=\"css\"><template>@import \"@excom/valence/basic.css\";</template></include-content>\n<include-content data-language=\"html\"><template>&lt;article&gt;Native card&lt;/article&gt;\n&lt;event-handler class=\"tag-article\"&gt;Aliased card&lt;/event-handler&gt;\n&lt;button class=\"outline secondary\"&gt;Outline&lt;/button&gt;</template></include-content>\n<h3 id=\"md-documentation\">Documentation</h3>\n<p>Getting started</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/schemes\" role=\"link\">Color schemes</spa-a> — automatic light / dark, <code>data-scheme</code></li>\n<li><spa-a route-href=\"/nucleus/packages/valence/aliases\" role=\"link\">Aliases</spa-a> — tag, role and <code>.tag-*</code> forms of every alias; custom elements</li>\n<li><spa-a route-href=\"/nucleus/packages/valence/opt_outs\" role=\"link\">Opt-outs</spa-a> — <code>.unstyled</code>, <code>.unanimated</code>, <code>.abstract</code></li>\n</ul>\n<p>Customization</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/css_variables\" role=\"link\">CSS variables</spa-a> — the <code>--v-*</code> tokens</li>\n<li><spa-a route-href=\"/nucleus/packages/valence/themes\" role=\"link\">Themes &amp; layers</spa-a> — entries, <code>@layer</code> strategy, mixins for element authors</li>\n</ul>\n<p>Layout</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/container\" role=\"link\">Container</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/landmarks\" role=\"link\">Landmarks &amp; section</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/grid\" role=\"link\">Grid</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/overflow_auto\" role=\"link\">Overflow auto</spa-a></li>\n</ul>\n<p>Content</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/typography\" role=\"link\">Typography</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/link\" role=\"link\">Link</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/button\" role=\"link\">Button</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/table\" role=\"link\">Table</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/code\" role=\"link\">Code</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/embedded\" role=\"link\">Embedded content</spa-a></li>\n</ul>\n<p>Forms</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/input\" role=\"link\">Input</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/textarea\" role=\"link\">Textarea</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/select\" role=\"link\">Select</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/checkboxes\" role=\"link\">Checkboxes, radios &amp; switches</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/range\" role=\"link\">Range</spa-a></li>\n</ul>\n<p>Components</p>\n<ul>\n<li><spa-a route-href=\"/nucleus/packages/valence/accordion\" role=\"link\">Accordion</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/card\" role=\"link\">Card</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/dropdown\" role=\"link\">Dropdown</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/group\" role=\"link\">Group</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/loading\" role=\"link\">Loading</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/modal\" role=\"link\">Modal</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/nav\" role=\"link\">Nav</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/popover\" role=\"link\">Popover</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/progress\" role=\"link\">Progress</spa-a> · <spa-a route-href=\"/nucleus/packages/valence/tooltip\" role=\"link\">Tooltip</spa-a></li>\n</ul>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n",
+    "schemes": "<h1 id=\"md-color-schemes\">Color schemes</h1>\n<p>Light and dark are a <em>scheme</em>: automatic from the OS, or forced on any subtree with <code>data-scheme</code>.</p>\n<h2 id=\"md-automatic\">Automatic</h2>\n<p>With no attribute, the document follows <code>prefers-color-scheme</code>. Every token that differs between the two schemes (<code>--v-background-color</code>, <code>--v-color</code>, <code>--v-primary</code>, the form and card colors, …) is defined once per scheme, so the whole page — and every custom element using the tokens — flips together.</p>\n<h2 id=\"md-forcing-a-scheme\">Forcing a scheme</h2>\n<p><code>data-scheme=&quot;light&quot;</code> or <code>data-scheme=&quot;dark&quot;</code> on <code>&lt;html&gt;</code> forces the document; on any other element it forces that subtree. The attribute also sets <code>color-scheme</code>, so native controls and scrollbars follow.</p>\n<p><include-content data-demo=\"schemes\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;html data-scheme=\"dark\"&gt;…&lt;/html&gt;\n&lt;article data-scheme=\"light\"&gt;Always light&lt;/article&gt;</template></include-content>\n<p>Switching at runtime is one attribute write — a Quark rule (<code>html { data-scheme: $theme; }</code>) or <code>&lt;provider-storage&gt;</code> can own it. Custom elements with a shadow root get the same tokens through <code>:host</code>.</p>\n",
+    "select": "<h1 id=\"md-select\">Select</h1>\n<p>A <code>select</code> gets the input look plus a chevron; <code>multiple</code> / <code>size</code> lists drop the chevron and highlight selected options.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"select\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;select name=\"planet\" required&gt;\n  &lt;option selected disabled value=\"\"&gt;Select a planet…&lt;/option&gt;\n  &lt;option&gt;Earth&lt;/option&gt;\n&lt;/select&gt;</template></include-content>\n<p>A <code>required</code> select whose selected option has an empty value renders in the placeholder color (<code>select:invalid</code>). Selected options in a <code>[multiple]</code> list use <code>--v-form-element-selected-background-color</code>.</p>\n<p><code>select</code> has no alias; for a custom picker style a <spa-a route-href=\"/nucleus/packages/valence/dropdown\" role=\"link\">dropdown</spa-a>.</p>\n",
+    "table": "<h1 id=\"md-table\">Table</h1>\n<p>Tables are full-width with bordered rows; <code>.striped</code> alternates rows, <code>thead.sticky</code> pins the header, and <code>aria-sort</code> draws sort markers.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"table\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;table class=\"striped\"&gt;\n  &lt;thead&gt;&lt;tr&gt;&lt;th scope=\"col\" aria-sort=\"ascending\"&gt;Planet&lt;/th&gt;…&lt;/tr&gt;&lt;/thead&gt;\n  &lt;tbody&gt;…&lt;/tbody&gt;\n  &lt;tfoot&gt;…&lt;/tfoot&gt;\n&lt;/table&gt;</template></include-content>\n<h2 id=\"md-modifiers\">Modifiers</h2>\n<table>\n<thead>\n<tr>\n<th>Modifier</th>\n<th>Effect</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>.striped</code></td>\n<td>Odd body rows get <code>--v-table-row-stripped-background-color</code></td>\n</tr>\n<tr>\n<td><code>thead.sticky</code></td>\n<td>Header cells stick to <code>--v-table-sticky-top</code> (default <code>0px</code>) while the table scrolls</td>\n</tr>\n<tr>\n<td><code>th[aria-sort]</code></td>\n<td>A <code>▲▼</code> marker; <code>&quot;ascending&quot;</code> / <code>&quot;descending&quot;</code> show one arrow, and the cell gets a pointer cursor</td>\n</tr>\n</tbody></table>\n<p>Corner cells are rounded (<code>--v-border-radius</code>); the last row loses its bottom border so a table sits flush in a card.</p>\n<h2 id=\"md-role-based-tables\">Role-based tables</h2>\n<p><code>[role=&quot;table&quot;]</code>, <code>[role=&quot;row&quot;]</code>, <code>[role=&quot;columnheader&quot;]</code> / <code>[role=&quot;rowheader&quot;]</code>, <code>[role=&quot;cell&quot;]</code> and <code>[role=&quot;rowgroup&quot;]</code> (or the <code>.tag-table</code> … <code>.tag-td</code> classes) render as table parts, so a custom element such as <code>&lt;data-table&gt;</code> can build a grid from <code>div</code>s and still look like a table. <code>thead</code> / <code>tbody</code> are told apart by their cells (<code>th[scope=&quot;col&quot;]</code> vs <code>th[scope=&quot;row&quot;]</code> / <code>td</code>); <code>tfoot</code> has no role equivalent.</p>\n",
+    "textarea": "<h1 id=\"md-textarea\">Textarea</h1>\n<p>A <code>textarea</code> is a block that resizes vertically only and follows the same tokens and validity styling as inputs.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"textarea\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;label&gt;\n  Message\n  &lt;textarea name=\"message\" rows=\"3\"&gt;&lt;/textarea&gt;\n&lt;/label&gt;</template></include-content>\n<p><code>aria-invalid</code> draws its icon in the top-right corner; helper text and disabled states behave as on <spa-a route-href=\"/nucleus/packages/valence/forms\" role=\"link\">Forms</spa-a>.</p>\n",
+    "themes": "<h1 id=\"md-themes-amp-layers\">Themes &amp; layers</h1>\n<p>A theme is a token file plus the shared mixins; <code>basic</code> (Pico-faithful) ships today, and every theme shares the same tokens so markup never changes.</p>\n<h2 id=\"md-entry-points\">Entry points</h2>\n<include-content data-language=\"css\"><template>@import \"@excom/valence/basic.css\";        /* the theme: mixins + tokens + every module */\n@import \"@excom/valence/src/mixins.basic.css\"; /* mixins only, for element authors */</template></include-content>\n<p><code>basic.css</code> is <code>mixins.basic.css</code> + <code>basic-vars.css</code> (the tokens, both schemes) + <code>apply.css</code> (every module applied once). <code>basic-vars.css</code> alone gives the tokens without any element styling.</p>\n<p>The <code>nucleus-kit</code> bundle re-exports <code>basic.css</code>, so Nucleus Kit users already have it.</p>\n<h2 id=\"md-layers\">Layers</h2>\n<p><code>apply.css</code> puts every element / alias module inside one anonymous <code>@layer</code>. Anything unlayered — your stylesheet, a custom element&#39;s CSS — beats it regardless of specificity, so overriding Valence.css never needs <code>!important</code>. The class utilities (<code>.container</code>, <code>.grid</code>, <code>.overflow-auto</code>, <code>.abstract</code>, <spa-a route-href=\"/nucleus/packages/valence/opt_outs\" role=\"link\">opt-outs</spa-a>) are deliberately <em>unlayered</em> so they win over element styles a custom element ships later.</p>\n<h2 id=\"md-mixins-for-element-authors\">Mixins for element authors</h2>\n<p>Custom elements that want to look native import <code>src/mixins.basic.css</code> (tokens are read from the document; no theme is duplicated) and apply the mixins in their own CSS:</p>\n<table>\n<thead>\n<tr>\n<th>Mixin</th>\n<th>Use</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>modal-backdrop</code></td>\n<td>The dimmer behind a dialog / drawer (<code>dialog::backdrop</code>, <code>[role=&quot;presentation&quot;]</code>, <code>.tag-backdrop</code>)</td>\n</tr>\n<tr>\n<td><code>modal-close-control</code></td>\n<td>The close icon control (<code>.close</code>, <code>[rel=&quot;prev&quot;]</code>)</td>\n</tr>\n<tr>\n<td><code>util-nested-card</code>, <code>util-elevated</code></td>\n<td>Card surfaces</td>\n</tr>\n<tr>\n<td><code>util-focus-ring</code>, <code>util-press-feedback</code></td>\n<td>Interaction states</td>\n</tr>\n<tr>\n<td><code>util-small-note</code></td>\n<td>Muted block note (what <code>small[role=&quot;note&quot;]</code> uses)</td>\n</tr>\n<tr>\n<td><code>abstract-wrapper</code></td>\n<td>Donut-scope a direct-child rule through <code>.abstract</code> wrappers</td>\n</tr>\n<tr>\n<td><code>details-animated-content</code></td>\n<td>The accordion&#39;s animated <code>::details-content</code></td>\n</tr>\n<tr>\n<td><code>unanimated</code></td>\n<td>Kill motion (the opt-out)</td>\n</tr>\n</tbody></table>\n<p>Module mixins (<code>module-button</code>, <code>module-card</code>, …) apply a whole module; a theme calls them all from <code>apply.css</code>.</p>\n<h2 id=\"md-further-themes\">Further themes</h2>\n<p><code>flat</code> and <code>paper</code> token files exist in the repository (<code>support/</code>) but are not published entries yet; they will swap in without markup changes because they only redefine tokens.</p>\n",
+    "tooltip": "<h1 id=\"md-tooltip\">Tooltip</h1>\n<p><code>role=&quot;tooltip&quot;</code> with an <code>aria-description</code> shows the text in a bubble on hover and focus, above the element by default.</p>\n<h2 id=\"md-usage\">Usage</h2>\n<p><include-content data-demo=\"tooltip\"></include-content></p>\n<include-content data-language=\"html\"><template>&lt;span role=\"tooltip\" aria-description=\"Shown above\"&gt;Hover me&lt;/span&gt;\n&lt;button role=\"tooltip\" aria-description=\"Placed below\" data-placement=\"bottom\"&gt;Bottom&lt;/button&gt;</template></include-content>\n<ul>\n<li><code>data-placement</code>: <code>top</code> (default), <code>bottom</code>, <code>left</code>, <code>right</code>.</li>\n<li>Plain elements get a dotted underline and help cursor; links, buttons and inputs keep their own look.</li>\n<li>Pure CSS (<code>::before</code> / <code>::after</code> read <code>aria-description</code>), with a slide animation on fine pointers; <code>--v-tooltip-background-color</code>, <code>--v-tooltip-color</code>.</li>\n</ul>\n<p>The docs site uses it on its icon buttons (<code>role=&quot;tooltip&quot; aria-description=&quot;Copy source&quot;</code>). For rich content use a <spa-a route-href=\"/nucleus/packages/valence/popover\" role=\"link\">popover</spa-a>.</p>\n",
+    "typography": "<h1 id=\"md-typography\">Typography</h1>\n<p>Headings, paragraphs, lists, quotes and inline text primitives — every one available as a tag, a role or an <code>.tag-*</code> class.</p>\n<h2 id=\"md-headings\">Headings</h2>\n<p><code>h1</code>–<code>h6</code> (or <code>[role=&quot;heading&quot;][aria-level=&quot;n&quot;]</code>) set their own <code>--v-font-size</code>, <code>--v-line-height</code> and color (<code>--v-h1-color</code> … <code>--v-h6-color</code>). A heading that follows a block (<code>p</code>, <code>ul</code>, <code>article</code>, <code>table</code>, …) gets <code>--v-typography-spacing-top</code> above it, so sections breathe without extra markup.</p>\n<p>An <code>hgroup</code> keeps its children tight and mutes the last one — a title plus a subtitle:</p>\n<p><include-content data-demo=\"typography\"></include-content></p>\n<h2 id=\"md-blocks\">Blocks</h2>\n<p><code>p</code>, <code>ul</code> / <code>ol</code>, <code>dl</code>, <code>blockquote</code>, <code>address</code>, <code>pre</code>, <code>table</code> share <code>--v-typography-spacing-vertical</code> below them. <code>ul</code> lists use square markers; nested lists drop their outer margin. A <code>blockquote</code> gets a left rule (<code>--v-blockquote-border-color</code>) and a muted <code>footer</code> for the citation.</p>\n<h2 id=\"md-inline\">Inline</h2>\n<table>\n<thead>\n<tr>\n<th>Element</th>\n<th>Style</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>strong</code>, <code>b</code></td>\n<td>Bolder</td>\n</tr>\n<tr>\n<td><code>mark</code></td>\n<td><code>--v-mark-background-color</code> highlight</td>\n</tr>\n<tr>\n<td><code>ins</code>, <code>del</code></td>\n<td><code>--v-ins-color</code> / <code>--v-del-color</code></td>\n</tr>\n<tr>\n<td><code>abbr[title]</code></td>\n<td>Dotted underline, help cursor</td>\n</tr>\n<tr>\n<td><code>sub</code>, <code>sup</code></td>\n<td>No line-height change</td>\n</tr>\n<tr>\n<td><code>small</code></td>\n<td><code>0.875em</code>; <code>small[role=&quot;note&quot;]</code> is a block-level muted note</td>\n</tr>\n<tr>\n<td><code>kbd</code>, <code>code</code>, <code>samp</code></td>\n<td>See <spa-a route-href=\"/nucleus/packages/valence/code\" role=\"link\">Code</spa-a></td>\n</tr>\n</tbody></table>\n<p><code>hr</code> is a 1px <code>--v-muted-border-color</code> rule with vertical spacing. Text selection uses <code>--v-text-selection-color</code>.</p>\n"
+  },
+  "docSections": [
+    {
+      "id": "getting-started",
+      "title": "Getting Started",
+      "docs": [
+        {
+          "name": "schemes",
+          "title": "Color schemes"
+        },
+        {
+          "name": "aliases",
+          "title": "Aliases"
+        },
+        {
+          "name": "opt_outs",
+          "title": "Opt-outs"
+        }
+      ]
+    },
+    {
+      "id": "customization",
+      "title": "Customization",
+      "docs": [
+        {
+          "name": "css_variables",
+          "title": "CSS variables"
+        },
+        {
+          "name": "themes",
+          "title": "Themes & layers"
+        }
+      ]
+    },
+    {
+      "id": "layout",
+      "title": "Layout",
+      "docs": [
+        {
+          "name": "container",
+          "title": "Container"
+        },
+        {
+          "name": "landmarks",
+          "title": "Landmarks & section"
+        },
+        {
+          "name": "grid",
+          "title": "Grid"
+        },
+        {
+          "name": "overflow_auto",
+          "title": "Overflow auto"
+        }
+      ]
+    },
+    {
+      "id": "content",
+      "title": "Content",
+      "docs": [
+        {
+          "name": "typography",
+          "title": "Typography"
+        },
+        {
+          "name": "link",
+          "title": "Link"
+        },
+        {
+          "name": "button",
+          "title": "Button"
+        },
+        {
+          "name": "table",
+          "title": "Table"
+        },
+        {
+          "name": "code",
+          "title": "Code"
+        },
+        {
+          "name": "embedded",
+          "title": "Embedded content"
+        }
+      ]
+    },
+    {
+      "id": "forms",
+      "title": "Forms",
+      "docs": [
+        {
+          "name": "forms",
+          "title": "Forms"
+        },
+        {
+          "name": "input",
+          "title": "Input"
+        },
+        {
+          "name": "textarea",
+          "title": "Textarea"
+        },
+        {
+          "name": "select",
+          "title": "Select"
+        },
+        {
+          "name": "checkboxes",
+          "title": "Checkboxes, radios & switches"
+        },
+        {
+          "name": "range",
+          "title": "Range"
+        }
+      ]
+    },
+    {
+      "id": "components",
+      "title": "Components",
+      "docs": [
+        {
+          "name": "accordion",
+          "title": "Accordion"
+        },
+        {
+          "name": "card",
+          "title": "Card"
+        },
+        {
+          "name": "dropdown",
+          "title": "Dropdown"
+        },
+        {
+          "name": "group",
+          "title": "Group"
+        },
+        {
+          "name": "loading",
+          "title": "Loading"
+        },
+        {
+          "name": "modal",
+          "title": "Modal"
+        },
+        {
+          "name": "nav",
+          "title": "Nav"
+        },
+        {
+          "name": "popover",
+          "title": "Popover"
+        },
+        {
+          "name": "progress",
+          "title": "Progress"
+        },
+        {
+          "name": "tooltip",
+          "title": "Tooltip"
+        }
+      ]
+    }
+  ],
+  "installation": {
+    "name": "@excom/valence",
+    "shortName": "valence",
+    "version": "0.1.0",
+    "description": "Semantic CSS with class / ARIA aliases for native HTML and custom elements",
+    "packageType": "library",
+    "install": {
+      "npm": "npm install @excom/valence"
+    },
+    "imports": {
+      "css": "@import \"@excom/valence/basic.css\";"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "valence",
+      "kind": "class",
+      "attributes": [],
+      "events": [],
+      "slots": [],
+      "cssProperties": [
+        {
+          "name": "--v-accordion-active-summary-color",
+          "description": "",
+          "default": "var(--v-primary-hover)"
+        },
+        {
+          "name": "--v-accordion-border-color",
+          "description": "",
+          "default": "var(--v-muted-border-color)"
+        },
+        {
+          "name": "--v-accordion-close-summary-color",
+          "description": "",
+          "default": "var(--v-color)"
+        },
+        {
+          "name": "--v-accordion-open-summary-color",
+          "description": "",
+          "default": "var(--v-muted-color)"
+        },
+        {
+          "name": "--v-background-color",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-block-spacing-horizontal",
+          "description": "",
+          "default": "var(--v-spacing)"
+        },
+        {
+          "name": "--v-block-spacing-vertical",
+          "description": "",
+          "default": "var(--v-spacing)"
+        },
+        {
+          "name": "--v-blockquote-border-color",
+          "description": "",
+          "default": "var(--v-muted-border-color)"
+        },
+        {
+          "name": "--v-blockquote-footer-color",
+          "description": "",
+          "default": "var(--v-muted-color)"
+        },
+        {
+          "name": "--v-border-radius",
+          "description": "",
+          "default": "0.25rem"
+        },
+        {
+          "name": "--v-border-width",
+          "description": "",
+          "default": "0.0625rem"
+        },
+        {
+          "name": "--v-box-shadow",
+          "description": "",
+          "default": "0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015)"
+        },
+        {
+          "name": "--v-button-box-shadow",
+          "description": "",
+          "default": "0 0 0 rgba(0, 0, 0, 0)"
+        },
+        {
+          "name": "--v-button-hover-box-shadow",
+          "description": "",
+          "default": "0 0 0 rgba(0, 0, 0, 0)"
+        },
+        {
+          "name": "--v-card-background-color",
+          "description": "",
+          "default": "var(--v-background-color)"
+        },
+        {
+          "name": "--v-card-border-color",
+          "description": "",
+          "default": "var(--v-muted-border-color)"
+        },
+        {
+          "name": "--v-card-box-shadow",
+          "description": "",
+          "default": "var(--v-box-shadow)"
+        },
+        {
+          "name": "--v-card-sectioning-background-color",
+          "description": "",
+          "default": "rgb(251, 251.5, 252.25)"
+        },
+        {
+          "name": "--v-code-background-color",
+          "description": "",
+          "default": "rgb(243, 244.5, 246.75)"
+        },
+        {
+          "name": "--v-code-color",
+          "description": "",
+          "default": "#646b79"
+        },
+        {
+          "name": "--v-code-kbd-background-color",
+          "description": "",
+          "default": "var(--v-color)"
+        },
+        {
+          "name": "--v-code-kbd-color",
+          "description": "",
+          "default": "var(--v-background-color)"
+        },
+        {
+          "name": "--v-color",
+          "description": "",
+          "default": "#373c44"
+        },
+        {
+          "name": "--v-contrast",
+          "description": "",
+          "default": "#181c25"
+        },
+        {
+          "name": "--v-contrast-background",
+          "description": "",
+          "default": "#181c25"
+        },
+        {
+          "name": "--v-contrast-border",
+          "description": "",
+          "default": "var(--v-contrast-background)"
+        },
+        {
+          "name": "--v-contrast-focus",
+          "description": "",
+          "default": "rgba(93, 107, 137, 0.25)"
+        },
+        {
+          "name": "--v-contrast-hover",
+          "description": "",
+          "default": "#000"
+        },
+        {
+          "name": "--v-contrast-hover-background",
+          "description": "",
+          "default": "#000"
+        },
+        {
+          "name": "--v-contrast-hover-border",
+          "description": "",
+          "default": "var(--v-contrast-hover-background)"
+        },
+        {
+          "name": "--v-contrast-hover-underline",
+          "description": "",
+          "default": "var(--v-secondary-hover)"
+        },
+        {
+          "name": "--v-contrast-inverse",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-contrast-underline",
+          "description": "",
+          "default": "rgba(24, 28, 37, 0.5)"
+        },
+        {
+          "name": "--v-del-color",
+          "description": "",
+          "default": "rgb(136, 56.5, 53)"
+        },
+        {
+          "name": "--v-dropdown-background-color",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-dropdown-border-color",
+          "description": "",
+          "default": "#eff1f4"
+        },
+        {
+          "name": "--v-dropdown-box-shadow",
+          "description": "",
+          "default": "var(--v-box-shadow)"
+        },
+        {
+          "name": "--v-dropdown-color",
+          "description": "",
+          "default": "var(--v-color)"
+        },
+        {
+          "name": "--v-dropdown-hover-background-color",
+          "description": "",
+          "default": "#eff1f4"
+        },
+        {
+          "name": "--v-font-family",
+          "description": "",
+          "default": "var(--v-font-family-sans-serif)"
+        },
+        {
+          "name": "--v-font-family-emoji",
+          "description": "",
+          "default": "\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
+        },
+        {
+          "name": "--v-font-family-monospace",
+          "description": "",
+          "default": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace, var(--v-font-family-emoji)"
+        },
+        {
+          "name": "--v-font-family-sans-serif",
+          "description": "",
+          "default": "system-ui, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, \"Helvetica Neue\", sans-serif, var(--v-font-family-emoji)"
+        },
+        {
+          "name": "--v-font-size",
+          "description": "",
+          "default": "100%"
+        },
+        {
+          "name": "--v-font-weight",
+          "description": "",
+          "default": "400"
+        },
+        {
+          "name": "--v-form-element-active-background-color",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-form-element-active-border-color",
+          "description": "",
+          "default": "var(--v-primary-border)"
+        },
+        {
+          "name": "--v-form-element-background-color",
+          "description": "",
+          "default": "rgb(251, 251.5, 252.25)"
+        },
+        {
+          "name": "--v-form-element-border-color",
+          "description": "",
+          "default": "#cfd5e2"
+        },
+        {
+          "name": "--v-form-element-color",
+          "description": "",
+          "default": "#23262c"
+        },
+        {
+          "name": "--v-form-element-disabled-opacity",
+          "description": "",
+          "default": "0.5"
+        },
+        {
+          "name": "--v-form-element-focus-color",
+          "description": "",
+          "default": "var(--v-primary-border)"
+        },
+        {
+          "name": "--v-form-element-invalid-active-border-color",
+          "description": "",
+          "default": "rgb(200.25, 79.25, 72.25)"
+        },
+        {
+          "name": "--v-form-element-invalid-border-color",
+          "description": "",
+          "default": "rgb(183.5, 105.5, 106.5)"
+        },
+        {
+          "name": "--v-form-element-invalid-focus-color",
+          "description": "",
+          "default": "var( --v-form-element-invalid-active-border-color )"
+        },
+        {
+          "name": "--v-form-element-placeholder-color",
+          "description": "",
+          "default": "var(--v-muted-color)"
+        },
+        {
+          "name": "--v-form-element-selected-background-color",
+          "description": "",
+          "default": "#dfe3eb"
+        },
+        {
+          "name": "--v-form-element-spacing-horizontal",
+          "description": "",
+          "default": "1rem"
+        },
+        {
+          "name": "--v-form-element-spacing-vertical",
+          "description": "",
+          "default": "0.75rem"
+        },
+        {
+          "name": "--v-form-element-valid-active-border-color",
+          "description": "",
+          "default": "rgb(39, 152.75, 118.75)"
+        },
+        {
+          "name": "--v-form-element-valid-border-color",
+          "description": "",
+          "default": "rgb(76, 154.5, 137.5)"
+        },
+        {
+          "name": "--v-form-element-valid-focus-color",
+          "description": "",
+          "default": "var( --v-form-element-valid-active-border-color )"
+        },
+        {
+          "name": "--v-grid-column-gap",
+          "description": "",
+          "default": "var(--v-spacing)"
+        },
+        {
+          "name": "--v-grid-row-gap",
+          "description": "",
+          "default": "var(--v-spacing)"
+        },
+        {
+          "name": "--v-group-box-shadow",
+          "description": "",
+          "default": "0 0 0 rgba(0, 0, 0, 0)"
+        },
+        {
+          "name": "--v-group-box-shadow-focus-with-button",
+          "description": "",
+          "default": "0 0 0 var(--v-outline-width) var(--v-primary-focus)"
+        },
+        {
+          "name": "--v-group-box-shadow-focus-with-input",
+          "description": "",
+          "default": "0 0 0 0.0625rem var(--v-form-element-border-color)"
+        },
+        {
+          "name": "--v-h1-color",
+          "description": "",
+          "default": "#2d3138"
+        },
+        {
+          "name": "--v-h2-color",
+          "description": "",
+          "default": "#373c44"
+        },
+        {
+          "name": "--v-h3-color",
+          "description": "",
+          "default": "#424751"
+        },
+        {
+          "name": "--v-h4-color",
+          "description": "",
+          "default": "#4d535e"
+        },
+        {
+          "name": "--v-h5-color",
+          "description": "",
+          "default": "#5c6370"
+        },
+        {
+          "name": "--v-h6-color",
+          "description": "",
+          "default": "#646b79"
+        },
+        {
+          "name": "--v-icon-checkbox",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-chevron",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-close",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-date",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-invalid",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-loading",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite"
+        },
+        {
+          "name": "--v-icon-minus",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-search",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-time",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-icon-valid",
+          "description": "",
+          "default": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\")"
+        },
+        {
+          "name": "--v-ins-color",
+          "description": "",
+          "default": "rgb(28.5, 105.5, 84)"
+        },
+        {
+          "name": "--v-line-height",
+          "description": "",
+          "default": "1.5"
+        },
+        {
+          "name": "--v-loading-spinner-opacity",
+          "description": "",
+          "default": "0.5"
+        },
+        {
+          "name": "--v-mark-background-color",
+          "description": "",
+          "default": "rgb(252.5, 230.5, 191.5)"
+        },
+        {
+          "name": "--v-mark-color",
+          "description": "",
+          "default": "#0f1114"
+        },
+        {
+          "name": "--v-modal-overlay-backdrop-filter",
+          "description": "",
+          "default": "blur(0.375rem)"
+        },
+        {
+          "name": "--v-modal-overlay-background-color",
+          "description": "",
+          "default": "rgba(232, 234, 237, 0.75)"
+        },
+        {
+          "name": "--v-multiply-color-0",
+          "description": "",
+          "default": "rgba(0, 0, 0, 0.02)"
+        },
+        {
+          "name": "--v-multiply-color-1",
+          "description": "",
+          "default": "rgba(0, 0, 0, 0.04)"
+        },
+        {
+          "name": "--v-muted-border-color",
+          "description": "",
+          "default": "rgb(231, 234, 239.5)"
+        },
+        {
+          "name": "--v-muted-color",
+          "description": "",
+          "default": "#646b79"
+        },
+        {
+          "name": "--v-nav-breadcrumb-divider",
+          "description": "",
+          "default": "\">\""
+        },
+        {
+          "name": "--v-nav-element-spacing-horizontal",
+          "description": "",
+          "default": "0.5rem"
+        },
+        {
+          "name": "--v-nav-element-spacing-vertical",
+          "description": "",
+          "default": "1rem"
+        },
+        {
+          "name": "--v-nav-link-spacing-horizontal",
+          "description": "",
+          "default": "0.5rem"
+        },
+        {
+          "name": "--v-nav-link-spacing-vertical",
+          "description": "",
+          "default": "0.5rem"
+        },
+        {
+          "name": "--v-outline-width",
+          "description": "",
+          "default": "0.125rem"
+        },
+        {
+          "name": "--v-popover-background-color",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-popover-border-color",
+          "description": "",
+          "default": "#eff1f4"
+        },
+        {
+          "name": "--v-popover-box-shadow",
+          "description": "",
+          "default": "var(--v-box-shadow)"
+        },
+        {
+          "name": "--v-popover-color",
+          "description": "",
+          "default": "var(--v-color)"
+        },
+        {
+          "name": "--v-popover-max-width",
+          "description": "",
+          "default": "20rem"
+        },
+        {
+          "name": "--v-primary",
+          "description": "",
+          "default": "#0172ad"
+        },
+        {
+          "name": "--v-primary-background",
+          "description": "",
+          "default": "#0172ad"
+        },
+        {
+          "name": "--v-primary-border",
+          "description": "",
+          "default": "var(--v-primary-background)"
+        },
+        {
+          "name": "--v-primary-focus",
+          "description": "",
+          "default": "rgba(2, 154, 232, 0.5)"
+        },
+        {
+          "name": "--v-primary-hover",
+          "description": "",
+          "default": "#015887"
+        },
+        {
+          "name": "--v-primary-hover-background",
+          "description": "",
+          "default": "#02659a"
+        },
+        {
+          "name": "--v-primary-hover-border",
+          "description": "",
+          "default": "var(--v-primary-hover-background)"
+        },
+        {
+          "name": "--v-primary-hover-underline",
+          "description": "",
+          "default": "var(--v-primary-hover)"
+        },
+        {
+          "name": "--v-primary-inverse",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-primary-underline",
+          "description": "",
+          "default": "rgba(1, 114, 173, 0.5)"
+        },
+        {
+          "name": "--v-progress-background-color",
+          "description": "",
+          "default": "#dfe3eb"
+        },
+        {
+          "name": "--v-progress-color",
+          "description": "",
+          "default": "var(--v-primary-background)"
+        },
+        {
+          "name": "--v-range-active-border-color",
+          "description": "",
+          "default": "#bfc7d9"
+        },
+        {
+          "name": "--v-range-border-color",
+          "description": "",
+          "default": "#dfe3eb"
+        },
+        {
+          "name": "--v-range-thumb-active-color",
+          "description": "",
+          "default": "var(--v-primary-background)"
+        },
+        {
+          "name": "--v-range-thumb-border-color",
+          "description": "",
+          "default": "var(--v-background-color)"
+        },
+        {
+          "name": "--v-range-thumb-color",
+          "description": "",
+          "default": "var(--v-secondary-background)"
+        },
+        {
+          "name": "--v-secondary",
+          "description": "",
+          "default": "#5d6b89"
+        },
+        {
+          "name": "--v-secondary-background",
+          "description": "",
+          "default": "#525f7a"
+        },
+        {
+          "name": "--v-secondary-border",
+          "description": "",
+          "default": "var(--v-secondary-background)"
+        },
+        {
+          "name": "--v-secondary-focus",
+          "description": "",
+          "default": "rgba(93, 107, 137, 0.25)"
+        },
+        {
+          "name": "--v-secondary-hover",
+          "description": "",
+          "default": "#48536b"
+        },
+        {
+          "name": "--v-secondary-hover-background",
+          "description": "",
+          "default": "#48536b"
+        },
+        {
+          "name": "--v-secondary-hover-border",
+          "description": "",
+          "default": "var(--v-secondary-hover-background)"
+        },
+        {
+          "name": "--v-secondary-hover-underline",
+          "description": "",
+          "default": "var(--v-secondary-hover)"
+        },
+        {
+          "name": "--v-secondary-inverse",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-secondary-underline",
+          "description": "",
+          "default": "rgba(93, 107, 137, 0.5)"
+        },
+        {
+          "name": "--v-spacing",
+          "description": "",
+          "default": "1rem"
+        },
+        {
+          "name": "--v-switch-background-color",
+          "description": "",
+          "default": "#bfc7d9"
+        },
+        {
+          "name": "--v-switch-checked-background-color",
+          "description": "",
+          "default": "var(--v-primary-background)"
+        },
+        {
+          "name": "--v-switch-color",
+          "description": "",
+          "default": "#fff"
+        },
+        {
+          "name": "--v-switch-thumb-box-shadow",
+          "description": "",
+          "default": "0 0 0 rgba(0, 0, 0, 0)"
+        },
+        {
+          "name": "--v-table-border-color",
+          "description": "",
+          "default": "var(--v-muted-border-color)"
+        },
+        {
+          "name": "--v-table-row-stripped-background-color",
+          "description": "",
+          "default": "rgba(111, 120, 135, 0.0375)"
+        },
+        {
+          "name": "--v-table-sticky-top",
+          "description": "",
+          "default": "0px"
+        },
+        {
+          "name": "--v-text-selection-color",
+          "description": "",
+          "default": "rgba(2, 154, 232, 0.25)"
+        },
+        {
+          "name": "--v-text-underline-offset",
+          "description": "",
+          "default": "0.1rem"
+        },
+        {
+          "name": "--v-tooltip-background-color",
+          "description": "",
+          "default": "var(--v-contrast-background)"
+        },
+        {
+          "name": "--v-tooltip-color",
+          "description": "",
+          "default": "var(--v-contrast-inverse)"
+        },
+        {
+          "name": "--v-transition",
+          "description": "",
+          "default": "var(--v-transition-duration-standard) var(--v-transition-ease-out)"
+        },
+        {
+          "name": "--v-transition-duration-fast",
+          "description": "",
+          "default": "0.15s"
+        },
+        {
+          "name": "--v-transition-duration-slow",
+          "description": "",
+          "default": "0.4s"
+        },
+        {
+          "name": "--v-transition-duration-standard",
+          "description": "",
+          "default": "0.25s"
+        },
+        {
+          "name": "--v-transition-ease-in",
+          "description": "",
+          "default": "cubic-bezier(0.4, 0, 1, 1)"
+        },
+        {
+          "name": "--v-transition-ease-in-out",
+          "description": "",
+          "default": "cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        {
+          "name": "--v-transition-ease-out",
+          "description": "",
+          "default": "cubic-bezier(0, 0, 0.2, 1)"
+        },
+        {
+          "name": "--v-typography-spacing-vertical",
+          "description": "",
+          "default": "1rem"
+        }
+      ],
+      "cssClasses": [
+        {
+          "name": "close",
+          "description": "Close control — <code>.close</code> or <code>:--button</code> / <code>:--link</code> with <code>rel=&quot;prev&quot;</code> Renders the theme close icon (empty content)."
+        },
+        {
+          "name": "container",
+          "description": "Centered page column with responsive max-width."
+        },
+        {
+          "name": "container-fluid",
+          "description": "Full-width fluid column (padding only, no max-width)."
+        },
+        {
+          "name": "contrast",
+          "description": "High-contrast link flavor."
+        },
+        {
+          "name": "dropdown",
+          "description": "Dropdown menu — apply to <code>&lt;details&gt;</code> / <code>:--details</code>."
+        },
+        {
+          "name": "grid",
+          "description": "Auto-fit responsive columns."
+        },
+        {
+          "name": "nested",
+          "description": "Nested card — quieter border / shadow inside another card."
+        },
+        {
+          "name": "outline",
+          "description": "Outline (ghost) button flavor — pair with <code>.secondary</code> / <code>.contrast</code>."
+        },
+        {
+          "name": "overflow-auto",
+          "description": "Scrollable overflow container."
+        },
+        {
+          "name": "secondary",
+          "description": "Muted / secondary link flavor."
+        },
+        {
+          "name": "show-scrollbar",
+          "description": "Always show a styled vertical scrollbar."
+        },
+        {
+          "name": "sticky",
+          "description": "Sticky table header row."
+        },
+        {
+          "name": "striped",
+          "description": "Alternating row background."
+        },
+        {
+          "name": "unanimated",
+          "description": "Disable transitions / animations on one element."
+        },
+        {
+          "name": "unanimated-all",
+          "description": "Disable transitions / animations on an element and all descendants."
+        },
+        {
+          "name": "unstyled",
+          "description": "Opt out of Valence.css styles on one element."
+        },
+        {
+          "name": "unstyled-all",
+          "description": "Opt out of Valence.css styles on an element and all descendants."
+        }
+      ],
+      "cssAliases": [
+        {
+          "name": ":--abbr",
+          "selectors": [
+            "abbr",
+            ".tag-abbr"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--address",
+          "selectors": [
+            "address",
+            ".tag-address"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--article",
+          "selectors": [
+            "article",
+            "[role=\"article\"]",
+            ".tag-article"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--aside",
+          "selectors": [
+            "aside",
+            "[role=\"complementary\"]",
+            ".tag-aside"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--b",
+          "selectors": [
+            "b",
+            ".tag-b"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--blockquote",
+          "selectors": [
+            "blockquote",
+            "[role=\"blockquote\"]",
+            ".tag-blockquote"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--button",
+          "selectors": [
+            "button",
+            "[role=\"button\"]",
+            "[type=\"button\"]",
+            ".tag-button"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--button--disabled",
+          "selectors": [
+            "[disabled]",
+            "[aria-disabled=\"true\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--code",
+          "selectors": [
+            "code",
+            "[role=\"code\"]",
+            ".tag-code"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--del",
+          "selectors": [
+            "del",
+            "[role=\"deletion\"]",
+            ".tag-del"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--details",
+          "selectors": [
+            "details",
+            ".tag-details"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--details--open",
+          "selectors": [
+            "[open]",
+            "[aria-expanded=\"true\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--dialog",
+          "selectors": [
+            "dialog",
+            "[role=\"dialog\"]",
+            ".tag-dialog"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--dialog--open",
+          "selectors": [
+            ":is(dialog)[open]",
+            "[aria-expanded=\"true\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--dialog-backdrop-aliases",
+          "selectors": [
+            "[role=\"presentation\"]",
+            ".tag-backdrop"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--dialog-close",
+          "selectors": [
+            ".close",
+            ":is(:--link, :--button)[rel=\"prev\"]"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--dl",
+          "selectors": [
+            "dl",
+            ".tag-dl"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--figcaption",
+          "selectors": [
+            "figcaption",
+            "[role=\"caption\"]:is(figure *, [role=\"figure\"] *)",
+            ".tag-figcaption"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--figure",
+          "selectors": [
+            "figure",
+            "[role=\"figure\"]",
+            ".tag-figure"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--footer",
+          "selectors": [
+            "footer",
+            "[role=\"footer\"]",
+            ".tag-footer"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--form",
+          "selectors": [
+            "form",
+            "[role=\"form\"]",
+            ".tag-form"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--group",
+          "selectors": [
+            "[role=\"group\"]",
+            ".tag-group"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h1",
+          "selectors": [
+            "h1",
+            "[role=\"heading\"][aria-level=\"1\"]",
+            ".tag-h1"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h2",
+          "selectors": [
+            "h2",
+            "[role=\"heading\"][aria-level=\"2\"]",
+            ".tag-h2"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h3",
+          "selectors": [
+            "h3",
+            "[role=\"heading\"][aria-level=\"3\"]",
+            ".tag-h3"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h4",
+          "selectors": [
+            "h4",
+            "[role=\"heading\"][aria-level=\"4\"]",
+            ".tag-h4"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h5",
+          "selectors": [
+            "h5",
+            "[role=\"heading\"][aria-level=\"5\"]",
+            ".tag-h5"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--h6",
+          "selectors": [
+            "h6",
+            "[role=\"heading\"][aria-level=\"6\"]",
+            ".tag-h6"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--header",
+          "selectors": [
+            "header",
+            "[role=\"header\"]",
+            ".tag-header"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--heading",
+          "selectors": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "[role=\"heading\"]",
+            ".tag-heading"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--hgroup",
+          "selectors": [
+            "hgroup",
+            ".tag-hgroup"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--hr",
+          "selectors": [
+            "hr",
+            "[role=\"separator\"]",
+            ".tag-hr"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--img",
+          "selectors": [
+            "img",
+            "[role=\"img\"]",
+            ".tag-img"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--ins",
+          "selectors": [
+            "ins",
+            "[role=\"insertion\"]",
+            ".tag-ins"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--kbd",
+          "selectors": [
+            "kbd",
+            ".tag-kbd"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--label",
+          "selectors": [
+            "label",
+            "[role=\"label\"]",
+            ".tag-label"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--li",
+          "selectors": [
+            "li",
+            "[role=\"listitem\"]",
+            ".tag-li"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--link",
+          "selectors": [
+            "a",
+            "[role=\"link\"]",
+            ".tag-link"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--list",
+          "selectors": [
+            "ul",
+            "ol",
+            "[role=\"list\"]",
+            ".tag-list"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--main",
+          "selectors": [
+            "main",
+            "[role=\"main\"]",
+            ".tag-main"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--mark",
+          "selectors": [
+            "mark",
+            "[role=\"mark\"]",
+            ".tag-mark"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--nav",
+          "selectors": [
+            "nav",
+            "[role=\"navigation\"]",
+            ".tag-nav"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--note",
+          "selectors": [
+            "[role=\"note\"]",
+            ".tag-note"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--ol",
+          "selectors": [
+            "ol",
+            ".tag-ol"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--p",
+          "selectors": [
+            "p",
+            "[role=\"paragraph\"]",
+            ".tag-p"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--popover",
+          "selectors": [
+            "[popover]",
+            ".tag-popover"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--popover--open",
+          "selectors": [
+            ":popover-open",
+            "[aria-expanded=\"true\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--pre",
+          "selectors": [
+            "pre",
+            ".tag-pre"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--progress",
+          "selectors": [
+            "progress",
+            "[role=\"progressbar\"]",
+            ".tag-progress"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--progress--indeterminate",
+          "selectors": [
+            ":is(progress):indeterminate",
+            ":is([role=\"progressbar\"], .tag-progress):not(:--progress--value)"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--progress--value",
+          "selectors": [
+            "[value]",
+            "[aria-valuenow]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--progress-aliases",
+          "selectors": [
+            "[role=\"progressbar\"]",
+            ".tag-progress"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--samp",
+          "selectors": [
+            "samp",
+            ".tag-samp"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--search",
+          "selectors": [
+            "[role=\"search\"]",
+            ".tag-search"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--section",
+          "selectors": [
+            "section",
+            "[role=\"section\"]",
+            ".tag-section"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--small",
+          "selectors": [
+            "small",
+            ".tag-small"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--strong",
+          "selectors": [
+            "strong",
+            ".tag-strong"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--sub",
+          "selectors": [
+            "sub",
+            ".tag-sub"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--summary",
+          "selectors": [
+            "summary",
+            ".tag-summary"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--sup",
+          "selectors": [
+            "sup",
+            ".tag-sup"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--table",
+          "selectors": [
+            "table",
+            "[role=\"table\"]",
+            ".tag-table"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--tbody",
+          "selectors": [
+            "tbody",
+            "[role=\"rowgroup\"]:has(:--tbody-th, :--td)",
+            ".tag-tbody"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--tbody-th",
+          "selectors": [
+            "th:not([scope=\"col\"])",
+            "[role=\"rowheader\"]",
+            "[scope=\"row\"]",
+            ".tag-th-row"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--td",
+          "selectors": [
+            "td",
+            "[role=\"cell\"]",
+            "[role=\"gridcell\"]",
+            ".tag-td"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--tfoot",
+          "selectors": [
+            "tfoot",
+            ".tag-tfoot"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--th",
+          "selectors": [
+            "th",
+            "[role=\"columnheader\"]",
+            "[role=\"rowheader\"]",
+            "[scope=\"col\"]",
+            "[scope=\"row\"]",
+            ".tag-th"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--th--sort",
+          "selectors": [
+            "[aria-sort]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--th--sort-asc",
+          "selectors": [
+            "[aria-sort=\"ascending\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--th--sort-desc",
+          "selectors": [
+            "[aria-sort=\"descending\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--thead",
+          "selectors": [
+            "thead",
+            "[role=\"rowgroup\"]:has(:--thead-th)",
+            ".tag-thead"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--thead-th",
+          "selectors": [
+            "th:not([scope=\"row\"])",
+            "[role=\"columnheader\"]",
+            "[scope=\"col\"]",
+            ".tag-th-col"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--tr",
+          "selectors": [
+            "tr",
+            "[role=\"row\"]",
+            ".tag-tr"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--tree",
+          "selectors": [
+            "[role=\"tree\"]",
+            ".tag-tree"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--ul",
+          "selectors": [
+            "ul",
+            ".tag-ul"
+          ],
+          "kind": "element",
+          "description": ""
+        }
+      ],
+      "listens": [],
+      "commands": [],
+      "defaultActions": [],
+      "expectedChildren": [],
+      "provisions": []
+    }
+  ],
+  "exportedFiles": {}
+}