Details

<details class="details">
            <summary>What's included in brio's core CSS?</summary>
            <p>
                Tokens, composition primitives, and components that a typical web-app UI needs on
                day one: alert, badge, button, card, code, details, dialog, dismiss, divider,
                drawer, icon, input, list, nav-link, navbar, sidebar, sidebar-nav, spinner, table.
            </p>
        </details>

<div>
            <details class="details is-flush">
                <summary>How do I override a component's tokens?</summary>
                <p>
                    Set the component's scoped custom property on the element, a parent, or a
                    theme-level selector. Every variant and state remap flows from these tokens, so
                    override once and every derived state follows.
                </p>
            </details>
            <details class="details is-flush">
                <summary>Where do I find the full token list?</summary>
                <p>
                    The <a href="{{.Site.BasePath}}/tokens">Tokens</a> reference page catalogs every
                    semantic token and its default value. Component-scoped tokens live in each
                    component's reference page under Token overrides.
                </p>
            </details>
            <details class="details is-flush">
                <summary>Can I use brio with a JS framework?</summary>
                <p>
                    The CSS works anywhere. The small progressive-enhancement JS layer targets
                    authored HTML via queries and attributes; it doesn't conflict with frameworks
                    that render HTML server-side or client-side.
                </p>
            </details>
        </div>

<details class="details is-filled">
            <summary>Why does brio use cascade layers?</summary>
            <p>
                Layers give us a reliable order (<code
                    >reset &lt; tokens &lt; animations &lt; base &lt; composition &lt; blocks &lt;
                    utilities &lt; overrides</code
                >) that doesn't depend on import order or source position. A component in
                <code>blocks</code> always beats a composition rule with the same specificity;
                utilities always win over blocks; overrides always win over everything. Specificity
                becomes a per-layer concern rather than a global conflict.
            </p>
        </details>

<details class="details no-border">
            <summary>Disclosure without a border</summary>
            <p>
                Use it inside a container that already carries its own frame: a card, a drawer body,
                a sidebar. The border was the only thing marking the widget's bounds, so give the
                disclosure some other context to sit in.
            </p>
        </details>

<div class="stack is-snug">
            <details class="details is-info">
                <summary>Info: using brio with an existing design system</summary>
                <p>
                    Expose brio's semantic tokens in your design system as the source of truth, and
                    your existing components can consume them without competing with brio's cascade.
                </p>
            </details>
            <details class="details is-success">
                <summary>Ready: the .details animation works natively</summary>
                <p>
                    No JavaScript is required for the expand/collapse animation -- it's built on
                    <code>::details-content</code> and
                    <code>interpolate-size: allow-keywords</code>.
                </p>
            </details>
            <details class="details is-warning">
                <summary>Caution: don't hide critical information</summary>
                <p>
                    Details is for secondary information the reader might want. Do not fold away
                    error messages, accessibility notices, or content the reader must see to
                    complete a task.
                </p>
            </details>
            <details class="details is-danger">
                <summary>Destructive: uninstalling brio</summary>
                <p>
                    Removing brio.css from your bundle returns every component to unstyled HTML.
                    Double-check that no consumer code relies on brio's token values before
                    removing.
                </p>
            </details>
        </div>