svelora 3.0.12 → 3.0.13

package/dist/mcp/svelora-docs.data.json

@@ -1,8 +1,8 @@
 {
   "version": 1,
   "packageName": "svelora",
-  "packageVersion": "3.0.12",
-  "generatedAt": "2026-06-27T01:43:31.166Z",
+  "packageVersion": "3.0.13",
+  "generatedAt": "2026-06-27T06:22:41.961Z",
   "slugs": {
     "components": [
       "button",
@@ -102,9 +102,9 @@
   },
   "pages": {
     "button": "<script lang=\"ts\">\n    import { Button, Icon } from '$lib/index.js'\n\n    const variants = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'] as const\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Button</h1>\n        <p class=\"text-on-surface-variant\">\n            Use the Button component to trigger actions or navigate with\n            <code class=\"rounded bg-surface-container-highest px-1\">href</code>. Supports multiple\n            variants, colors, sizes, icons, avatars, and loading states.\n        </p>\n        <div\n            class=\"rounded-lg border border-outline-variant bg-surface-container-high px-4 py-3 text-sm text-on-surface-variant\"\n        >\n            <strong class=\"text-on-surface\">Mode guide:</strong>\n            omit <code class=\"rounded bg-surface-container-highest px-1\">href</code> for a native\n            <code class=\"rounded bg-surface-container-highest px-1\">&lt;button&gt;</code> with form\n            attributes like\n            <code class=\"rounded bg-surface-container-highest px-1\">type</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">formaction</code>, and\n            <code class=\"rounded bg-surface-container-highest px-1\">formmethod</code>. Add\n            <code class=\"rounded bg-surface-container-highest px-1\">href</code> to render an anchor\n            for navigation instead.\n        </div>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">label</code> prop or the default\n            slot to set the button text.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button label=\"Button\" />\n        </div>\n    </section>\n\n    <!-- Variant -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variant\" class=\"text-lg font-semibold\">\n<a href=\"#Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">variant</code> prop to\n            change the visual style. Defaults to\n            <code class=\"rounded bg-surface-container-highest px-1\">solid</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each variants as variant (variant)}\n                <Button {variant} label={variant[0].toUpperCase() + variant.slice(1)} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Color -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Color\" class=\"text-lg font-semibold\">\n<a href=\"#Color\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Color\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">color</code> prop to\n            change the color scheme. Defaults to\n            <code class=\"rounded bg-surface-container-highest px-1\">primary</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each colors as color (color)}\n                <Button {color} label={color[0].toUpperCase() + color.slice(1)} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Variant x Color Matrix -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variant--Color-Matrix\" class=\"text-lg font-semibold\">\n<a href=\"#Variant--Color-Matrix\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variant & Color Matrix\n                    </a>\n</h2>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant\">\n                        <th class=\"px-2 py-3 text-left text-sm font-medium text-on-surface-variant\"\n                            >Variant</th\n                        >\n                        {#each colors as color (color)}\n                            <th\n                                class=\"px-2 py-3 text-center text-sm font-medium text-on-surface-variant capitalize\"\n                                >{color}</th\n                            >\n                        {/each}\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each variants as variant (variant)}\n                        <tr class=\"border-b border-outline-variant/50\">\n                            <td\n                                class=\"px-2 py-3 text-sm font-medium text-on-surface-variant capitalize\"\n                                >{variant}</td\n                            >\n                            {#each colors as color (color)}\n                                <td class=\"px-2 py-3 text-center\">\n                                    <Button {variant} {color} label=\"Button\" />\n                                </td>\n                            {/each}\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Size -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Size\" class=\"text-lg font-semibold\">\n<a href=\"#Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">size</code> prop to\n            change the dimensions. Defaults to\n            <code class=\"rounded bg-surface-container-highest px-1\">md</code>.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <Button {size} label={size.toUpperCase()} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Icon -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Icon\" class=\"text-lg font-semibold\">\n<a href=\"#Icon\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icon\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">icon</code> prop to\n            display an icon in the button. By default the icon is placed on the leading side. Use\n            the\n            <code class=\"rounded bg-surface-container-highest px-1\">trailing</code> prop to move it to\n            the trailing side.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button icon=\"lucide:rocket\" label=\"Launch\" />\n            <Button icon=\"lucide:arrow-right\" trailing label=\"Next\" />\n        </div>\n    </section>\n\n    <!-- Leading & Trailing Icon -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Leading--Trailing-Icon\" class=\"text-lg font-semibold\">\n<a href=\"#Leading--Trailing-Icon\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Leading & Trailing Icon\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">leadingIcon</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">trailingIcon</code> to display icons\n            on both sides simultaneously.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button leadingIcon=\"lucide:plus\" label=\"Add Item\" />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                trailingIcon=\"lucide:arrow-right\"\n                label=\"Next\"\n            />\n            <Button\n                variant=\"soft\"\n                color=\"success\"\n                leadingIcon=\"lucide:check\"\n                trailingIcon=\"lucide:chevron-down\"\n                label=\"Confirm\"\n            />\n        </div>\n    </section>\n\n    <!-- Square (Icon Only) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Square\" class=\"text-lg font-semibold\">\n<a href=\"#Square\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Square\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">square</code> prop to\n            force equal width and height — ideal for icon-only buttons. When only\n            <code class=\"rounded bg-surface-container-highest px-1\">icon</code> is provided without\n            <code class=\"rounded bg-surface-container-highest px-1\">label</code>, the button is\n            automatically treated as icon-only.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <Button {size} icon=\"lucide:plus\" square />\n            {/each}\n            <span class=\"mx-2 text-on-surface-variant\">|</span>\n            <Button variant=\"outline\" color=\"secondary\" icon=\"lucide:settings\" square />\n            <Button variant=\"soft\" color=\"success\" icon=\"lucide:check\" square />\n            <Button variant=\"subtle\" color=\"warning\" icon=\"lucide:alert-triangle\" square />\n            <Button variant=\"ghost\" color=\"error\" icon=\"lucide:x\" square />\n        </div>\n    </section>\n\n    <!-- Avatar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Avatar\" class=\"text-lg font-semibold\">\n<a href=\"#Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatar\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">avatar</code> prop to\n            display an avatar before the label. Takes precedence over\n            <code class=\"rounded bg-surface-container-highest px-1\">leadingIcon</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"soft\"\n                avatar={{ src: 'https://i.pravatar.cc/150?img=1', alt: 'John' }}\n                label=\"John Doe\"\n            />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                avatar={{ src: 'https://i.pravatar.cc/150?img=2', alt: 'Jane' }}\n                label=\"Jane Smith\"\n            />\n            <Button variant=\"solid\" color=\"tertiary\" avatar={{ alt: 'New' }} label=\"New User\" />\n            <Button\n                variant=\"ghost\"\n                color=\"secondary\"\n                avatar={{ src: 'https://i.pravatar.cc/150?img=5', alt: 'User' }}\n                label=\"Profile\"\n                trailingIcon=\"lucide:chevron-down\"\n            />\n        </div>\n\n        <p class=\"text-sm text-on-surface-variant\">\n            The avatar size automatically adapts to the button size.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <Button\n                    variant=\"soft\"\n                    {size}\n                    avatar={{ src: 'https://i.pravatar.cc/150?img=3', alt: 'User' }}\n                    label={size.toUpperCase()}\n                />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Loading -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Loading\" class=\"text-lg font-semibold\">\n<a href=\"#Loading\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">loading</code> prop to\n            show a loading spinner and disable the button. The spinner replaces the leading icon by\n            default. Use\n            <code class=\"rounded bg-surface-container-highest px-1\">trailing</code> to place it on the\n            trailing side.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button loading label=\"Loading...\" />\n            <Button variant=\"outline\" color=\"secondary\" loading label=\"Processing\" />\n            <Button variant=\"soft\" color=\"success\" loading icon=\"lucide:loader-2\" square />\n            <Button variant=\"solid\" color=\"info\" loading trailing label=\"Uploading\" />\n        </div>\n    </section>\n\n    <!-- Loading Auto -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Loading-Auto\" class=\"text-lg font-semibold\">\n<a href=\"#Loading-Auto\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading Auto\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">loadingAuto</code> prop\n            to automatically show loading state while the\n            <code class=\"rounded bg-surface-container-highest px-1\">onclick</code> handler's Promise is\n            pending. The button is disabled until the Promise resolves or rejects.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                loadingAuto\n                label=\"Save (2s)\"\n                leadingIcon=\"lucide:save\"\n                onclick={() => new Promise((r) => setTimeout(r, 2000))}\n            />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                loadingAuto\n                label=\"Submit (3s)\"\n                onclick={() => new Promise((r) => setTimeout(r, 3000))}\n            />\n            <Button\n                variant=\"soft\"\n                color=\"error\"\n                loadingAuto\n                label=\"Delete (1s)\"\n                leadingIcon=\"lucide:trash-2\"\n                onclick={() => new Promise((r) => setTimeout(r, 1000))}\n            />\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">disabled</code> prop to disable\n            the button and prevent interaction.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each variants as variant (variant)}\n                <Button {variant} disabled label=\"Disabled\" />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Block -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Block\" class=\"text-lg font-semibold\">\n<a href=\"#Block\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Block\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">block</code> prop to stretch\n            the button to fill the full width of its container.\n        </p>\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <Button block label=\"Full Width Button\" />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                block\n                leadingIcon=\"lucide:mail\"\n                trailingIcon=\"lucide:arrow-right\"\n                label=\"Send Email\"\n            />\n        </div>\n    </section>\n\n    <!-- As Link -->\n    <section class=\"space-y-3\">\n        <h2 id=\"As-Link\" class=\"text-lg font-semibold\">\n<a href=\"#As-Link\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        As Link\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">href</code> prop to\n            render as an anchor element. External URLs are auto-detected with\n            <code class=\"rounded bg-surface-container-highest px-1\">target=\"_blank\"</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">rel=\"noopener noreferrer\"</code\n            >. Use the\n            <code class=\"rounded bg-surface-container-highest px-1\">external</code> prop to force this\n            behavior on internal paths.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button href=\"/link\" label=\"Internal Link\" />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                href=\"https://svelte.dev\"\n                label=\"External Link\"\n                trailingIcon=\"lucide:external-link\"\n            />\n            <Button\n                variant=\"soft\"\n                color=\"info\"\n                href=\"/button\"\n                label=\"Current Page\"\n                leadingIcon=\"lucide:link\"\n            />\n            <Button variant=\"ghost\" color=\"error\" href=\"/about\" disabled label=\"Disabled Link\" />\n        </div>\n    </section>\n\n    <!-- Type -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Type\" class=\"text-lg font-semibold\">\n<a href=\"#Type\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Type\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">type</code> prop to set\n            the button type attribute. Defaults to\n            <code class=\"rounded bg-surface-container-highest px-1\">button</code>. Only applies when\n            rendering as a &lt;button&gt; element (no\n            <code class=\"rounded bg-surface-container-highest px-1\">href</code>).\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button label=\"Button (default)\" />\n            <Button variant=\"outline\" color=\"success\" type=\"submit\" label=\"Submit\" />\n            <Button variant=\"ghost\" color=\"secondary\" type=\"reset\" label=\"Reset\" />\n        </div>\n    </section>\n\n    <!-- Native Form -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Native-Form-Submit\" class=\"text-lg font-semibold\">\n<a href=\"#Native-Form-Submit\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Native Form Submit\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When <code class=\"rounded bg-surface-container-highest px-1\">href</code> is omitted,\n            <code class=\"rounded bg-surface-container-highest px-1\">Button</code> renders a native\n            <code class=\"rounded bg-surface-container-highest px-1\">&lt;button&gt;</code> element. This\n            means browser form semantics such as\n            <code class=\"rounded bg-surface-container-highest px-1\">type</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">formaction</code>, and\n            <code class=\"rounded bg-surface-container-highest px-1\">formmethod</code> work as expected.\n        </p>\n        <form class=\"space-y-3 rounded-lg bg-surface-container-high p-4\" onsubmit={(event) => event.preventDefault()}>\n            <div class=\"grid gap-3 sm:grid-cols-2\">\n                <label class=\"grid gap-1 text-sm\">\n                    <span class=\"text-on-surface-variant\">Phone</span>\n                    <input\n                        class=\"rounded-lg border border-outline-variant bg-surface px-3 py-2\"\n                        placeholder=\"081-234-5678\"\n                    />\n                </label>\n                <label class=\"grid gap-1 text-sm\">\n                    <span class=\"text-on-surface-variant\">Code</span>\n                    <input\n                        class=\"rounded-lg border border-outline-variant bg-surface px-3 py-2\"\n                        placeholder=\"123456\"\n                    />\n                </label>\n            </div>\n            <div class=\"flex flex-wrap gap-3\">\n                <Button\n                    type=\"submit\"\n                    formaction=\"?/sendOtp\"\n                    formmethod=\"post\"\n                    variant=\"outline\"\n                    color=\"secondary\"\n                    label=\"Send Code\"\n                />\n                <Button\n                    type=\"submit\"\n                    formaction=\"?/login\"\n                    formmethod=\"post\"\n                    label=\"Sign In\"\n                />\n            </div>\n        </form>\n    </section>\n\n    <!-- Mode Notes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Mode-Notes\" class=\"text-lg font-semibold\">\n<a href=\"#Mode-Notes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Mode Notes\n                    </a>\n</h2>\n        <div class=\"overflow-x-auto rounded-lg bg-surface-container-high p-4\">\n            <table class=\"w-full text-sm\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant text-left text-on-surface-variant\">\n                        <th class=\"px-2 py-2 font-medium\">Mode</th>\n                        <th class=\"px-2 py-2 font-medium\">Rendered element</th>\n                        <th class=\"px-2 py-2 font-medium\">Use for</th>\n                        <th class=\"px-2 py-2 font-medium\">Important props</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr class=\"border-b border-outline-variant/50 align-top\">\n                        <td class=\"px-2 py-3 font-medium text-on-surface\">Button mode</td>\n                        <td class=\"px-2 py-3\">\n                            <code class=\"rounded bg-surface-container-highest px-1\"\n                                >&lt;button&gt;</code\n                            >\n                        </td>\n                        <td class=\"px-2 py-3\">Actions, submit, reset, and native form behavior</td>\n                        <td class=\"px-2 py-3\">\n                            <code class=\"rounded bg-surface-container-highest px-1\">type</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">name</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">value</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">formaction</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">formmethod</code>\n                        </td>\n                    </tr>\n                    <tr class=\"align-top\">\n                        <td class=\"px-2 py-3 font-medium text-on-surface\">Link mode</td>\n                        <td class=\"px-2 py-3\">\n                            <code class=\"rounded bg-surface-container-highest px-1\">&lt;a&gt;</code>\n                        </td>\n                        <td class=\"px-2 py-3\">Navigation to internal or external destinations</td>\n                        <td class=\"px-2 py-3\">\n                            <code class=\"rounded bg-surface-container-highest px-1\">href</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">target</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">rel</code>,\n                            <code class=\"rounded bg-surface-container-highest px-1\">download</code>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Active Color & Variant -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Active-Color--Variant\" class=\"text-lg font-semibold\">\n<a href=\"#Active-Color--Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Active Color & Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use\n            <code class=\"rounded bg-surface-container-highest px-1\">activeColor</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">activeVariant</code> to change\n            the button appearance when\n            <code class=\"rounded bg-surface-container-highest px-1\">active</code> is true. Falls\n            back to the default\n            <code class=\"rounded bg-surface-container-highest px-1\">color</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">variant</code> when inactive.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"ghost\"\n                color=\"secondary\"\n                active\n                activeColor=\"primary\"\n                activeVariant=\"solid\"\n                label=\"Dashboard\"\n                leadingIcon=\"lucide:home\"\n            />\n            <Button\n                variant=\"ghost\"\n                color=\"secondary\"\n                label=\"Settings\"\n                leadingIcon=\"lucide:settings\"\n            />\n            <Button\n                variant=\"ghost\"\n                color=\"secondary\"\n                active\n                activeColor=\"error\"\n                activeVariant=\"soft\"\n                label=\"Alerts\"\n                leadingIcon=\"lucide:bell\"\n            />\n            <Button variant=\"ghost\" color=\"secondary\" label=\"Profile\" leadingIcon=\"lucide:user\" />\n        </div>\n    </section>\n\n    <!-- Children Slot -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Children\" class=\"text-lg font-semibold\">\n<a href=\"#Children\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Children\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the default slot to render custom content inside the button instead of the\n            <code class=\"rounded bg-surface-container-highest px-1\">label</code> prop.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button>\n                <Icon name=\"lucide:sparkles\" size=\"16\" />\n                <span>Custom Content</span>\n            </Button>\n            <Button variant=\"outline\" color=\"tertiary\">\n                <span class=\"font-bold\">Bold</span>\n                <span class=\"font-light\">& Light</span>\n            </Button>\n        </div>\n    </section>\n\n    <!-- Leading & Trailing Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Leading--Trailing-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Leading--Trailing-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Leading & Trailing Slots\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">leadingSlot</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">trailingSlot</code> for fully\n            custom leading/trailing content. They take precedence over\n            <code class=\"rounded bg-surface-container-highest px-1\">avatar</code> and icon props.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#snippet statusSlot()}\n                <span class=\"relative flex size-2\">\n                    <span\n                        class=\"absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75\"\n                    ></span>\n                    <span class=\"relative inline-flex size-2 rounded-full bg-success\"></span>\n                </span>\n            {/snippet}\n            <Button variant=\"outline\" color=\"success\" leadingSlot={statusSlot} label=\"Online\" />\n\n            {#snippet badgeSlot()}\n                <span\n                    class=\"flex size-5 items-center justify-center rounded-full bg-error text-xs font-bold text-on-error\"\n                    >3</span\n                >\n            {/snippet}\n            <Button\n                variant=\"ghost\"\n                color=\"secondary\"\n                leadingIcon=\"lucide:bell\"\n                trailingSlot={badgeSlot}\n                label=\"Notifications\"\n            />\n\n            {#snippet kbdSlot()}\n                <kbd\n                    class=\"rounded border border-outline-variant bg-surface-container px-1.5 py-0.5 font-mono text-xs text-on-surface-variant\"\n                    >&#8984;K</kbd\n                >\n            {/snippet}\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                leadingIcon=\"lucide:search\"\n                trailingSlot={kbdSlot}\n                label=\"Search\"\n            />\n        </div>\n    </section>\n\n    <!-- UI -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI\" class=\"text-lg font-semibold\">\n<a href=\"#UI\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">ui</code> prop to\n            override classes for specific slots:\n            <code class=\"rounded bg-surface-container-highest px-1\">base</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">label</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">leadingIcon</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">trailingIcon</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">leadingAvatar</code>.\n        </p>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Base slot</p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button label=\"Pill Button\" class=\"rounded-full\" />\n            <Button\n                color=\"tertiary\"\n                label=\"With Shadow\"\n                ui={{ base: 'shadow-lg shadow-tertiary/30' }}\n            />\n            <Button\n                label=\"Gradient\"\n                ui={{\n                    base: 'bg-linear-to-r from-primary to-tertiary hover:from-primary/90 hover:to-tertiary/90'\n                }}\n            />\n            <Button\n                variant=\"outline\"\n                color=\"warning\"\n                label=\"Dashed Border\"\n                ui={{ base: 'border-2 border-dashed ring-0' }}\n            />\n        </div>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Label slot</p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button label=\"Uppercase\" ui={{ label: 'uppercase tracking-wider' }} />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                label=\"Italic Text\"\n                ui={{ label: 'italic' }}\n            />\n            <Button variant=\"soft\" color=\"success\" label=\"monospace\" ui={{ label: 'font-mono' }} />\n            <Button\n                variant=\"ghost\"\n                label=\"Gradient Text\"\n                ui={{\n                    label: 'bg-linear-to-r from-primary to-tertiary bg-clip-text text-transparent'\n                }}\n            />\n        </div>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Icon slots</p>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                leadingIcon=\"lucide:settings\"\n                label=\"Hover Rotate\"\n                ui={{ leadingIcon: 'transition-transform duration-300 group-hover:rotate-90' }}\n                class=\"group\"\n            />\n            <Button\n                variant=\"soft\"\n                color=\"success\"\n                leadingIcon=\"lucide:bell\"\n                label=\"Bouncing\"\n                ui={{ leadingIcon: 'animate-bounce' }}\n            />\n            <Button\n                variant=\"outline\"\n                color=\"secondary\"\n                leadingIcon=\"lucide:heart\"\n                label=\"Colored Icon\"\n                ui={{ leadingIcon: 'text-error' }}\n            />\n            <Button\n                variant=\"solid\"\n                color=\"info\"\n                trailingIcon=\"lucide:arrow-right\"\n                label=\"Hover Slide\"\n                ui={{ trailingIcon: 'transition-transform duration-200 group-hover:translate-x-1' }}\n                class=\"group\"\n            />\n        </div>\n    </section>\n\n    <!-- Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Examples\n                    </a>\n</h2>\n\n        <!-- Action Bar -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Action bar</p>\n            <div class=\"flex items-center gap-2\">\n                <Button leadingIcon=\"lucide:save\" label=\"Save\" />\n                <Button variant=\"outline\" color=\"secondary\" label=\"Cancel\" />\n                <div class=\"flex-1\"></div>\n                <Button variant=\"ghost\" color=\"error\" leadingIcon=\"lucide:trash-2\" label=\"Delete\" />\n            </div>\n        </div>\n\n        <!-- Navigation -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Navigation</p>\n            <div class=\"flex items-center gap-1\">\n                <Button\n                    variant=\"ghost\"\n                    color=\"secondary\"\n                    active\n                    activeColor=\"primary\"\n                    activeVariant=\"soft\"\n                    href=\"/button\"\n                    label=\"Dashboard\"\n                    leadingIcon=\"lucide:home\"\n                />\n                <Button\n                    variant=\"ghost\"\n                    color=\"secondary\"\n                    href=\"/link\"\n                    label=\"Links\"\n                    leadingIcon=\"lucide:link\"\n                />\n                <Button\n                    variant=\"ghost\"\n                    color=\"secondary\"\n                    href=\"/settings\"\n                    label=\"Settings\"\n                    leadingIcon=\"lucide:settings\"\n                />\n            </div>\n        </div>\n\n        <!-- Social Buttons -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Social buttons</p>\n            <div class=\"flex items-center gap-2\">\n                <Button variant=\"soft\" color=\"info\" leadingIcon=\"mdi:twitter\" label=\"Tweet\" />\n                <Button variant=\"soft\" leadingIcon=\"mdi:facebook\" label=\"Share\" />\n                <Button variant=\"soft\" color=\"tertiary\" leadingIcon=\"mdi:linkedin\" label=\"Post\" />\n            </div>\n        </div>\n\n        <!-- Pagination -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Pagination</p>\n            <div class=\"flex items-center gap-1\">\n                <Button variant=\"ghost\" color=\"secondary\" icon=\"lucide:chevron-left\" square />\n                <Button variant=\"ghost\" color=\"secondary\" label=\"1\" />\n                <Button variant=\"solid\" label=\"2\" />\n                <Button variant=\"ghost\" color=\"secondary\" label=\"3\" />\n                <Button variant=\"ghost\" color=\"secondary\" label=\"...\" />\n                <Button variant=\"ghost\" color=\"secondary\" label=\"10\" />\n                <Button variant=\"ghost\" color=\"secondary\" icon=\"lucide:chevron-right\" square />\n            </div>\n        </div>\n    </section>\n</div>\n",
-    "code-block": "<script lang=\"ts\">\n    import { CodeBlock } from '$lib/index.js'\n    import { renderHighlightedCode } from '$lib/docs/code-block.js'\n\n    const sampleCode = `<script lang=\"ts\">\n import { Button } from 'svelora';\n<` + `/script>\n\n<Button label=\"Hello\" />`\n\n    const sampleTs = `type User = { _id: string; name: string }\n\nconst user: User = { _id: 'u_1', name: 'Jane' }\nconsole.log(user)`\n\n    let shikiHtml = $state('')\n    let isDarkMode = $state(true)\n\n    $effect(() => {\n        if (typeof document === 'undefined') return\n\n        const root = document.documentElement\n        const updateMode = () => {\n            isDarkMode = root.classList.contains('dark')\n        }\n\n        updateMode()\n\n        const observer = new MutationObserver(() => {\n            updateMode()\n        })\n\n        observer.observe(root, { attributes: true, attributeFilter: ['class'] })\n        return () => observer.disconnect()\n    })\n\n    $effect(() => {\n        const darkMode = isDarkMode\n        let cancelled = false\n\n        void renderHighlightedCode(sampleCode, darkMode).then((html) => {\n            if (cancelled) return\n            shikiHtml = html\n        })\n\n        return () => {\n            cancelled = true\n        }\n    })\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">CodeBlock</h1>\n        <p class=\"text-on-surface-variant\">\n            Display code snippets with a consistent header, copy button, and theme-aware styling.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CodeBlock title=\"Code\" code={sampleTs} />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"With-highlighted-HTML\" class=\"text-lg font-semibold\">\n<a href=\"#With-highlighted-HTML\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With highlighted HTML\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Provide pre-highlighted HTML (for example, from Shiki) via the <code>html</code> prop.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CodeBlock code={sampleCode} html={shikiHtml} />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"outline\" variant=\"outline\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"soft\" variant=\"soft\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"subtle\" variant=\"subtle\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"solid\" variant=\"solid\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"ghost\" variant=\"ghost\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"none\" variant=\"none\" code={sampleTs} />\n            </div>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"sm\" size=\"sm\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"md\" size=\"md\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"lg\" size=\"lg\" code={sampleTs} />\n            </div>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Copy-controls\" class=\"text-lg font-semibold\">\n<a href=\"#Copy-controls\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Copy controls\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"copyable=false\" code={sampleTs} copyable={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"custom copyText\" code=\"Visible code\" copyText=\"Copied text\" />\n            </div>\n        </div>\n    </section>\n</div>\n\n",
+    "code-block": "<script lang=\"ts\">\n    import { CodeBlock } from '$lib/index.js'\n    import { renderHighlightedCode } from '$internal/docs/code-block.js'\n\n    const sampleCode = `<script lang=\"ts\">\n import { Button } from 'svelora';\n<` + `/script>\n\n<Button label=\"Hello\" />`\n\n    const sampleTs = `type User = { _id: string; name: string }\n\nconst user: User = { _id: 'u_1', name: 'Jane' }\nconsole.log(user)`\n\n    let shikiHtml = $state('')\n    let isDarkMode = $state(true)\n\n    $effect(() => {\n        if (typeof document === 'undefined') return\n\n        const root = document.documentElement\n        const updateMode = () => {\n            isDarkMode = root.classList.contains('dark')\n        }\n\n        updateMode()\n\n        const observer = new MutationObserver(() => {\n            updateMode()\n        })\n\n        observer.observe(root, { attributes: true, attributeFilter: ['class'] })\n        return () => observer.disconnect()\n    })\n\n    $effect(() => {\n        const darkMode = isDarkMode\n        let cancelled = false\n\n        void renderHighlightedCode(sampleCode, darkMode).then((html) => {\n            if (cancelled) return\n            shikiHtml = html\n        })\n\n        return () => {\n            cancelled = true\n        }\n    })\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">CodeBlock</h1>\n        <p class=\"text-on-surface-variant\">\n            Display code snippets with a consistent header, copy button, and theme-aware styling.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CodeBlock title=\"Code\" code={sampleTs} />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"With-highlighted-HTML\" class=\"text-lg font-semibold\">\n<a href=\"#With-highlighted-HTML\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With highlighted HTML\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Provide pre-highlighted HTML (for example, from Shiki) via the <code>html</code> prop.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CodeBlock code={sampleCode} html={shikiHtml} />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"outline\" variant=\"outline\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"soft\" variant=\"soft\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"subtle\" variant=\"subtle\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"solid\" variant=\"solid\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"ghost\" variant=\"ghost\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"none\" variant=\"none\" code={sampleTs} />\n            </div>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-3\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"sm\" size=\"sm\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"md\" size=\"md\" code={sampleTs} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"lg\" size=\"lg\" code={sampleTs} />\n            </div>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Copy-controls\" class=\"text-lg font-semibold\">\n<a href=\"#Copy-controls\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Copy controls\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"copyable=false\" code={sampleTs} copyable={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <CodeBlock title=\"custom copyText\" code=\"Visible code\" copyText=\"Copied text\" />\n            </div>\n        </div>\n    </section>\n</div>\n\n",
     "field-group": "<script lang=\"ts\">\n    import { Button, Input, FieldGroup, Separator } from '$lib/index.js'\n\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">FieldGroup</h1>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Wrap multiple <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >Button</code\n            >\n            within a\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >FieldGroup</code\n            > to group them together.\n        </p>\n        <FieldGroup>\n            <Button label=\"Action\" />\n            <Button label=\"Action\" />\n            <Button label=\"Action\" />\n        </FieldGroup>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >orientation</code\n            > to change the layout direction.\n        </p>\n        <div class=\"flex flex-wrap items-start gap-6\">\n            <div class=\"space-y-2\">\n                <p class=\"text-xs text-on-surface-variant\">horizontal (default)</p>\n                <FieldGroup orientation=\"horizontal\">\n                    <Button label=\"Left\" />\n                    <Button label=\"Center\" />\n                    <Button label=\"Right\" />\n                </FieldGroup>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-xs text-on-surface-variant\">vertical</p>\n                <FieldGroup orientation=\"vertical\">\n                    <Button label=\"Top\" />\n                    <Button label=\"Middle\" />\n                    <Button label=\"Bottom\" />\n                </FieldGroup>\n            </div>\n        </div>\n    </section>\n\n    <!-- Size -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Size\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code> to\n            set the size of all child components.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-6\">\n            {#each sizes as size (size)}\n                <div class=\"flex flex-col items-center gap-2\">\n                    <FieldGroup {size}>\n                        <Button label=\"Action\" />\n                        <Button label=\"Action\" />\n                        <Button label=\"Action\" />\n                    </FieldGroup>\n                    <span class=\"text-xs text-on-surface-variant\">{size}</span>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Variants -->\n    <section class=\"space-y-4\">\n        <h2 id=\"With-Variants\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#With-Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Variants\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            FieldGroup works with different button variants.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6\">\n            <FieldGroup>\n                <Button variant=\"outline\" color=\"surface\" label=\"Left\" />\n                <Button variant=\"outline\" color=\"surface\" label=\"Center\" />\n                <Button variant=\"outline\" color=\"surface\" label=\"Right\" />\n            </FieldGroup>\n\n            <FieldGroup>\n                <Button variant=\"soft\" label=\"Left\" />\n                <Button variant=\"soft\" label=\"Center\" />\n                <Button variant=\"soft\" label=\"Right\" />\n            </FieldGroup>\n\n            <FieldGroup>\n                <Button variant=\"subtle\" label=\"Left\" />\n                <Button variant=\"subtle\" label=\"Center\" />\n                <Button variant=\"subtle\" label=\"Right\" />\n            </FieldGroup>\n        </div>\n    </section>\n\n    <!-- With Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"With-Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#With-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Icon-only button groups for toolbar-style layouts.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6\">\n            <FieldGroup>\n                <Button icon=\"lucide:align-left\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:align-center\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:align-right\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:align-justify\" variant=\"outline\" color=\"surface\" />\n            </FieldGroup>\n\n            <FieldGroup>\n                <Button icon=\"lucide:bold\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:italic\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:underline\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:strikethrough\" variant=\"outline\" color=\"surface\" />\n            </FieldGroup>\n        </div>\n    </section>\n\n    <!-- Vertical with Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Vertical-with-Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Vertical-with-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Vertical with Icons\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap items-start gap-6\">\n            <FieldGroup orientation=\"vertical\">\n                <Button icon=\"lucide:zoom-in\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:zoom-out\" variant=\"outline\" color=\"surface\" />\n                <Button icon=\"lucide:rotate-cw\" variant=\"outline\" color=\"surface\" />\n            </FieldGroup>\n\n            <FieldGroup orientation=\"vertical\">\n                <Button leadingIcon=\"lucide:home\" label=\"Home\" variant=\"soft\" />\n                <Button leadingIcon=\"lucide:settings\" label=\"Settings\" variant=\"soft\" />\n                <Button leadingIcon=\"lucide:user\" label=\"Profile\" variant=\"soft\" />\n            </FieldGroup>\n        </div>\n    </section>\n\n    <!-- With Input -->\n    <section class=\"space-y-4\">\n        <h2 id=\"With-Input\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#With-Input\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Input\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Combine <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >Input</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">Button</code> in\n            a FieldGroup.\n        </p>\n        <div class=\"flex flex-wrap items-start gap-6\">\n            <FieldGroup>\n                <Input leadingIcon=\"lucide:search\" placeholder=\"Search...\" />\n                <Button label=\"Search\" />\n            </FieldGroup>\n\n            <FieldGroup>\n                <Input placeholder=\"Enter email\" type=\"email\" />\n                <Button label=\"Subscribe\" variant=\"solid\" color=\"primary\" />\n            </FieldGroup>\n        </div>\n    </section>\n\n    <!-- With Input (Vertical) -->\n    <section class=\"space-y-4\">\n        <h2 id=\"With-Input-Vertical\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#With-Input-Vertical\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Input (Vertical)\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap items-start gap-6\">\n            <div class=\"w-72\">\n                <FieldGroup orientation=\"vertical\">\n                    <Input placeholder=\"First name\" />\n                    <Input placeholder=\"Last name\" />\n                    <Input placeholder=\"Email\" type=\"email\" />\n                </FieldGroup>\n            </div>\n\n            <div class=\"w-72\">\n                <FieldGroup orientation=\"vertical\">\n                    <Input leadingIcon=\"lucide:user\" placeholder=\"Username\" />\n                    <Input leadingIcon=\"lucide:lock\" placeholder=\"Password\" type=\"password\" />\n                    <Button label=\"Sign in\" block />\n                </FieldGroup>\n            </div>\n        </div>\n    </section>\n\n    <!-- Input + Button Sizes -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Input--Button-Sizes\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Input--Button-Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Input + Button Sizes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            FieldGroup propagates <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code\n            > to all children.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-6\">\n            {#each sizes as size (size)}\n                <div class=\"flex flex-col items-center gap-2\">\n                    <FieldGroup {size}>\n                        <Input placeholder=\"Search...\" />\n                        <Button icon=\"lucide:search\" />\n                    </FieldGroup>\n                    <span class=\"text-xs text-on-surface-variant\">{size}</span>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Text editor toolbar</p>\n                <div class=\"flex flex-wrap items-center gap-3\">\n                    <FieldGroup>\n                        <Button icon=\"lucide:bold\" variant=\"outline\" color=\"surface\" size=\"sm\" />\n                        <Button icon=\"lucide:italic\" variant=\"outline\" color=\"surface\" size=\"sm\" />\n                        <Button\n                            icon=\"lucide:underline\"\n                            variant=\"outline\"\n                            color=\"surface\"\n                            size=\"sm\"\n                        />\n                    </FieldGroup>\n                    <FieldGroup>\n                        <Button\n                            icon=\"lucide:align-left\"\n                            variant=\"outline\"\n                            color=\"surface\"\n                            size=\"sm\"\n                        />\n                        <Button\n                            icon=\"lucide:align-center\"\n                            variant=\"outline\"\n                            color=\"surface\"\n                            size=\"sm\"\n                        />\n                        <Button\n                            icon=\"lucide:align-right\"\n                            variant=\"outline\"\n                            color=\"surface\"\n                            size=\"sm\"\n                        />\n                    </FieldGroup>\n                    <FieldGroup>\n                        <Button icon=\"lucide:list\" variant=\"outline\" color=\"surface\" size=\"sm\" />\n                        <Button\n                            icon=\"lucide:list-ordered\"\n                            variant=\"outline\"\n                            color=\"surface\"\n                            size=\"sm\"\n                        />\n                    </FieldGroup>\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Login form</p>\n                <div class=\"w-80\">\n                    <FieldGroup orientation=\"vertical\">\n                        <Input leadingIcon=\"lucide:mail\" placeholder=\"Email\" type=\"email\" />\n                        <Input leadingIcon=\"lucide:lock\" placeholder=\"Password\" type=\"password\" />\n                        <Button label=\"Sign in\" variant=\"solid\" color=\"primary\" block />\n                    </FieldGroup>\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Search with filter</p>\n                <FieldGroup>\n                    <Button label=\"All\" variant=\"outline\" color=\"surface\" />\n                    <Input leadingIcon=\"lucide:search\" placeholder=\"Search products...\" />\n                    <Button icon=\"lucide:sliders-horizontal\" variant=\"outline\" color=\"surface\" />\n                </FieldGroup>\n            </div>\n        </div>\n    </section>\n</div>\n",
-    "fonts": "<script lang=\"ts\">\n    import { Card, CodeBlock, Fonts, defaultFontFamilies, fontsDefaults } from '$lib/index.js'\n    import { renderHighlightedCode } from '$lib/docs/code-block.js'\n    import type { FontDefinition } from '$lib/index.js'\n\n    const googleFamilies: FontDefinition[] = [\n        {\n            name: 'Inter',\n            variable: '--font-sans-family',\n            weights: [400, 500, 600, 700]\n        },\n        {\n            name: 'Poppins',\n            variable: '--font-heading-family',\n            weights: [600, 700]\n        },\n        {\n            name: 'JetBrains Mono',\n            variable: '--font-mono-family',\n            weights: [400, 500, 700]\n        }\n    ]\n\n    const defaultPresetCode = `<Fonts />`\n\n    const defaultPresetItems = [\n        {\n            variable: '--font-sans-family',\n            family: 'Inter',\n            weights: '400, 500, 600, 700',\n            utility: 'font-sans'\n        },\n        {\n            variable: '--font-heading-family',\n            family: 'Inter',\n            weights: '400, 500, 600, 700',\n            utility: 'font-heading'\n        },\n        {\n            variable: '--font-mono-family',\n            family: 'JetBrains Mono',\n            weights: '400, 500, 700',\n            utility: 'font-mono'\n        }\n    ] as const\n\n    const localSetupSteps = [\n        'Add your files under `static/fonts/*` so they are served from the app root.',\n        'Map each file with `provider: \"local\"` and `sources` entries for the weights/styles you need.',\n        'Bind the family to a CSS variable such as `--font-sarabun-family`.',\n        'Use the mapped variable through utility classes like `font-sarabun`, `font-heading`, or `font-mono`.'\n    ] as const\n\n    const localLayoutCode = `<script lang=\"ts\">\n import 'svelora/theme.css';\n import { Fonts } from 'svelora';\n\n let { children } = $props();\n<` + `/script>\n\n<Fonts\n families={[\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [\n    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n    { src: '/fonts/Sarabun-Medium.woff2', format: 'woff2', weight: 500 },\n    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n   ]\n  }\n ]}\n/>\n\n<main class=\"font-sarabun\">\n {@render children?.()}\n</main>`\n\n    const familyReference = [\n        {\n            name: 'provider',\n            type: `'google' | 'local'`,\n            description: 'Selects whether the family loads from Google Fonts or local assets.'\n        },\n        {\n            name: 'name',\n            type: 'string',\n            description: 'Font family name used in the request or `@font-face` declaration.'\n        },\n        {\n            name: 'variable',\n            type: '`--${string}`',\n            description: 'CSS custom property that stores the generated font-family stack.'\n        },\n        {\n            name: 'fallback',\n            type: 'string',\n            description: 'Optional fallback stack appended after the primary font family.'\n        },\n        {\n            name: 'weights',\n            type: 'number[]',\n            description: 'Google-only list of weights to request.'\n        },\n        {\n            name: 'styles',\n            type: `('normal' | 'italic')[]`,\n            description: 'Google-only styles to request.'\n        },\n        {\n            name: 'sources',\n            type: 'LocalFontSource[]',\n            description: 'Local-only file definitions used to build `@font-face` rules.'\n        }\n    ] as const\n\n    const optionsReference = [\n        {\n            name: 'families',\n            type: 'FontDefinition[]',\n            description: 'Complete list of families managed by the provider.'\n        },\n        {\n            name: 'display',\n            type: `'auto' | 'block' | 'swap' | 'fallback' | 'optional'`,\n            description: 'Controls `font-display` for Google requests and local `@font-face` output.'\n        },\n        {\n            name: 'preconnect',\n            type: 'boolean',\n            description: 'Adds preconnect links for Google Fonts when enabled.'\n        }\n    ] as const\n\n    const localSourceReference = [\n        {\n            name: 'src',\n            type: 'string',\n            description: 'Public URL to the local font file, for example `/fonts/Sarabun-Regular.woff2`.'\n        },\n        {\n            name: 'format',\n            type: `'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg'`,\n            description: 'Optional format hint used in `@font-face`.'\n        },\n        {\n            name: 'weight',\n            type: 'number | `${number} ${number}`',\n            description: 'Single weight or variable font range.'\n        },\n        {\n            name: 'style',\n            type: `'normal' | 'italic'`,\n            description: 'Font style for the source entry.'\n        },\n        {\n            name: 'unicodeRange',\n            type: 'string',\n            description: 'Optional unicode-range for partial subsets.'\n        }\n    ] as const\n\n    const localProviderCode = `<Fonts\n families={[\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [\n    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n   ]\n  }\n ]}\n/>`\n\n    const mixedProviderCode = `<Fonts\n families={[\n  { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },\n  { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [{ src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 }]\n  }\n ]}\n/>`\n\n    const configCode = `import { defineConfig } from 'svelora';\n\ndefineConfig({\n fonts: {\n  families: [\n   { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },\n   { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },\n   {\n    provider: 'local',\n    name: 'Sarabun',\n    variable: '--font-sarabun-family',\n    sources: [\n     { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n     { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n    ]\n   }\n  ]\n }\n});`\n\n    const layoutCode = `<script lang=\"ts\">\n import 'svelora/theme.css';\n import { Fonts, ModeWatcher } from 'svelora';\n\n let { children } = $props();\n<` + `/script>\n\n<Fonts />\n<ModeWatcher />\n{@render children?.()}`\n\n    const disableDefaultsCode = `import { defineConfig } from 'svelora';\n\ndefineConfig({\n fonts: false\n});`\n\n    let isDarkMode = $state(true)\n    let defaultPresetHtml = $state('')\n    let localProviderHtml = $state('')\n    let localLayoutHtml = $state('')\n    let mixedProviderHtml = $state('')\n    let configHtml = $state('')\n    let layoutHtml = $state('')\n    let disableDefaultsHtml = $state('')\n\n    $effect(() => {\n        if (typeof document === 'undefined') return\n\n        const root = document.documentElement\n        const updateMode = () => {\n            isDarkMode = root.classList.contains('dark')\n        }\n\n        updateMode()\n\n        const observer = new MutationObserver(() => {\n            updateMode()\n        })\n\n        observer.observe(root, { attributes: true, attributeFilter: ['class'] })\n        return () => observer.disconnect()\n    })\n\n    $effect(() => {\n        const darkMode = isDarkMode\n        let cancelled = false\n\n        const tasks = [\n            renderHighlightedCode(defaultPresetCode, darkMode).then((html) => {\n                if (!cancelled) defaultPresetHtml = html\n            }),\n            renderHighlightedCode(localProviderCode, darkMode).then((html) => {\n                if (!cancelled) localProviderHtml = html\n            }),\n            renderHighlightedCode(localLayoutCode, darkMode).then((html) => {\n                if (!cancelled) localLayoutHtml = html\n            }),\n            renderHighlightedCode(mixedProviderCode, darkMode).then((html) => {\n                if (!cancelled) mixedProviderHtml = html\n            }),\n            renderHighlightedCode(configCode, darkMode).then((html) => {\n                if (!cancelled) configHtml = html\n            }),\n            renderHighlightedCode(layoutCode, darkMode).then((html) => {\n                if (!cancelled) layoutHtml = html\n            }),\n            renderHighlightedCode(disableDefaultsCode, darkMode).then((html) => {\n                if (!cancelled) disableDefaultsHtml = html\n            })\n        ]\n\n        void Promise.all(tasks)\n\n        return () => {\n            cancelled = true\n        }\n    })\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Fonts</h1>\n        <p class=\"text-on-surface-variant\">\n            A unified font provider for Svelora that supports both Google Fonts and local font files\n            through the same `fonts.families` API.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Default-Preset\" class=\"text-lg font-semibold\">\n<a href=\"#Default-Preset\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Default Preset\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            If you render `<Fonts />` without props or custom config, Svelora uses the built-in preset\n            below. The current default display is `{fontsDefaults.display}` with preconnect set to\n            `{fontsDefaults.preconnect ? 'true' : 'false'}`.\n        </p>\n        <CodeBlock title=\"Default Preset\" code={defaultPresetCode} html={defaultPresetHtml} />\n        <div class=\"grid gap-4 md:grid-cols-3\">\n            {#each defaultPresetItems as item (item.variable)}\n                <Card class=\"border border-outline-variant/70\">\n                    <div class=\"space-y-2\">\n                        <p class=\"font-mono text-xs text-on-surface-variant\">{item.variable}</p>\n                        <h3 class=\"text-base font-semibold\">{item.family}</h3>\n                        <p class=\"text-sm text-on-surface-variant\">Weights: {item.weights}</p>\n                        <p class=\"text-sm text-on-surface-variant\">Utility: `{item.utility}`</p>\n                    </div>\n                </Card>\n            {/each}\n        </div>\n        <p class=\"text-sm text-on-surface-variant\">\n            The preset is sourced from `defaultFontFamilies` and currently includes\n            `{defaultFontFamilies.length}` families.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Google-Provider\" class=\"text-lg font-semibold\">\n<a href=\"#Google-Provider\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Google Provider\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Fonts families={googleFamilies} />\n            <h3 class=\"font-heading text-2xl font-semibold\">Poppins heading</h3>\n            <p>Inter body copy is mapped to `--font-sans-family`.</p>\n            <p class=\"font-mono mt-2 text-sm\">const provider = 'google';</p>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Local-Provider\" class=\"text-lg font-semibold\">\n<a href=\"#Local-Provider\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Local Provider\n                    </a>\n</h2>\n        <CodeBlock title=\"Local Provider\" code={localProviderCode} html={localProviderHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Put your font files under `static/fonts/*`, map them to a CSS variable, then use utility\n            classes like `font-sarabun` across the project.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Local-Font-Setup\" class=\"text-lg font-semibold\">\n<a href=\"#Local-Font-Setup\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Local Font Setup\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            {#each localSetupSteps as step, index (`${index}-${step}`)}\n                <Card class=\"border border-outline-variant/70\">\n                    <div class=\"space-y-2\">\n                        <p class=\"text-sm font-medium text-primary\">Step {index + 1}</p>\n                        <p class=\"text-sm text-on-surface-variant\">{step}</p>\n                    </div>\n                </Card>\n            {/each}\n        </div>\n        <CodeBlock title=\"Local Font Setup\" code={localLayoutCode} html={localLayoutHtml} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Mixed-Providers\" class=\"text-lg font-semibold\">\n<a href=\"#Mixed-Providers\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Mixed Providers\n                    </a>\n</h2>\n        <CodeBlock title=\"Mixed Providers\" code={mixedProviderCode} html={mixedProviderHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Mix Google fonts for global typography with local assets for brand or language-specific\n            families in the same provider.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Using-Global-Config\" class=\"text-lg font-semibold\">\n<a href=\"#Using-Global-Config\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Using Global Config\n                    </a>\n</h2>\n        <CodeBlock title=\"defineConfig()\" code={configCode} html={configHtml} />\n        <CodeBlock title=\"+layout.svelte\" code={layoutCode} html={layoutHtml} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Disable-Defaults\" class=\"text-lg font-semibold\">\n<a href=\"#Disable-Defaults\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disable Defaults\n                    </a>\n</h2>\n        <CodeBlock title=\"Disable Defaults\" code={disableDefaultsCode} html={disableDefaultsHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Set `fonts: false` when you want to fully manage font loading yourself.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"API-Reference\" class=\"text-lg font-semibold\">\n<a href=\"#API-Reference\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        API Reference\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">Fonts Options</h3>\n                    <div class=\"space-y-3\">\n                        {#each optionsReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">Font Definition</h3>\n                    <div class=\"space-y-3\">\n                        {#each familyReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n        </div>\n        <Card class=\"border border-outline-variant/70\">\n            <div class=\"space-y-4\">\n                <h3 class=\"text-base font-semibold\">Local Font Source</h3>\n                <div class=\"grid gap-3 md:grid-cols-2\">\n                    {#each localSourceReference as item (item.name)}\n                        <div class=\"rounded-xl border border-outline-variant/60 p-4\">\n                            <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                            <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                            <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                        </div>\n                    {/each}\n                </div>\n            </div>\n        </Card>\n    </section>\n</div>\n",
+    "fonts": "<script lang=\"ts\">\n    import { Card, CodeBlock, Fonts, defaultFontFamilies, fontsDefaults } from '$lib/index.js'\n    import { renderHighlightedCode } from '$internal/docs/code-block.js'\n    import type { FontDefinition } from '$lib/index.js'\n\n    const googleFamilies: FontDefinition[] = [\n        {\n            name: 'Inter',\n            variable: '--font-sans-family',\n            weights: [400, 500, 600, 700]\n        },\n        {\n            name: 'Poppins',\n            variable: '--font-heading-family',\n            weights: [600, 700]\n        },\n        {\n            name: 'JetBrains Mono',\n            variable: '--font-mono-family',\n            weights: [400, 500, 700]\n        }\n    ]\n\n    const defaultPresetCode = `<Fonts />`\n\n    const defaultPresetItems = [\n        {\n            variable: '--font-sans-family',\n            family: 'Inter',\n            weights: '400, 500, 600, 700',\n            utility: 'font-sans'\n        },\n        {\n            variable: '--font-heading-family',\n            family: 'Inter',\n            weights: '400, 500, 600, 700',\n            utility: 'font-heading'\n        },\n        {\n            variable: '--font-mono-family',\n            family: 'JetBrains Mono',\n            weights: '400, 500, 700',\n            utility: 'font-mono'\n        }\n    ] as const\n\n    const localSetupSteps = [\n        'Add your files under `static/fonts/*` so they are served from the app root.',\n        'Map each file with `provider: \"local\"` and `sources` entries for the weights/styles you need.',\n        'Bind the family to a CSS variable such as `--font-sarabun-family`.',\n        'Use the mapped variable through utility classes like `font-sarabun`, `font-heading`, or `font-mono`.'\n    ] as const\n\n    const localLayoutCode = `<script lang=\"ts\">\n import 'svelora/theme.css';\n import { Fonts } from 'svelora';\n\n let { children } = $props();\n<` + `/script>\n\n<Fonts\n families={[\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [\n    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n    { src: '/fonts/Sarabun-Medium.woff2', format: 'woff2', weight: 500 },\n    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n   ]\n  }\n ]}\n/>\n\n<main class=\"font-sarabun\">\n {@render children?.()}\n</main>`\n\n    const familyReference = [\n        {\n            name: 'provider',\n            type: `'google' | 'local'`,\n            description: 'Selects whether the family loads from Google Fonts or local assets.'\n        },\n        {\n            name: 'name',\n            type: 'string',\n            description: 'Font family name used in the request or `@font-face` declaration.'\n        },\n        {\n            name: 'variable',\n            type: '`--${string}`',\n            description: 'CSS custom property that stores the generated font-family stack.'\n        },\n        {\n            name: 'fallback',\n            type: 'string',\n            description: 'Optional fallback stack appended after the primary font family.'\n        },\n        {\n            name: 'weights',\n            type: 'number[]',\n            description: 'Google-only list of weights to request.'\n        },\n        {\n            name: 'styles',\n            type: `('normal' | 'italic')[]`,\n            description: 'Google-only styles to request.'\n        },\n        {\n            name: 'sources',\n            type: 'LocalFontSource[]',\n            description: 'Local-only file definitions used to build `@font-face` rules.'\n        }\n    ] as const\n\n    const optionsReference = [\n        {\n            name: 'families',\n            type: 'FontDefinition[]',\n            description: 'Complete list of families managed by the provider.'\n        },\n        {\n            name: 'display',\n            type: `'auto' | 'block' | 'swap' | 'fallback' | 'optional'`,\n            description: 'Controls `font-display` for Google requests and local `@font-face` output.'\n        },\n        {\n            name: 'preconnect',\n            type: 'boolean',\n            description: 'Adds preconnect links for Google Fonts when enabled.'\n        }\n    ] as const\n\n    const localSourceReference = [\n        {\n            name: 'src',\n            type: 'string',\n            description: 'Public URL to the local font file, for example `/fonts/Sarabun-Regular.woff2`.'\n        },\n        {\n            name: 'format',\n            type: `'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg'`,\n            description: 'Optional format hint used in `@font-face`.'\n        },\n        {\n            name: 'weight',\n            type: 'number | `${number} ${number}`',\n            description: 'Single weight or variable font range.'\n        },\n        {\n            name: 'style',\n            type: `'normal' | 'italic'`,\n            description: 'Font style for the source entry.'\n        },\n        {\n            name: 'unicodeRange',\n            type: 'string',\n            description: 'Optional unicode-range for partial subsets.'\n        }\n    ] as const\n\n    const localProviderCode = `<Fonts\n families={[\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [\n    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n   ]\n  }\n ]}\n/>`\n\n    const mixedProviderCode = `<Fonts\n families={[\n  { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },\n  { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },\n  {\n   provider: 'local',\n   name: 'Sarabun',\n   variable: '--font-sarabun-family',\n   sources: [{ src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 }]\n  }\n ]}\n/>`\n\n    const configCode = `import { defineConfig } from 'svelora';\n\ndefineConfig({\n fonts: {\n  families: [\n   { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },\n   { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },\n   {\n    provider: 'local',\n    name: 'Sarabun',\n    variable: '--font-sarabun-family',\n    sources: [\n     { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },\n     { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }\n    ]\n   }\n  ]\n }\n});`\n\n    const layoutCode = `<script lang=\"ts\">\n import 'svelora/theme.css';\n import { Fonts } from 'svelora';\n import { ModeWatcher } from 'mode-watcher';\n\n let { children } = $props();\n<` + `/script>\n\n<Fonts />\n<ModeWatcher />\n{@render children?.()}`\n\n    const disableDefaultsCode = `import { defineConfig } from 'svelora';\n\ndefineConfig({\n fonts: false\n});`\n\n    let isDarkMode = $state(true)\n    let defaultPresetHtml = $state('')\n    let localProviderHtml = $state('')\n    let localLayoutHtml = $state('')\n    let mixedProviderHtml = $state('')\n    let configHtml = $state('')\n    let layoutHtml = $state('')\n    let disableDefaultsHtml = $state('')\n\n    $effect(() => {\n        if (typeof document === 'undefined') return\n\n        const root = document.documentElement\n        const updateMode = () => {\n            isDarkMode = root.classList.contains('dark')\n        }\n\n        updateMode()\n\n        const observer = new MutationObserver(() => {\n            updateMode()\n        })\n\n        observer.observe(root, { attributes: true, attributeFilter: ['class'] })\n        return () => observer.disconnect()\n    })\n\n    $effect(() => {\n        const darkMode = isDarkMode\n        let cancelled = false\n\n        const tasks = [\n            renderHighlightedCode(defaultPresetCode, darkMode).then((html) => {\n                if (!cancelled) defaultPresetHtml = html\n            }),\n            renderHighlightedCode(localProviderCode, darkMode).then((html) => {\n                if (!cancelled) localProviderHtml = html\n            }),\n            renderHighlightedCode(localLayoutCode, darkMode).then((html) => {\n                if (!cancelled) localLayoutHtml = html\n            }),\n            renderHighlightedCode(mixedProviderCode, darkMode).then((html) => {\n                if (!cancelled) mixedProviderHtml = html\n            }),\n            renderHighlightedCode(configCode, darkMode).then((html) => {\n                if (!cancelled) configHtml = html\n            }),\n            renderHighlightedCode(layoutCode, darkMode).then((html) => {\n                if (!cancelled) layoutHtml = html\n            }),\n            renderHighlightedCode(disableDefaultsCode, darkMode).then((html) => {\n                if (!cancelled) disableDefaultsHtml = html\n            })\n        ]\n\n        void Promise.all(tasks)\n\n        return () => {\n            cancelled = true\n        }\n    })\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Fonts</h1>\n        <p class=\"text-on-surface-variant\">\n            A unified font provider for Svelora that supports both Google Fonts and local font files\n            through the same `fonts.families` API.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Default-Preset\" class=\"text-lg font-semibold\">\n<a href=\"#Default-Preset\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Default Preset\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            If you render `<Fonts />` without props or custom config, Svelora uses the built-in preset\n            below. The current default display is `{fontsDefaults.display}` with preconnect set to\n            `{fontsDefaults.preconnect ? 'true' : 'false'}`.\n        </p>\n        <CodeBlock title=\"Default Preset\" code={defaultPresetCode} html={defaultPresetHtml} />\n        <div class=\"grid gap-4 md:grid-cols-3\">\n            {#each defaultPresetItems as item (item.variable)}\n                <Card class=\"border border-outline-variant/70\">\n                    <div class=\"space-y-2\">\n                        <p class=\"font-mono text-xs text-on-surface-variant\">{item.variable}</p>\n                        <h3 class=\"text-base font-semibold\">{item.family}</h3>\n                        <p class=\"text-sm text-on-surface-variant\">Weights: {item.weights}</p>\n                        <p class=\"text-sm text-on-surface-variant\">Utility: `{item.utility}`</p>\n                    </div>\n                </Card>\n            {/each}\n        </div>\n        <p class=\"text-sm text-on-surface-variant\">\n            The preset is sourced from `defaultFontFamilies` and currently includes\n            `{defaultFontFamilies.length}` families.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Google-Provider\" class=\"text-lg font-semibold\">\n<a href=\"#Google-Provider\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Google Provider\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Fonts families={googleFamilies} />\n            <h3 class=\"font-heading text-2xl font-semibold\">Poppins heading</h3>\n            <p>Inter body copy is mapped to `--font-sans-family`.</p>\n            <p class=\"font-mono mt-2 text-sm\">const provider = 'google';</p>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Local-Provider\" class=\"text-lg font-semibold\">\n<a href=\"#Local-Provider\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Local Provider\n                    </a>\n</h2>\n        <CodeBlock title=\"Local Provider\" code={localProviderCode} html={localProviderHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Put your font files under `static/fonts/*`, map them to a CSS variable, then use utility\n            classes like `font-sarabun` across the project.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Local-Font-Setup\" class=\"text-lg font-semibold\">\n<a href=\"#Local-Font-Setup\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Local Font Setup\n                    </a>\n</h2>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            {#each localSetupSteps as step, index (`${index}-${step}`)}\n                <Card class=\"border border-outline-variant/70\">\n                    <div class=\"space-y-2\">\n                        <p class=\"text-sm font-medium text-primary\">Step {index + 1}</p>\n                        <p class=\"text-sm text-on-surface-variant\">{step}</p>\n                    </div>\n                </Card>\n            {/each}\n        </div>\n        <CodeBlock title=\"Local Font Setup\" code={localLayoutCode} html={localLayoutHtml} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Mixed-Providers\" class=\"text-lg font-semibold\">\n<a href=\"#Mixed-Providers\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Mixed Providers\n                    </a>\n</h2>\n        <CodeBlock title=\"Mixed Providers\" code={mixedProviderCode} html={mixedProviderHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Mix Google fonts for global typography with local assets for brand or language-specific\n            families in the same provider.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Using-Global-Config\" class=\"text-lg font-semibold\">\n<a href=\"#Using-Global-Config\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Using Global Config\n                    </a>\n</h2>\n        <CodeBlock title=\"defineConfig()\" code={configCode} html={configHtml} />\n        <CodeBlock title=\"+layout.svelte\" code={layoutCode} html={layoutHtml} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Disable-Defaults\" class=\"text-lg font-semibold\">\n<a href=\"#Disable-Defaults\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disable Defaults\n                    </a>\n</h2>\n        <CodeBlock title=\"Disable Defaults\" code={disableDefaultsCode} html={disableDefaultsHtml} />\n        <p class=\"text-sm text-on-surface-variant\">\n            Set `fonts: false` when you want to fully manage font loading yourself.\n        </p>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"API-Reference\" class=\"text-lg font-semibold\">\n<a href=\"#API-Reference\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        API Reference\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">Fonts Options</h3>\n                    <div class=\"space-y-3\">\n                        {#each optionsReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n            <Card class=\"border border-outline-variant/70\">\n                <div class=\"space-y-4\">\n                    <h3 class=\"text-base font-semibold\">Font Definition</h3>\n                    <div class=\"space-y-3\">\n                        {#each familyReference as item (item.name)}\n                            <div class=\"border-b border-outline-variant/60 pb-3 last:border-b-0 last:pb-0\">\n                                <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                                <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                                <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            </Card>\n        </div>\n        <Card class=\"border border-outline-variant/70\">\n            <div class=\"space-y-4\">\n                <h3 class=\"text-base font-semibold\">Local Font Source</h3>\n                <div class=\"grid gap-3 md:grid-cols-2\">\n                    {#each localSourceReference as item (item.name)}\n                        <div class=\"rounded-xl border border-outline-variant/60 p-4\">\n                            <p class=\"font-mono text-xs text-on-surface-variant\">{item.name}</p>\n                            <p class=\"mt-1 text-sm font-medium\">{item.type}</p>\n                            <p class=\"mt-1 text-sm text-on-surface-variant\">{item.description}</p>\n                        </div>\n                    {/each}\n                </div>\n            </div>\n        </Card>\n    </section>\n</div>\n",
     "icon": "<script lang=\"ts\">\n    import { Icon } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Icon</h1>\n        <p class=\"text-on-surface-variant\">\n            Use the Icon component to display any icon from the\n            <a\n                href=\"https://icon-sets.iconify.design/\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                class=\"text-primary hover:underline\">Iconify</a\n            >\n            library. Renders as an inline SVG with\n            <code class=\"rounded bg-surface-container-highest px-1\">aria-hidden=\"true\"</code> by default.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">name</code> prop with\n            the Iconify format\n            <code class=\"rounded bg-surface-container-highest px-1\">collection:icon-name</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-4 rounded-lg bg-surface-container-high p-4\">\n            <Icon name=\"lucide:home\" />\n            <Icon name=\"lucide:settings\" />\n            <Icon name=\"lucide:user\" />\n            <Icon name=\"lucide:mail\" />\n            <Icon name=\"lucide:bell\" />\n            <Icon name=\"lucide:search\" />\n            <Icon name=\"lucide:heart\" />\n            <Icon name=\"lucide:star\" />\n        </div>\n    </section>\n\n    <!-- Size -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Size\" class=\"text-lg font-semibold\">\n<a href=\"#Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">size</code> prop to set\n            both width and height. Accepts a number (pixels) or CSS string value. Defaults to\n            <code class=\"rounded bg-surface-container-highest px-1\">24</code>.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-6 rounded-lg bg-surface-container-high p-4\">\n            {#each [16, 20, 24, 32, 48] as size (size)}\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"lucide:rocket\" {size} />\n                    <span class=\"text-xs text-on-surface-variant\">{size}px</span>\n                </div>\n            {/each}\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:rocket\" size=\"2rem\" />\n                <span class=\"text-xs text-on-surface-variant\">2rem</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Color -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Color\" class=\"text-lg font-semibold\">\n<a href=\"#Color\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Color\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            The icon inherits <code class=\"rounded bg-surface-container-highest px-1\"\n                >currentColor</code\n            >\n            from its parent by default. Use the\n            <code class=\"rounded bg-surface-container-highest px-1\">color</code> prop for a CSS\n            color value, or Tailwind\n            <code class=\"rounded bg-surface-container-highest px-1\">text-*</code> classes via\n            <code class=\"rounded bg-surface-container-highest px-1\">class</code>.\n        </p>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">With Tailwind classes</p>\n        <div class=\"flex flex-wrap items-center gap-4 rounded-lg bg-surface-container-high p-4\">\n            <Icon name=\"lucide:circle\" class=\"text-primary\" />\n            <Icon name=\"lucide:circle\" class=\"text-secondary\" />\n            <Icon name=\"lucide:circle\" class=\"text-tertiary\" />\n            <Icon name=\"lucide:circle\" class=\"text-success\" />\n            <Icon name=\"lucide:circle\" class=\"text-warning\" />\n            <Icon name=\"lucide:circle\" class=\"text-error\" />\n            <Icon name=\"lucide:circle\" class=\"text-info\" />\n        </div>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">With color prop</p>\n        <div class=\"flex flex-wrap items-center gap-4 rounded-lg bg-surface-container-high p-4\">\n            <Icon name=\"lucide:circle\" color=\"red\" />\n            <Icon name=\"lucide:circle\" color=\"#22c55e\" />\n            <Icon name=\"lucide:circle\" color=\"rgb(59, 130, 246)\" />\n            <Icon name=\"lucide:circle\" color=\"orange\" />\n        </div>\n\n        <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Inheriting parent color</p>\n        <div class=\"flex flex-wrap items-center gap-4 rounded-lg bg-surface-container-high p-4\">\n            <span class=\"flex items-center gap-1 text-primary\">\n                <Icon name=\"lucide:info\" size={16} />\n                Inherits primary\n            </span>\n            <span class=\"flex items-center gap-1 text-error\">\n                <Icon name=\"lucide:alert-triangle\" size={16} />\n                Inherits error\n            </span>\n            <span class=\"flex items-center gap-1 text-success\">\n                <Icon name=\"lucide:check-circle\" size={16} />\n                Inherits success\n            </span>\n        </div>\n    </section>\n\n    <!-- Flip -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Flip\" class=\"text-lg font-semibold\">\n<a href=\"#Flip\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Flip\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">flipH</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">flipV</code> to mirror the icon horizontally\n            or vertically. Combining both is optimized into a 180&deg; rotation.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-8 rounded-lg bg-surface-container-high p-4\">\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:arrow-right\" />\n                <span class=\"text-xs text-on-surface-variant\">Normal</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:arrow-right\" flipH />\n                <span class=\"text-xs text-on-surface-variant\">flipH</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:arrow-right\" flipV />\n                <span class=\"text-xs text-on-surface-variant\">flipV</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:arrow-right\" flipH flipV />\n                <span class=\"text-xs text-on-surface-variant\">flipH + flipV</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Rotate -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Rotate\" class=\"text-lg font-semibold\">\n<a href=\"#Rotate\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Rotate\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">rotate</code> prop for\n            quarter-turn rotation (<code class=\"rounded bg-surface-container-highest px-1\">0</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">90</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">180</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">270</code>). For arbitrary\n            angles, use a Tailwind class like\n            <code class=\"rounded bg-surface-container-highest px-1\">rotate-45</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-8 rounded-lg bg-surface-container-high p-4\">\n            {#each [0, 90, 180, 270] as deg (deg)}\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"lucide:arrow-up\" rotate={deg as 0 | 90 | 180 | 270} />\n                    <span class=\"text-xs text-on-surface-variant\">{deg}&deg;</span>\n                </div>\n            {/each}\n            <span class=\"mx-2 text-on-surface-variant\">|</span>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:arrow-up\" class=\"rotate-45\" />\n                <span class=\"text-xs text-on-surface-variant\">CSS 45&deg;</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Class -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Class\" class=\"text-lg font-semibold\">\n<a href=\"#Class\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Class\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">class</code> prop to add\n            Tailwind utilities. Classes are merged with\n            <code class=\"rounded bg-surface-container-highest px-1\">tailwind-merge</code>, so\n            conflicting utilities like\n            <code class=\"rounded bg-surface-container-highest px-1\">shrink</code> correctly override\n            the default\n            <code class=\"rounded bg-surface-container-highest px-1\">shrink-0</code>.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:star\" class=\"text-warning\" />\n                <span class=\"text-xs text-on-surface-variant\">text-warning</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:heart\" class=\"animate-pulse text-error\" />\n                <span class=\"text-xs text-on-surface-variant\">animate-pulse</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:loader\" class=\"animate-spin text-primary\" />\n                <span class=\"text-xs text-on-surface-variant\">animate-spin</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <Icon name=\"lucide:zap\" class=\"text-warning drop-shadow-lg\" />\n                <span class=\"text-xs text-on-surface-variant\">drop-shadow</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Icon Sets -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Icon-Sets\" class=\"text-lg font-semibold\">\n<a href=\"#Icon-Sets\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icon Sets\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Supports any collection from the Iconify library. Use the format\n            <code class=\"rounded bg-surface-container-highest px-1\">collection:icon-name</code>.\n        </p>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full text-sm\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant\">\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\"\n                            >Collection</th\n                        >\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\">Icon</th\n                        >\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\">Name</th\n                        >\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each [{ name: 'lucide:github', label: 'Lucide' }, { name: 'mdi:github', label: 'Material Design Icons' }, { name: 'ph:github-logo', label: 'Phosphor' }, { name: 'tabler:brand-github', label: 'Tabler' }, { name: 'heroicons:code-bracket', label: 'Heroicons' }, { name: 'ri:github-fill', label: 'Remix Icon' }, { name: 'solar:star-bold', label: 'Solar' }] as icon (icon.name)}\n                        <tr class=\"border-b border-outline-variant/50\">\n                            <td class=\"px-3 py-2 text-on-surface-variant\">{icon.label}</td>\n                            <td class=\"px-3 py-2\">\n                                <Icon name={icon.name} />\n                            </td>\n                            <td class=\"px-3 py-2 font-mono text-xs\">{icon.name}</td>\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Examples\n                    </a>\n</h2>\n\n        <!-- Inline with text -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Inline with text</p>\n            <div class=\"flex flex-col gap-2\">\n                <p class=\"flex items-center gap-1.5 text-sm\">\n                    <Icon name=\"lucide:check-circle\" size={16} class=\"text-success\" />\n                    Payment successful\n                </p>\n                <p class=\"flex items-center gap-1.5 text-sm\">\n                    <Icon name=\"lucide:alert-triangle\" size={16} class=\"text-warning\" />\n                    Storage almost full\n                </p>\n                <p class=\"flex items-center gap-1.5 text-sm\">\n                    <Icon name=\"lucide:x-circle\" size={16} class=\"text-error\" />\n                    Connection failed\n                </p>\n            </div>\n        </div>\n\n        <!-- Icon grid -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Feature grid</p>\n            <div class=\"grid grid-cols-4 gap-4\">\n                {#each [{ name: 'lucide:shield-check', label: 'Secure', color: 'text-success' }, { name: 'lucide:zap', label: 'Fast', color: 'text-warning' }, { name: 'lucide:globe', label: 'Global', color: 'text-info' }, { name: 'lucide:heart', label: 'Loved', color: 'text-error' }] as item (item.name)}\n                    <div\n                        class=\"flex flex-col items-center gap-2 rounded-lg bg-surface-container p-3\"\n                    >\n                        <Icon name={item.name} size={32} class={item.color} />\n                        <span class=\"text-xs font-medium\">{item.label}</span>\n                    </div>\n                {/each}\n            </div>\n        </div>\n\n        <!-- Loading states -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Loading states</p>\n            <div class=\"flex items-center gap-6\">\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"lucide:loader-2\" class=\"animate-spin text-primary\" />\n                    <span class=\"text-xs text-on-surface-variant\">Spinner</span>\n                </div>\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"svg-spinners:ring-resize\" class=\"text-secondary\" />\n                    <span class=\"text-xs text-on-surface-variant\">SVG Spinner</span>\n                </div>\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"svg-spinners:3-dots-bounce\" class=\"text-tertiary\" />\n                    <span class=\"text-xs text-on-surface-variant\">Dots</span>\n                </div>\n                <div class=\"flex flex-col items-center gap-2\">\n                    <Icon name=\"svg-spinners:pulse-3\" class=\"text-info\" />\n                    <span class=\"text-xs text-on-surface-variant\">Pulse</span>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "link": "<script lang=\"ts\">\n    import { Link, Icon } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Link</h1>\n        <p class=\"text-on-surface-variant\">\n            Use the Link component to create hyperlinks with automatic active state detection.\n            Renders as an anchor tag when <code class=\"rounded bg-surface-container-highest px-1\"\n                >href</code\n            >\n            is provided, otherwise renders as a button.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            The Link component is styled by default with <code\n                class=\"rounded bg-surface-container-highest px-1\">text-on-surface-variant</code\n            >\n            when inactive and\n            <code class=\"rounded bg-surface-container-highest px-1\">text-primary</code>\n            when active, with a\n            <code class=\"rounded bg-surface-container-highest px-1\">hover:text-on-surface</code> transition.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\">Link</Link>\n        </div>\n    </section>\n\n    <!-- InactiveClass -->\n    <section class=\"space-y-3\">\n        <h2 id=\"InactiveClass\" class=\"text-lg font-semibold\">\n<a href=\"#InactiveClass\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        InactiveClass\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">inactiveClass</code> prop\n            to apply additional classes when the link is inactive.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/non-existent\" inactiveClass=\"opacity-50\">Dimmed when inactive</Link>\n            <Link href=\"/non-existent\" inactiveClass=\"italic\">Italic when inactive</Link>\n        </div>\n    </section>\n\n    <!-- ActiveClass -->\n    <section class=\"space-y-3\">\n        <h2 id=\"ActiveClass\" class=\"text-lg font-semibold\">\n<a href=\"#ActiveClass\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        ActiveClass\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">activeClass</code> prop to\n            apply additional classes when the link is active.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\" activeClass=\"font-bold\">Bold when active</Link>\n            <Link href=\"/link\" activeClass=\"underline underline-offset-4\"\n                >Underlined when active</Link\n            >\n            <Link href=\"/link\" activeClass=\"font-bold underline underline-offset-4\"\n                >Bold + underline</Link\n            >\n        </div>\n    </section>\n\n    <!-- Active -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Active\" class=\"text-lg font-semibold\">\n<a href=\"#Active\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Active\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">active</code> prop to force\n            the active state, overriding auto-detection from the current route.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\" active={true}>Active (forced)</Link>\n            <Link href=\"/link\" active={false}>Inactive (forced)</Link>\n            <Link href=\"/link\">Auto-detected</Link>\n        </div>\n    </section>\n\n    <!-- Matching Modes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Matching-Modes\" class=\"text-lg font-semibold\">\n<a href=\"#Matching-Modes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Matching Modes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            By default, a link is active when the current URL starts with the <code\n                class=\"rounded bg-surface-container-highest px-1\">href</code\n            >. Use <code class=\"rounded bg-surface-container-highest px-1\">exact</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">exactQuery</code>, and\n            <code class=\"rounded bg-surface-container-highest px-1\">exactHash</code> to control this behavior.\n        </p>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full text-sm\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant\">\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\">Prop</th\n                        >\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\">Href</th\n                        >\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\"\n                            >Preview</th\n                        >\n                        <th class=\"px-3 py-2 text-left font-medium text-on-surface-variant\"\n                            >Description</th\n                        >\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr class=\"border-b border-outline-variant/50\">\n                        <td class=\"px-3 py-2 font-mono text-xs text-on-surface-variant\">default</td>\n                        <td class=\"px-3 py-2 font-mono text-xs\">/link</td>\n                        <td class=\"px-3 py-2\">\n                            <Link href=\"/link\" activeClass=\"font-semibold\">Link</Link>\n                        </td>\n                        <td class=\"px-3 py-2 text-on-surface-variant\"\n                            >Prefix match — active if URL starts with href</td\n                        >\n                    </tr>\n                    <tr class=\"border-b border-outline-variant/50\">\n                        <td class=\"px-3 py-2 font-mono text-xs text-on-surface-variant\">exact</td>\n                        <td class=\"px-3 py-2 font-mono text-xs\">/link</td>\n                        <td class=\"px-3 py-2\">\n                            <Link href=\"/link\" exact activeClass=\"font-semibold\">Link (exact)</Link>\n                        </td>\n                        <td class=\"px-3 py-2 text-on-surface-variant\"\n                            >Only active when pathname is exactly \"/link\"</td\n                        >\n                    </tr>\n                    <tr class=\"border-b border-outline-variant/50\">\n                        <td class=\"px-3 py-2 font-mono text-xs text-on-surface-variant\"\n                            >exactHash</td\n                        >\n                        <td class=\"px-3 py-2 font-mono text-xs\">/link#section</td>\n                        <td class=\"px-3 py-2\">\n                            <Link href=\"/link#section\" exactHash activeClass=\"font-semibold\"\n                                >#section</Link\n                            >\n                        </td>\n                        <td class=\"px-3 py-2 text-on-surface-variant\"\n                            >Hash must also match for active state</td\n                        >\n                    </tr>\n                    <tr>\n                        <td class=\"px-3 py-2 font-mono text-xs text-on-surface-variant\"\n                            >exactQuery</td\n                        >\n                        <td class=\"px-3 py-2 font-mono text-xs\">/link?tab=1</td>\n                        <td class=\"px-3 py-2\">\n                            <Link href=\"/link?tab=1\" exactQuery activeClass=\"font-semibold\"\n                                >?tab=1</Link\n                            >\n                        </td>\n                        <td class=\"px-3 py-2 text-on-surface-variant\"\n                            >Query params must exactly match</td\n                        >\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">disabled</code> prop to\n            disable the link. On anchors, it removes\n            <code class=\"rounded bg-surface-container-highest px-1\">href</code>, sets\n            <code class=\"rounded bg-surface-container-highest px-1\">aria-disabled</code>\n            and\n            <code class=\"rounded bg-surface-container-highest px-1\">role=\"link\"</code>. On buttons,\n            it uses the native disabled attribute.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\" disabled>Disabled anchor</Link>\n            <Link disabled>Disabled button</Link>\n        </div>\n    </section>\n\n    <!-- Raw -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Raw\" class=\"text-lg font-semibold\">\n<a href=\"#Raw\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Raw\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">raw</code> prop to strip\n            all default styling. Only\n            <code class=\"rounded bg-surface-container-highest px-1\">class</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">activeClass</code>, and\n            <code class=\"rounded bg-surface-container-highest px-1\">inactiveClass</code> are applied.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link\n                href=\"/link\"\n                raw\n                class=\"text-on-surface underline decoration-primary underline-offset-4 hover:decoration-2\"\n            >\n                Custom styled\n            </Link>\n            <Link\n                href=\"/link\"\n                raw\n                class=\"rounded-md bg-primary-container px-3 py-1 text-on-primary-container hover:bg-primary-container/80\"\n            >\n                Chip style\n            </Link>\n            <Link\n                href=\"/link\"\n                raw\n                active={true}\n                activeClass=\"bg-primary text-on-primary\"\n                inactiveClass=\"bg-surface-container-highest text-on-surface-variant hover:bg-surface-container-high\"\n                class=\"rounded-full px-4 py-1.5 text-sm font-medium transition-colors\"\n            >\n                Pill style\n            </Link>\n        </div>\n    </section>\n\n    <!-- External -->\n    <section class=\"space-y-3\">\n        <h2 id=\"External\" class=\"text-lg font-semibold\">\n<a href=\"#External\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        External\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            External URLs (<code class=\"rounded bg-surface-container-highest px-1\">http://</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">https://</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">//</code>) are auto-detected.\n            The component adds\n            <code class=\"rounded bg-surface-container-highest px-1\">target=\"_blank\"</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">rel=\"noopener noreferrer\"</code>\n            automatically. Use the\n            <code class=\"rounded bg-surface-container-highest px-1\">external</code> prop to force this\n            behavior on internal paths.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"https://svelte.dev\">\n                <Icon name=\"lucide:external-link\" size=\"14\" class=\"mr-1\" />\n                Svelte (auto)\n            </Link>\n            <Link href=\"https://tailwindcss.com\">\n                <Icon name=\"lucide:external-link\" size=\"14\" class=\"mr-1\" />\n                Tailwind CSS (auto)\n            </Link>\n            <Link href=\"/api/docs\" external>\n                <Icon name=\"lucide:external-link\" size=\"14\" class=\"mr-1\" />\n                API Docs (forced)\n            </Link>\n        </div>\n    </section>\n\n    <!-- Prefetch -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Prefetch\" class=\"text-lg font-semibold\">\n<a href=\"#Prefetch\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Prefetch\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Since the Link component extends native HTML anchor attributes, you can use SvelteKit's\n            <code class=\"rounded bg-surface-container-highest px-1\"\n                >data-sveltekit-preload-data</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1\"\n                >data-sveltekit-preload-code</code\n            >\n            attributes to control prefetching behavior.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\" data-sveltekit-preload-data=\"hover\">Preload on hover</Link>\n            <Link href=\"/link\" data-sveltekit-preload-data=\"tap\">Preload on tap</Link>\n            <Link href=\"/link\" data-sveltekit-preload-data=\"off\">No preload</Link>\n            <Link href=\"/link\" data-sveltekit-preload-code=\"eager\">Preload code eagerly</Link>\n        </div>\n    </section>\n\n    <!-- As Button -->\n    <section class=\"space-y-3\">\n        <h2 id=\"As-Button\" class=\"text-lg font-semibold\">\n<a href=\"#As-Button\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        As Button\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When no <code class=\"rounded bg-surface-container-highest px-1\">href</code> is provided,\n            the component renders a button element with\n            <code class=\"rounded bg-surface-container-highest px-1\">type=\"button\"</code> by default.\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">type</code> prop to change\n            the button type.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link onclick={() => alert('Clicked!')}>Click action</Link>\n            <Link type=\"submit\">Submit type</Link>\n            <Link type=\"reset\">Reset type</Link>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI\" class=\"text-lg font-semibold\">\n<a href=\"#UI\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">ui</code> prop to override\n            styles on specific slots.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6 rounded-lg bg-surface-container-high p-4\">\n            <Link href=\"/link\" ui={{ base: 'underline underline-offset-4 decoration-2' }}>\n                Underlined\n            </Link>\n            <Link href=\"/link\" ui={{ base: 'font-bold text-lg' }}>Bold & Large</Link>\n            <Link href=\"/link\" ui={{ base: 'uppercase tracking-wider text-xs font-semibold' }}>\n                Uppercase\n            </Link>\n        </div>\n    </section>\n\n    <!-- States Overview -->\n    <section class=\"space-y-3\">\n        <h2 id=\"States\" class=\"text-lg font-semibold\">\n<a href=\"#States\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        States\n                    </a>\n</h2>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant\">\n                        <th class=\"px-3 py-3 text-left text-sm font-medium text-on-surface-variant\"\n                            >State</th\n                        >\n                        <th class=\"px-3 py-3 text-left text-sm font-medium text-on-surface-variant\"\n                            >&lt;a&gt;</th\n                        >\n                        <th class=\"px-3 py-3 text-left text-sm font-medium text-on-surface-variant\"\n                            >&lt;button&gt;</th\n                        >\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr class=\"border-b border-outline-variant/50\">\n                        <td class=\"px-3 py-3 text-sm font-medium text-on-surface-variant\"\n                            >Default</td\n                        >\n                        <td class=\"px-3 py-3\">\n                            <Link href=\"/demo\">Link text</Link>\n                        </td>\n                        <td class=\"px-3 py-3\">\n                            <Link>Button text</Link>\n                        </td>\n                    </tr>\n                    <tr class=\"border-b border-outline-variant/50\">\n                        <td class=\"px-3 py-3 text-sm font-medium text-on-surface-variant\">Active</td\n                        >\n                        <td class=\"px-3 py-3\">\n                            <Link href=\"/link\" active={true}>Link text</Link>\n                        </td>\n                        <td class=\"px-3 py-3\">\n                            <Link active={true}>Button text</Link>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td class=\"px-3 py-3 text-sm font-medium text-on-surface-variant\"\n                            >Disabled</td\n                        >\n                        <td class=\"px-3 py-3\">\n                            <Link href=\"/link\" disabled>Link text</Link>\n                        </td>\n                        <td class=\"px-3 py-3\">\n                            <Link disabled>Button text</Link>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Examples\n                    </a>\n</h2>\n\n        <!-- Navigation Bar -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Navigation bar</p>\n            <nav class=\"flex items-center gap-6\">\n                <Link href=\"/\" exact activeClass=\"font-semibold\">Home</Link>\n                <Link href=\"/about\" activeClass=\"font-semibold\">About</Link>\n                <Link href=\"/link\" activeClass=\"font-semibold\" active={true}>Docs</Link>\n                <Link href=\"/pricing\" activeClass=\"font-semibold\">Pricing</Link>\n            </nav>\n        </div>\n\n        <!-- Sidebar Menu -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Sidebar menu</p>\n            <div class=\"flex w-56 flex-col gap-0.5\">\n                <Link\n                    href=\"/link\"\n                    raw\n                    active={true}\n                    activeClass=\"bg-primary-container text-on-primary-container font-medium\"\n                    inactiveClass=\"text-on-surface-variant hover:bg-surface-container-highest\"\n                    class=\"flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors\"\n                >\n                    <Icon name=\"lucide:layout-dashboard\" size=\"16\" />\n                    Dashboard\n                </Link>\n                <Link\n                    href=\"/settings\"\n                    raw\n                    activeClass=\"bg-primary-container text-on-primary-container font-medium\"\n                    inactiveClass=\"text-on-surface-variant hover:bg-surface-container-highest\"\n                    class=\"flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors\"\n                >\n                    <Icon name=\"lucide:settings\" size=\"16\" />\n                    Settings\n                </Link>\n                <Link\n                    href=\"/profile\"\n                    raw\n                    activeClass=\"bg-primary-container text-on-primary-container font-medium\"\n                    inactiveClass=\"text-on-surface-variant hover:bg-surface-container-highest\"\n                    class=\"flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors\"\n                >\n                    <Icon name=\"lucide:user\" size=\"16\" />\n                    Profile\n                </Link>\n            </div>\n        </div>\n\n        <!-- Breadcrumb -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Breadcrumb</p>\n            <nav class=\"flex items-center gap-1 text-sm\">\n                <Link href=\"/\">Home</Link>\n                <Icon name=\"lucide:chevron-right\" size=\"14\" class=\"text-on-surface-variant/50\" />\n                <Link href=\"/link\">Components</Link>\n                <Icon name=\"lucide:chevron-right\" size=\"14\" class=\"text-on-surface-variant/50\" />\n                <span class=\"text-on-surface\">Link</span>\n            </nav>\n        </div>\n\n        <!-- Footer Links -->\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <p class=\"text-xs font-medium text-on-surface-variant uppercase\">Footer links</p>\n            <div class=\"flex items-center gap-4 text-sm\">\n                <Link href=\"https://github.com\">\n                    <Icon name=\"lucide:github\" size=\"14\" class=\"mr-1\" />\n                    GitHub\n                </Link>\n                <span class=\"text-outline-variant\">|</span>\n                <Link href=\"https://svelte.dev\">\n                    <Icon name=\"lucide:external-link\" size=\"14\" class=\"mr-1\" />\n                    Svelte\n                </Link>\n                <span class=\"text-outline-variant\">|</span>\n                <Link\n                    href=\"/link\"\n                    raw\n                    class=\"text-on-surface-variant underline hover:text-on-surface\"\n                    >Privacy Policy</Link\n                >\n            </div>\n        </div>\n    </section>\n</div>\n",
     "locale-button": "<script lang=\"ts\">\n    import { CodeBlock, LocaleButton, Icon, Separator } from '$lib/index.js'\n    import type { LocaleButtonLocale } from '$lib/index.js'\n\n    const locales: LocaleButtonLocale[] = [\n        {\n            code: 'en',\n            label: 'English',\n            shortLabel: 'EN',\n            description: 'Default content language'\n        },\n        {\n            code: 'th',\n            label: 'Thai',\n            shortLabel: 'TH',\n            description: 'Thai translation'\n        },\n        {\n            code: 'ja',\n            label: 'Japanese',\n            shortLabel: 'JA',\n            description: 'Japanese translation'\n        }\n    ]\n\n    const flagLocales: LocaleButtonLocale[] = [\n        { code: 'th', label: 'Thai', shortLabel: 'TH' },\n        { code: 'la', label: 'Lao', shortLabel: 'LO' },\n        { code: 'en', label: 'English', shortLabel: 'EN' }\n    ]\n    let flagLocale = $state('th')\n\n    const variants = ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n    const integrationStrategies = [\n        {\n            title: 'Callback Strategy',\n            badge: 'Recommended',\n            description:\n                'Use onLocaleChange when your app controls locale changes in code. This works well with Paraglide cookie-based setups and custom i18n stores.',\n            bullets: [\n                'Keeps the current pathname unchanged',\n                'Works with setLocale(..., { reload: false })',\n                'Best default for consumer apps'\n            ]\n        },\n        {\n            title: 'Href Strategy',\n            badge: 'Optional',\n            description:\n                'Use getLocaleHref when your app intentionally exposes locale-specific URLs such as /th/docs or /en/docs.',\n            bullets: [\n                'Generates per-locale links',\n                'Useful for URL-prefix routing',\n                'Navigation happens through hrefs instead of imperative state'\n            ]\n        },\n        {\n            title: 'Custom I18n',\n            badge: 'Flexible',\n            description:\n                'You can use LocaleButton without Paraglide at all. Pass your own locale state, persistence, and translation runtime.',\n            bullets: [\n                'No hard dependency on Paraglide',\n                'Works with stores, cookies, or API-backed preferences',\n                'Good for non-SvelteKit or mixed stacks'\n            ]\n        }\n    ] as const\n\n    const localeItemFields = [\n        {\n            field: 'code',\n            required: 'Yes',\n            description: 'The locale identifier used by your i18n layer, such as en or th.'\n        },\n        {\n            field: 'label',\n            required: 'Yes',\n            description: 'The full label rendered in the dropdown menu.'\n        },\n        {\n            field: 'shortLabel',\n            required: 'No',\n            description: 'Compact text for the trigger or badge, such as EN or TH.'\n        },\n        {\n            field: 'description',\n            required: 'No',\n            description: 'Secondary helper text shown inside the menu.'\n        },\n        {\n            field: 'href',\n            required: 'No',\n            description: 'A precomputed locale-specific link if your app uses href navigation.'\n        },\n        {\n            field: 'hreflang',\n            required: 'No',\n            description: 'Optional hreflang value forwarded to anchor items.'\n        },\n        {\n            field: 'disabled',\n            required: 'No',\n            description: 'Disables a specific locale item.'\n        }\n    ] as const\n\n    const integrationChecklist = [\n        'Use onLocaleChange when you do not want locale prefixes in the URL.',\n        'Use getLocaleHref only when your routing strategy intentionally includes locale-specific paths.',\n        'Pass locale from your own source of truth so the trigger always reflects the current language.',\n        'Provide shortLabel values when you want compact trigger text such as EN, TH, or JA.',\n        'Use the children snippet when your product needs a fully custom trigger design.'\n    ] as const\n\n    let locale = $state('en')\n    let customLocale = $state('th')\n\n    const paraglideSetLocaleExample =\n        `<script lang=\"ts\">\n import { LocaleButton, type LocaleButtonLocale } from 'svelora'\n import { setLocale, toLocale } from '$lib/paraglide/runtime'\n \n const locales: LocaleButtonLocale[] = [\n   { code: 'en', label: 'English', shortLabel: 'EN' },\n   { code: 'th', label: 'Thai', shortLabel: 'TH' }\n ]\n \n let locale = 'en'\n<` +\n        `/script>\n\n<LocaleButton\n {locale}\n {locales}\n onLocaleChange={(nextLocale) => {\n  locale = nextLocale\n  const target = toLocale(nextLocale)\n  if (target) {\n   return setLocale(target)\n  }\n }}\n/>`\n\n    const paraglideCookieExample =\n        `<script lang=\"ts\">\n import { LocaleButton, type LocaleButtonLocale } from 'svelora'\n import { setLocale, toLocale } from '$lib/paraglide/runtime'\n \n const locales: LocaleButtonLocale[] = [\n   { code: 'en', label: 'English', shortLabel: 'EN' },\n   { code: 'th', label: 'Thai', shortLabel: 'TH' }\n ]\n \n let locale = 'en'\n<` +\n        `/script>\n\n<LocaleButton\n {locale}\n {locales}\n onLocaleChange={(nextLocale) => {\n  locale = nextLocale\n  const target = toLocale(nextLocale)\n  if (target) {\n   return setLocale(target, { reload: false })\n  }\n }}\n/>`\n\n    const consumerAppExample =\n        `<script lang=\"ts\">\n import { LocaleButton, type LocaleButtonLocale } from 'svelora'\n import { setLocale, toLocale } from '$lib/paraglide/runtime'\n \n const locales: LocaleButtonLocale[] = [\n   { code: 'en', label: 'English', shortLabel: 'EN' },\n   { code: 'th', label: 'Thai', shortLabel: 'TH' }\n ]\n \n let locale = 'en'\n<` +\n        `/script>\n\n<LocaleButton\n {locales}\n {locale}\n onLocaleChange={(nextLocale) => {\n  locale = nextLocale\n  const target = toLocale(nextLocale)\n  if (target) {\n   return setLocale(target, { reload: false })\n  }\n }}\n/>`\n\n    const hrefStrategyExample =\n        `<script lang=\"ts\">\n import { LocaleButton, type LocaleButtonLocale } from 'svelora'\n import { localizeHref } from '$lib/paraglide/runtime'\n \n const locales: LocaleButtonLocale[] = [\n   { code: 'en', label: 'English', shortLabel: 'EN' },\n   { code: 'th', label: 'Thai', shortLabel: 'TH' }\n ]\n \n let locale = 'en'\n const pathname = '/docs/components/locale-button'\n<` +\n        `/script>\n\n<LocaleButton\n {locales}\n {locale}\n getLocaleHref={(nextLocale) => localizeHref(pathname, { locale: nextLocale })}\n/>`\n\n    const customI18nExample =\n        `<script lang=\"ts\">\n import { LocaleButton, type LocaleButtonLocale } from 'svelora'\n \n const locales: LocaleButtonLocale[] = [\n   { code: 'en', label: 'English', shortLabel: 'EN' },\n   { code: 'th', label: 'Thai', shortLabel: 'TH' }\n ]\n \n let locale = 'en'\n \n function applyLocale(nextLocale: string) {\n   locale = nextLocale\n   localStorage.setItem('preferred-locale', nextLocale)\n }\n<` +\n        `/script>\n\n<LocaleButton\n {locales}\n {locale}\n onLocaleChange={(nextLocale) => {\n  applyLocale(nextLocale)\n }}\n/>`\n\n    const localeShapeExample = `import type { LocaleButtonLocale } from 'svelora'\n\nconst locales: LocaleButtonLocale[] = [\n  {\n    code: 'en',\n    label: 'English',\n    shortLabel: 'EN',\n    description: 'Default content language'\n  },\n  {\n    code: 'th',\n    label: 'Thai',\n    shortLabel: 'TH',\n    description: 'Thai translation',\n    href: '/th/docs',\n    hreflang: 'th'\n  }\n]`\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">LocaleButton</h1>\n        <p class=\"text-on-surface-variant\">\n            A language switcher button designed to work nicely with Paraglide. Use\n            <code class=\"rounded bg-surface-container-highest px-1\">onLocaleChange</code> for\n            <code class=\"rounded bg-surface-container-highest px-1\">setLocale()</code> flows\n            while keeping the current path unchanged.\n        </p>\n    </div>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap items-center gap-4 rounded-lg bg-surface-container-high p-4\">\n            <LocaleButton\n                {locales}\n                {locale}\n                onLocaleChange={(nextLocale) => {\n                    locale = nextLocale\n                }}\n            />\n            <span class=\"text-sm text-on-surface-variant\">Current locale: {locale}</span>\n        </div>\n    </section>\n\n    <section class=\"space-y-4\">\n        <h2 id=\"Choose-Your-Strategy\" class=\"text-lg font-semibold\">\n<a href=\"#Choose-Your-Strategy\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Choose Your Strategy\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1\">LocaleButton</code> is only\n            the UI layer. Your app decides how locale changes are applied.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-3\">\n            {#each integrationStrategies as strategy (strategy.title)}\n                <div class=\"space-y-3 rounded-2xl border border-outline-variant bg-surface-container/40 p-5\">\n                    <div class=\"flex items-center justify-between gap-3\">\n                        <h3 class=\"text-base font-semibold\">{strategy.title}</h3>\n                        <span class=\"rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary\">\n                            {strategy.badge}\n                        </span>\n                    </div>\n                    <p class=\"text-sm text-on-surface-variant\">{strategy.description}</p>\n                    <ul class=\"space-y-2 text-sm text-on-surface-variant\">\n                        {#each strategy.bullets as bullet (bullet)}\n                            <li>{bullet}</li>\n                        {/each}\n                    </ul>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Paraglide-with-setLocale\" class=\"text-lg font-semibold\">\n<a href=\"#Paraglide-with-setLocale\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Paraglide with setLocale\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the selection callback when your app already manages locale changes in code.\n        </p>\n        <CodeBlock title=\"Paraglide setLocale()\" code={paraglideSetLocaleExample} />\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <LocaleButton\n                {locales}\n                {locale}\n                onLocaleChange={(nextLocale) => {\n                    locale = nextLocale\n                }}\n            />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Use-In-Consumer-Apps\" class=\"text-lg font-semibold\">\n<a href=\"#Use-In-Consumer-Apps\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Use In Consumer Apps\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1\">LocaleButton</code> is\n            exported from the\n            <code class=\"rounded bg-surface-container-highest px-1\">svelora</code> package and can\n            be used in any app that installs this library.\n        </p>\n        <p class=\"text-sm text-on-surface-variant\">\n            The component does not depend on Paraglide internally. Your app provides\n            <code class=\"rounded bg-surface-container-highest px-1\">locale</code>,\n            <code class=\"rounded bg-surface-container-highest px-1\">locales</code>, and the\n            locale-change logic through\n            <code class=\"rounded bg-surface-container-highest px-1\">onLocaleChange</code> or\n            <code class=\"rounded bg-surface-container-highest px-1\">getLocaleHref</code>.\n        </p>\n        <CodeBlock title=\"Consumer app example\" code={consumerAppExample} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Keep-The-Same-Path\" class=\"text-lg font-semibold\">\n<a href=\"#Keep-The-Same-Path\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Keep The Same Path\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            With cookie-based Paraglide strategy, you can switch locale without adding\n            <code class=\"rounded bg-surface-container-highest px-1\">/th</code> or other locale\n            prefixes to the URL.\n        </p>\n        <CodeBlock title=\"Paraglide without locale prefix\" code={paraglideCookieExample} />\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <LocaleButton\n                {locales}\n                {locale}\n                disableCurrentLocale={false}\n                onLocaleChange={(nextLocale) => {\n                    locale = nextLocale\n                }}\n            />\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Use-Locale-Prefix-URLs\" class=\"text-lg font-semibold\">\n<a href=\"#Use-Locale-Prefix-URLs\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Use Locale Prefix URLs\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            If your product intentionally uses locale-prefixed routes such as\n            <code class=\"rounded bg-surface-container-highest px-1\">/th/docs</code>, provide\n            <code class=\"rounded bg-surface-container-highest px-1\">getLocaleHref</code>. This\n            keeps navigation declarative and lets the button render locale-specific links.\n        </p>\n        <CodeBlock title=\"Href strategy with localizeHref()\" code={hrefStrategyExample} />\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Use-Without-Paraglide\" class=\"text-lg font-semibold\">\n<a href=\"#Use-Without-Paraglide\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Use Without Paraglide\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            The component works with any locale source of truth. You can connect it to a Svelte\n            store, cookies, localStorage, an API-backed user preference, or another i18n runtime.\n        </p>\n        <CodeBlock title=\"Custom i18n integration\" code={customI18nExample} />\n    </section>\n\n    <section class=\"space-y-4\">\n        <h2 id=\"Locale-Item-Shape\" class=\"text-lg font-semibold\">\n<a href=\"#Locale-Item-Shape\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Locale Item Shape\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each locale entry is just data. Start with\n            <code class=\"rounded bg-surface-container-highest px-1\">code</code> and\n            <code class=\"rounded bg-surface-container-highest px-1\">label</code>, then add\n            optional fields only when your app needs them.\n        </p>\n        <CodeBlock title=\"LocaleButtonLocale[]\" code={localeShapeExample} />\n        <div class=\"overflow-hidden rounded-2xl border border-outline-variant\">\n            <table class=\"w-full text-left text-sm\">\n                <thead class=\"bg-surface-container\">\n                    <tr>\n                        <th class=\"px-4 py-3 font-semibold\">Field</th>\n                        <th class=\"px-4 py-3 font-semibold\">Required</th>\n                        <th class=\"px-4 py-3 font-semibold\">Purpose</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each localeItemFields as field (field.field)}\n                        <tr class=\"border-t border-outline-variant/70\">\n                            <td class=\"px-4 py-3 font-mono text-xs\">{field.field}</td>\n                            <td class=\"px-4 py-3 text-on-surface-variant\">{field.required}</td>\n                            <td class=\"px-4 py-3 text-on-surface-variant\">{field.description}</td>\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <section class=\"space-y-4\">\n        <h2 id=\"Integration-Checklist\" class=\"text-lg font-semibold\">\n<a href=\"#Integration-Checklist\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Integration Checklist\n                    </a>\n</h2>\n        <div class=\"rounded-2xl border border-outline-variant bg-surface-container/40 p-5\">\n            <ul class=\"space-y-3 text-sm text-on-surface-variant\">\n                {#each integrationChecklist as item (item)}\n                    <li>{item}</li>\n                {/each}\n            </ul>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap items-center gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each variants as variant (variant)}\n                <LocaleButton\n                    {locales}\n                    {locale}\n                    {variant}\n                    size=\"sm\"\n                    onLocaleChange={(nextLocale) => {\n                        locale = nextLocale\n                    }}\n                />\n            {/each}\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap items-end gap-3 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <LocaleButton\n                    {locales}\n                    {locale}\n                    {size}\n                    onLocaleChange={(nextLocale) => {\n                        locale = nextLocale\n                    }}\n                />\n            {/each}\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Trigger\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Trigger\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Trigger\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the\n            <code class=\"rounded bg-surface-container-highest px-1\">children</code> snippet to\n            fully control the trigger content while keeping the dropdown behavior.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <LocaleButton\n                {locales}\n                locale={customLocale}\n                square={false}\n                variant=\"soft\"\n                color=\"primary\"\n                onLocaleChange={(nextLocale) => {\n                    customLocale = nextLocale\n                }}\n            >\n                {#snippet children({ currentLocale, open })}\n                    <span class=\"flex items-center gap-2\">\n                        <span>{currentLocale?.label ?? 'Language'}</span>\n                        <span class=\"text-xs text-on-surface-variant\">\n                            {open ? 'Open' : currentLocale?.code.toUpperCase()}\n                        </span>\n                    </span>\n                {/snippet}\n            </LocaleButton>\n        </div>\n    </section>\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Menu-Items\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Menu-Items\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Menu Items\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the\n            <code class=\"rounded bg-surface-container-highest px-1\">item</code> snippet to completely\n            redesign how each language row looks inside the dropdown.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex gap-4\">\n            <LocaleButton\n                {locales}\n                locale={customLocale}\n                onLocaleChange={(nextLocale) => {\n                    customLocale = nextLocale\n                }}\n            >\n                {#snippet item({ item, current, close })}\n                    <button\n                        class={`w-full flex items-center justify-between px-3 py-2 text-sm transition-colors ${\n                            current ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface hover:bg-surface-container-highest'\n                        }`}\n                        onclick={() => {\n                            customLocale = item.code\n                            close()\n                        }}\n                    >\n                        <div class=\"flex items-center gap-2\">\n                            <span>{item.code === 'th' ? '🇹🇭' : item.code === 'ja' ? '🇯🇵' : '🇺🇸'}</span>\n                            <span>{item.label}</span>\n                        </div>\n                        {#if current}\n                            <span class=\"text-primary text-xs\">Active</span>\n                        {/if}\n                    </button>\n                {/snippet}\n            </LocaleButton>\n        </div>\n    </section>\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Menu-Layout\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Menu-Layout\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Menu Layout\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            If you need to break out of the standard vertical list, use the\n            <code class=\"rounded bg-surface-container-highest px-1\">menu</code> snippet to build\n            an entirely custom dropdown grid or layout.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <LocaleButton\n                {locales}\n                locale={customLocale}\n                onLocaleChange={(nextLocale) => {\n                    customLocale = nextLocale\n                }}\n            >\n                {#snippet menu({ close })}\n                    <div class=\"grid grid-cols-2 gap-2 p-3 min-w-64 bg-surface rounded-xl border border-outline-variant shadow-lg\">\n                        <div class=\"col-span-2 pb-2 mb-2 border-b border-outline-variant/50\">\n                            <p class=\"text-xs font-medium text-on-surface-variant\">Select Region</p>\n                        </div>\n                        {#each locales as item}\n                            <button\n                                class={`flex flex-col items-center gap-1 p-3 rounded-lg border transition-all ${\n                                    customLocale === item.code \n                                        ? 'border-primary bg-primary/5 text-primary' \n                                        : 'border-outline-variant bg-surface hover:bg-surface-container'\n                                }`}\n                                onclick={() => {\n                                    customLocale = item.code\n                                    close()\n                                }}\n                            >\n                                <span class=\"text-2xl\">{item.code === 'th' ? '🇹🇭' : item.code === 'ja' ? '🇯🇵' : '🇺🇸'}</span>\n                                <span class=\"text-xs font-medium\">{item.shortLabel}</span>\n                            </button>\n                        {/each}\n                    </div>\n                {/snippet}\n            </LocaleButton>\n        </div>\n    </section>\n\n    <Separator />\n\n    <section class=\"space-y-3\">\n        <h2 id=\"Flag-Icons-Design\" class=\"text-lg font-semibold\">\n<a href=\"#Flag-Icons-Design\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Flag Icons Design\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Here is a highly requested design: a circular flag trigger that reveals a dropdown of languages with flags.\n            This uses both the <code class=\"rounded bg-surface-container-highest px-1\">children</code> and \n            <code class=\"rounded bg-surface-container-highest px-1\">item</code> snippets.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex gap-4\">\n            <LocaleButton\n                locales={flagLocales}\n                locale={flagLocale}\n                square\n                variant=\"outline\"\n                color=\"secondary\"\n                showChevron={false}\n                class=\"rounded-full !p-1 border-[1.5px] border-primary text-primary overflow-hidden bg-surface\"\n                onLocaleChange={(nextLocale) => {\n                    flagLocale = nextLocale\n                }}\n            >\n                {#snippet children({ currentLocale })}\n                    <!-- Using iconify circle-flags -->\n                    {#if currentLocale?.code === 'th'}\n                        <Icon name=\"circle-flags:th\" size=\"32\" />\n                    {:else if currentLocale?.code === 'la'}\n                        <Icon name=\"circle-flags:la\" size=\"32\" />\n                    {:else if currentLocale?.code === 'en'}\n                        <Icon name=\"circle-flags:uk\" size=\"32\" />\n                    {:else}\n                        <Icon name=\"lucide:globe\" size=\"24\" />\n                    {/if}\n                {/snippet}\n\n                {#snippet item({ item, current, close })}\n                    <button\n                        class={`w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors rounded-lg ${\n                            current ? 'bg-surface-container-high text-on-surface' : 'text-on-surface-variant hover:bg-surface-container hover:text-on-surface'\n                        }`}\n                        onclick={() => {\n                            flagLocale = item.code\n                            close()\n                        }}\n                    >\n                        {#if item.code === 'th'}\n                            <Icon name=\"circle-flags:th\" size=\"24\" />\n                        {:else if item.code === 'la'}\n                            <Icon name=\"circle-flags:la\" size=\"24\" />\n                        {:else if item.code === 'en'}\n                            <Icon name=\"circle-flags:uk\" size=\"24\" />\n                        {/if}\n                        \n                        <span class=\"font-medium text-[15px]\">{item.shortLabel}</span>\n                    </button>\n                {/snippet}\n            </LocaleButton>\n        </div>\n    </section>\n</div>\n",
@@ -129,7 +129,7 @@
     "list": "<script lang=\"ts\">\n    import { List, ListItem, Avatar } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">List</h1>\n        <p class=\"text-on-surface-variant\">\n            A versatile component for displaying continuous, vertical indexes of text or images.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">List</code> to wrap multiple <code class=\"rounded bg-surface-container-highest px-1\">ListItem</code> components.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <List class=\"w-full max-w-md bg-surface border border-outline-variant rounded-lg\">\n                <ListItem title=\"Account Settings\" description=\"Manage your profile and preferences\" />\n                <ListItem title=\"Security\" description=\"Password, 2FA, and sessions\" />\n                <ListItem title=\"Notifications\" description=\"Email and push alerts\" />\n            </List>\n        </div>\n    </section>\n\n    <!-- Avatars & Actions -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Avatars--Actions\" class=\"text-lg font-semibold\">\n<a href=\"#Avatars--Actions\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatars & Actions\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">leading</code> and <code class=\"rounded bg-surface-container-highest px-1\">trailing</code> snippets to add avatars, icons, or buttons.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <List class=\"w-full max-w-md bg-surface border border-outline-variant rounded-lg\">\n                <ListItem title=\"Alice\" description=\"Active 2m ago\" href=\"#\">\n                    {#snippet leading()}\n                        <Avatar src=\"https://i.pravatar.cc/150?img=1\" alt=\"Alice\" />\n                    {/snippet}\n                </ListItem>\n                <ListItem title=\"Bob\" description=\"Offline\" href=\"#\">\n                    {#snippet leading()}\n                        <Avatar src=\"https://i.pravatar.cc/150?img=2\" alt=\"Bob\" />\n                    {/snippet}\n                </ListItem>\n            </List>\n        </div>\n    </section>\n</div>\n",
     "number-ticker": "<script lang=\"ts\">\n    import { NumberTicker } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">NumberTicker</h1>\n        <p class=\"text-on-surface-variant\">\n            An animated counter that smoothly transitions from zero to a target number.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Simply provide a <code class=\"rounded bg-surface-container-highest px-1\">value</code>. It will automatically format with commas.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-8 flex flex-col items-center justify-center gap-4\">\n            <div class=\"text-4xl font-extrabold text-primary\">\n                <NumberTicker value={150000} />\n            </div>\n            <div class=\"text-on-surface-variant\">Total Users</div>\n        </div>\n    </section>\n\n    <!-- Decimals & Duration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Decimals--Duration\" class=\"text-lg font-semibold\">\n<a href=\"#Decimals--Duration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Decimals & Duration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">decimals</code> for floating point numbers and <code class=\"rounded bg-surface-container-highest px-1\">duration</code> to control speed.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-8 flex flex-col items-center justify-center gap-4\">\n            <div class=\"text-4xl font-extrabold text-success\">\n                $<NumberTicker value={2.5} decimals={2} duration={3000} />M\n            </div>\n            <div class=\"text-on-surface-variant\">Revenue</div>\n        </div>\n    </section>\n</div>\n",
     "prose": "<script lang=\"ts\">\n    import { Prose } from '$lib/index.js'\n    \n    const sampleHtml = `\n        <h1>Introducing Svelora</h1>\n        <p>Svelora is a beautiful, highly customizable UI component library for Svelte 5. It provides a solid foundation for your next web application.</p>\n        <h2 id=\"Key-Features\">\n<a href=\"#Key-Features\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Key Features\n                    </a>\n</h2>\n        <ul>\n            <li>Built with Tailwind CSS</li>\n            <li>Fully typesafe</li>\n            <li>Accessible and responsive</li>\n        </ul>\n        <blockquote>The best UI library I have ever used! - <em>A Happy Developer</em></blockquote>\n        <pre><code>npm install svelora</code></pre>\n        <p>For more information, visit our <a href=\"#\">documentation</a>.</p>\n    `\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Prose</h1>\n        <p class=\"text-on-surface-variant\">\n            A typography wrapper to easily style Markdown or raw HTML content.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage-with-Raw-HTML\" class=\"text-lg font-semibold\">\n<a href=\"#Usage-with-Raw-HTML\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage with Raw HTML\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass a string of HTML to the <code class=\"rounded bg-surface-container-highest px-1\">html</code> prop. It will automatically apply beautiful typography styles.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <div class=\"w-full max-w-2xl bg-surface p-8 border border-outline-variant rounded-lg\">\n                <Prose html={sampleHtml} />\n            </div>\n        </div>\n    </section>\n\n    <!-- Slot Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage-with-Svelte-Content\" class=\"text-lg font-semibold\">\n<a href=\"#Usage-with-Svelte-Content\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage with Svelte Content\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            You can also wrap standard Svelte elements inside <code class=\"rounded bg-surface-container-highest px-1\">Prose</code> to apply styles.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <div class=\"w-full max-w-2xl bg-surface p-8 border border-outline-variant rounded-lg\">\n                <Prose size=\"sm\">\n                    <h2 id=\"Smaller-Size-Prose\">\n<a href=\"#Smaller-Size-Prose\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Smaller Size Prose\n                    </a>\n</h2>\n                    <p>By using <code class=\"px-1 py-0.5 rounded bg-surface-container\">size=\"sm\"</code>, the typography scales down appropriately.</p>\n                    <hr />\n                    <table>\n                        <thead>\n                            <tr>\n                                <th>Component</th>\n                                <th>Status</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td>Prose</td>\n                                <td>Done</td>\n                            </tr>\n                            <tr>\n                                <td>Other</td>\n                                <td>In Progress</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </Prose>\n            </div>\n        </div>\n    </section>\n</div>\n",
-    "empty": "<script lang=\"ts\">\n    import { Empty, Separator } from '$lib/index.js'\n    import Link from '$lib/Link/Link.svelte'\n\n    const variants = ['solid', 'outline', 'soft', 'subtle', 'naked'] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Empty</h1>\n        <p class=\"text-on-surface-variant\">\n            Display empty state UI when there's no content to show, with support for icons, avatars,\n            and action buttons.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-3\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">\n                    Icon + title + description\n                </p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:inbox\"\n                        title=\"No messages\"\n                        description=\"You don't have any messages yet.\"\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Title only</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty icon=\"lucide:file-x\" title=\"No files found\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With avatar</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        avatar={{ src: 'https://i.pravatar.cc/150?u=empty', alt: 'User' }}\n                        title=\"No notifications\"\n                        description=\"You're all caught up!\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Variants with Icon -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants-with-Icon\" class=\"text-lg font-semibold\">\n<a href=\"#Variants-with-Icon\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants with Icon\n                    </a>\n</h2>\n        <div class=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {#each variants as variant (variant)}\n                <div class=\"space-y-2\">\n                    <p class=\"text-sm font-medium text-on-surface-variant capitalize\">{variant}</p>\n                    <div class=\"rounded-lg bg-surface-container-high p-4\">\n                        <Empty\n                            {variant}\n                            icon=\"lucide:inbox\"\n                            title=\"No items\"\n                            description=\"Nothing to display here.\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Variants with Avatar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants-with-Avatar\" class=\"text-lg font-semibold\">\n<a href=\"#Variants-with-Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants with Avatar\n                    </a>\n</h2>\n        <div class=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {#each variants as variant (variant)}\n                <div class=\"space-y-2\">\n                    <p class=\"text-sm font-medium text-on-surface-variant capitalize\">{variant}</p>\n                    <div class=\"rounded-lg bg-surface-container-high p-4\">\n                        <Empty\n                            {variant}\n                            avatar={{\n                                src: 'https://i.pravatar.cc/150?u=variant-{variant}',\n                                alt: 'User'\n                            }}\n                            title=\"No notifications\"\n                            description=\"You're all caught up!\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-3\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-start gap-4\">\n                    <span class=\"w-8 pt-4 text-sm font-medium text-on-surface-variant\">{size}</span>\n                    <div class=\"flex-1\">\n                        <Empty\n                            {size}\n                            icon=\"lucide:inbox\"\n                            title=\"Empty state\"\n                            description=\"This is the {size} size.\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- With Actions -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Actions\" class=\"text-lg font-semibold\">\n<a href=\"#With-Actions\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Actions\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Single action</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:inbox\"\n                        title=\"No messages\"\n                        description=\"Start a conversation with your team.\"\n                        actions={[{ label: 'New Message', leadingIcon: 'lucide:plus' }]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Multiple actions</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:shopping-cart\"\n                        title=\"Cart is empty\"\n                        description=\"Add some items to get started.\"\n                        actions={[\n                            { label: 'Browse Products' },\n                            { label: 'View Wishlist', variant: 'ghost' }\n                        ]}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom leading</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        variant=\"outline\"\n                        title=\"Welcome!\"\n                        description=\"Get started by exploring our components.\"\n                    >\n                        {#snippet leading()}\n                            <div\n                                class=\"flex size-16 items-center justify-center rounded-full bg-tertiary/10 text-tertiary\"\n                            >\n                                <span class=\"text-3xl\">🎉</span>\n                            </div>\n                        {/snippet}\n                    </Empty>\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom header</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty variant=\"soft\">\n                        {#snippet header()}\n                            <div class=\"flex flex-col items-center gap-3 text-center\">\n                                <div\n                                    class=\"flex size-14 items-center justify-center rounded-full bg-primary/10\"\n                                >\n                                    <span class=\"text-2xl text-primary\">✨</span>\n                                </div>\n                                <div>\n                                    <p class=\"text-lg font-bold text-primary\">Custom Header</p>\n                                    <p class=\"text-sm text-on-surface-variant\">\n                                        Entirely custom header content\n                                    </p>\n                                </div>\n                            </div>\n                        {/snippet}\n                    </Empty>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Footer Slot -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Footer\" class=\"text-lg font-semibold\">\n<a href=\"#With-Footer\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Footer\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Empty\n                variant=\"subtle\"\n                icon=\"lucide:help-circle\"\n                title=\"Need help?\"\n                description=\"Check our documentation or contact support.\"\n            >\n                {#snippet footer()}\n                    <p class=\"text-xs text-on-surface-variant\">\n                        Last updated: March 2026 · <Link href=\"/empty\" class=\"underline\"\n                            >Documentation</Link\n                        >\n                    </p>\n                {/snippet}\n            </Empty>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <Empty\n                    icon=\"lucide:star\"\n                    title=\"Custom Styles\"\n                    description=\"With ui slot overrides.\"\n                    actions={[{ label: 'Action' }]}\n                    ui={{\n                        title: 'text-warning font-bold',\n                        description: 'italic',\n                        actions: 'mt-2'\n                    }}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <Empty\n                    icon=\"lucide:heart\"\n                    title=\"Custom Root\"\n                    description=\"Dashed border styling.\"\n                    ui={{\n                        root: 'border-2 border-dashed border-outline-variant'\n                    }}\n                />\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <!-- Empty Inbox -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Empty Inbox</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:mail\"\n                title=\"Inbox Zero!\"\n                description=\"You've read all your messages. Great job staying on top of things!\"\n            />\n        </div>\n\n        <!-- No Search Results -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">No Search Results</p>\n            <Empty\n                variant=\"outline\"\n                icon=\"lucide:search-x\"\n                title=\"No results found\"\n                description=\"We couldn't find anything matching your search. Try different keywords.\"\n                actions={[\n                    { label: 'Clear Search', leadingIcon: 'lucide:x' },\n                    { label: 'Browse All', variant: 'outline' }\n                ]}\n            />\n        </div>\n\n        <!-- Network Error -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Network Error</p>\n            <Empty\n                variant=\"subtle\"\n                icon=\"lucide:wifi-off\"\n                title=\"Connection lost\"\n                description=\"Unable to load data. Please check your internet connection and try again.\"\n                actions={[{ label: 'Retry', leadingIcon: 'lucide:refresh-cw' }]}\n            />\n        </div>\n\n        <!-- Completed Tasks -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">All Tasks Done</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:check-circle-2\"\n                title=\"All tasks completed!\"\n                description=\"You've finished everything on your list. Time to relax or add new tasks.\"\n                actions={[\n                    { label: 'Add Task', leadingIcon: 'lucide:plus' },\n                    { label: 'View Archive', variant: 'ghost' }\n                ]}\n            />\n        </div>\n\n        <!-- Empty Cart -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Empty Shopping Cart</p>\n            <Empty\n                variant=\"naked\"\n                icon=\"lucide:shopping-cart\"\n                title=\"Your cart is empty\"\n                description=\"Looks like you haven't added anything yet.\"\n                actions={[{ label: 'Start Shopping', leadingIcon: 'lucide:shopping-bag' }]}\n            />\n        </div>\n\n        <!-- No Files -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">No Files Uploaded</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:file-x\"\n                title=\"No files uploaded\"\n                description=\"Upload your first file to get started with your project.\"\n                actions={[\n                    { label: 'Upload File', leadingIcon: 'lucide:upload' },\n                    { label: 'Import from URL', variant: 'ghost' }\n                ]}\n            />\n        </div>\n    </section>\n</div>\n",
+    "empty": "<script lang=\"ts\">\n    import { Empty, Separator } from '$lib/index.js'\n    import Link from '$lib/components/Link/Link.svelte'\n\n    const variants = ['solid', 'outline', 'soft', 'subtle', 'naked'] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Empty</h1>\n        <p class=\"text-on-surface-variant\">\n            Display empty state UI when there's no content to show, with support for icons, avatars,\n            and action buttons.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-3\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">\n                    Icon + title + description\n                </p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:inbox\"\n                        title=\"No messages\"\n                        description=\"You don't have any messages yet.\"\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Title only</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty icon=\"lucide:file-x\" title=\"No files found\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With avatar</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        avatar={{ src: 'https://i.pravatar.cc/150?u=empty', alt: 'User' }}\n                        title=\"No notifications\"\n                        description=\"You're all caught up!\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Variants with Icon -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants-with-Icon\" class=\"text-lg font-semibold\">\n<a href=\"#Variants-with-Icon\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants with Icon\n                    </a>\n</h2>\n        <div class=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {#each variants as variant (variant)}\n                <div class=\"space-y-2\">\n                    <p class=\"text-sm font-medium text-on-surface-variant capitalize\">{variant}</p>\n                    <div class=\"rounded-lg bg-surface-container-high p-4\">\n                        <Empty\n                            {variant}\n                            icon=\"lucide:inbox\"\n                            title=\"No items\"\n                            description=\"Nothing to display here.\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Variants with Avatar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants-with-Avatar\" class=\"text-lg font-semibold\">\n<a href=\"#Variants-with-Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants with Avatar\n                    </a>\n</h2>\n        <div class=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {#each variants as variant (variant)}\n                <div class=\"space-y-2\">\n                    <p class=\"text-sm font-medium text-on-surface-variant capitalize\">{variant}</p>\n                    <div class=\"rounded-lg bg-surface-container-high p-4\">\n                        <Empty\n                            {variant}\n                            avatar={{\n                                src: 'https://i.pravatar.cc/150?u=variant-{variant}',\n                                alt: 'User'\n                            }}\n                            title=\"No notifications\"\n                            description=\"You're all caught up!\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-3\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-start gap-4\">\n                    <span class=\"w-8 pt-4 text-sm font-medium text-on-surface-variant\">{size}</span>\n                    <div class=\"flex-1\">\n                        <Empty\n                            {size}\n                            icon=\"lucide:inbox\"\n                            title=\"Empty state\"\n                            description=\"This is the {size} size.\"\n                        />\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- With Actions -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Actions\" class=\"text-lg font-semibold\">\n<a href=\"#With-Actions\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Actions\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Single action</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:inbox\"\n                        title=\"No messages\"\n                        description=\"Start a conversation with your team.\"\n                        actions={[{ label: 'New Message', leadingIcon: 'lucide:plus' }]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Multiple actions</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        icon=\"lucide:shopping-cart\"\n                        title=\"Cart is empty\"\n                        description=\"Add some items to get started.\"\n                        actions={[\n                            { label: 'Browse Products' },\n                            { label: 'View Wishlist', variant: 'ghost' }\n                        ]}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom leading</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty\n                        variant=\"outline\"\n                        title=\"Welcome!\"\n                        description=\"Get started by exploring our components.\"\n                    >\n                        {#snippet leading()}\n                            <div\n                                class=\"flex size-16 items-center justify-center rounded-full bg-tertiary/10 text-tertiary\"\n                            >\n                                <span class=\"text-3xl\">🎉</span>\n                            </div>\n                        {/snippet}\n                    </Empty>\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom header</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Empty variant=\"soft\">\n                        {#snippet header()}\n                            <div class=\"flex flex-col items-center gap-3 text-center\">\n                                <div\n                                    class=\"flex size-14 items-center justify-center rounded-full bg-primary/10\"\n                                >\n                                    <span class=\"text-2xl text-primary\">✨</span>\n                                </div>\n                                <div>\n                                    <p class=\"text-lg font-bold text-primary\">Custom Header</p>\n                                    <p class=\"text-sm text-on-surface-variant\">\n                                        Entirely custom header content\n                                    </p>\n                                </div>\n                            </div>\n                        {/snippet}\n                    </Empty>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Footer Slot -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Footer\" class=\"text-lg font-semibold\">\n<a href=\"#With-Footer\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Footer\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Empty\n                variant=\"subtle\"\n                icon=\"lucide:help-circle\"\n                title=\"Need help?\"\n                description=\"Check our documentation or contact support.\"\n            >\n                {#snippet footer()}\n                    <p class=\"text-xs text-on-surface-variant\">\n                        Last updated: March 2026 · <Link href=\"/empty\" class=\"underline\"\n                            >Documentation</Link\n                        >\n                    </p>\n                {/snippet}\n            </Empty>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <Empty\n                    icon=\"lucide:star\"\n                    title=\"Custom Styles\"\n                    description=\"With ui slot overrides.\"\n                    actions={[{ label: 'Action' }]}\n                    ui={{\n                        title: 'text-warning font-bold',\n                        description: 'italic',\n                        actions: 'mt-2'\n                    }}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <Empty\n                    icon=\"lucide:heart\"\n                    title=\"Custom Root\"\n                    description=\"Dashed border styling.\"\n                    ui={{\n                        root: 'border-2 border-dashed border-outline-variant'\n                    }}\n                />\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <!-- Empty Inbox -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Empty Inbox</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:mail\"\n                title=\"Inbox Zero!\"\n                description=\"You've read all your messages. Great job staying on top of things!\"\n            />\n        </div>\n\n        <!-- No Search Results -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">No Search Results</p>\n            <Empty\n                variant=\"outline\"\n                icon=\"lucide:search-x\"\n                title=\"No results found\"\n                description=\"We couldn't find anything matching your search. Try different keywords.\"\n                actions={[\n                    { label: 'Clear Search', leadingIcon: 'lucide:x' },\n                    { label: 'Browse All', variant: 'outline' }\n                ]}\n            />\n        </div>\n\n        <!-- Network Error -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Network Error</p>\n            <Empty\n                variant=\"subtle\"\n                icon=\"lucide:wifi-off\"\n                title=\"Connection lost\"\n                description=\"Unable to load data. Please check your internet connection and try again.\"\n                actions={[{ label: 'Retry', leadingIcon: 'lucide:refresh-cw' }]}\n            />\n        </div>\n\n        <!-- Completed Tasks -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">All Tasks Done</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:check-circle-2\"\n                title=\"All tasks completed!\"\n                description=\"You've finished everything on your list. Time to relax or add new tasks.\"\n                actions={[\n                    { label: 'Add Task', leadingIcon: 'lucide:plus' },\n                    { label: 'View Archive', variant: 'ghost' }\n                ]}\n            />\n        </div>\n\n        <!-- Empty Cart -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Empty Shopping Cart</p>\n            <Empty\n                variant=\"naked\"\n                icon=\"lucide:shopping-cart\"\n                title=\"Your cart is empty\"\n                description=\"Looks like you haven't added anything yet.\"\n                actions={[{ label: 'Start Shopping', leadingIcon: 'lucide:shopping-bag' }]}\n            />\n        </div>\n\n        <!-- No Files -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">No Files Uploaded</p>\n            <Empty\n                variant=\"soft\"\n                icon=\"lucide:file-x\"\n                title=\"No files uploaded\"\n                description=\"Upload your first file to get started with your project.\"\n                actions={[\n                    { label: 'Upload File', leadingIcon: 'lucide:upload' },\n                    { label: 'Import from URL', variant: 'ghost' }\n                ]}\n            />\n        </div>\n    </section>\n</div>\n",
     "skeleton": "<script lang=\"ts\">\n    import { Skeleton, Card, Avatar, Button, Separator } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Skeleton</h1>\n        <p class=\"text-on-surface-variant\">\n            Display placeholder content while data is loading to improve perceived performance.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"space-y-3 rounded-lg bg-surface-container-high p-4\">\n            <Skeleton class=\"h-4 w-3/4\" />\n            <Skeleton class=\"h-4 w-1/2\" />\n            <Skeleton class=\"h-4 w-2/3\" />\n        </div>\n    </section>\n\n    <!-- Shapes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Shapes\" class=\"text-lg font-semibold\">\n<a href=\"#Shapes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Shapes\n                    </a>\n</h2>\n        <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Text Lines</p>\n                <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n                    <Skeleton class=\"h-4 w-48\" />\n                    <Skeleton class=\"h-4 w-40\" />\n                    <Skeleton class=\"h-4 w-44\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Circle (Avatar)</p>\n                <div\n                    class=\"flex items-center justify-center rounded-lg bg-surface-container-high p-4\"\n                >\n                    <Skeleton class=\"size-12 rounded-full\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Square</p>\n                <div\n                    class=\"flex items-center justify-center rounded-lg bg-surface-container-high p-4\"\n                >\n                    <Skeleton class=\"size-24 rounded-lg\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Rectangle (Image)</p>\n                <div\n                    class=\"flex items-center justify-center rounded-lg bg-surface-container-high p-4\"\n                >\n                    <Skeleton class=\"h-24 w-full rounded-lg\" />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- As Different Element -->\n    <section class=\"space-y-3\">\n        <h2 id=\"As-Different-Element\" class=\"text-lg font-semibold\">\n<a href=\"#As-Different-Element\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        As Different Element\n                    </a>\n</h2>\n        <div class=\"space-y-2 rounded-lg bg-surface-container-high p-4\">\n            <Skeleton as=\"span\" class=\"inline-block h-4 w-32\" />\n            <Skeleton as=\"div\" class=\"h-4 w-48\" />\n            <Skeleton as=\"p\" class=\"h-4 w-40\" />\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom background</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Skeleton class=\"h-16 w-full\" ui={{ root: 'bg-primary/15' }} />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom border radius</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Skeleton class=\"h-16 w-full\" ui={{ root: 'rounded-2xl' }} />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <!-- Loading Card Comparison -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Card Loading vs Loaded</p>\n            <div class=\"grid gap-4 md:grid-cols-2\">\n                <Card>\n                    <div class=\"space-y-3\">\n                        <div class=\"flex items-center gap-3\">\n                            <Skeleton class=\"size-12 rounded-full\" />\n                            <div class=\"flex-1 space-y-2\">\n                                <Skeleton class=\"h-4 w-1/3\" />\n                                <Skeleton class=\"h-3 w-1/2\" />\n                            </div>\n                        </div>\n                        <Skeleton class=\"h-4 w-full\" />\n                        <Skeleton class=\"h-4 w-5/6\" />\n                        <Skeleton class=\"h-4 w-4/6\" />\n                        <div class=\"flex gap-2 pt-2\">\n                            <Skeleton class=\"h-9 w-24\" />\n                            <Skeleton class=\"h-9 w-20\" />\n                        </div>\n                    </div>\n                </Card>\n                <Card>\n                    <div class=\"space-y-3\">\n                        <div class=\"flex items-center gap-3\">\n                            <Avatar\n                                src=\"https://i.pravatar.cc/150?img=3\"\n                                alt=\"Jane Smith\"\n                                size=\"md\"\n                            />\n                            <div>\n                                <h3 class=\"font-semibold\">Jane Smith</h3>\n                                <p class=\"text-sm text-on-surface-variant\">Product Designer</p>\n                            </div>\n                        </div>\n                        <p class=\"text-on-surface-variant\">\n                            Creating beautiful and functional user interfaces with attention to\n                            detail and user experience.\n                        </p>\n                        <div class=\"flex gap-2\">\n                            <Button variant=\"solid\" color=\"primary\" label=\"Follow\" size=\"sm\" />\n                            <Button variant=\"ghost\" color=\"secondary\" label=\"Message\" size=\"sm\" />\n                        </div>\n                    </div>\n                </Card>\n            </div>\n        </div>\n\n        <!-- Loading List -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">User List</p>\n            <Card>\n                <div class=\"space-y-4\">\n                    {#each Array.from({ length: 4 }, (_, i) => i) as i (i)}\n                        <div\n                            class=\"flex items-center gap-3 border-b border-outline-variant pb-4 last:border-0 last:pb-0\"\n                        >\n                            <Skeleton class=\"size-10 rounded-full\" />\n                            <div class=\"flex-1 space-y-2\">\n                                <Skeleton class=\"h-4 w-1/4\" />\n                                <Skeleton class=\"h-3 w-3/4\" />\n                            </div>\n                        </div>\n                    {/each}\n                </div>\n            </Card>\n        </div>\n\n        <!-- Loading Article -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Article</p>\n            <Card as=\"article\">\n                <div class=\"space-y-4\">\n                    <div class=\"space-y-3\">\n                        <Skeleton class=\"h-8 w-3/4\" />\n                        <div class=\"flex items-center gap-3\">\n                            <Skeleton class=\"size-8 rounded-full\" />\n                            <div class=\"space-y-2\">\n                                <Skeleton class=\"h-3 w-24\" />\n                                <Skeleton class=\"h-3 w-32\" />\n                            </div>\n                        </div>\n                    </div>\n                    <Skeleton class=\"h-48 w-full rounded-lg\" />\n                    <div class=\"space-y-2\">\n                        <Skeleton class=\"h-4 w-full\" />\n                        <Skeleton class=\"h-4 w-full\" />\n                        <Skeleton class=\"h-4 w-5/6\" />\n                        <Skeleton class=\"h-4 w-4/6\" />\n                    </div>\n                </div>\n            </Card>\n        </div>\n\n        <!-- Dashboard Widgets -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Dashboard Widgets</p>\n            <div class=\"grid gap-4 md:grid-cols-3\">\n                {#each Array.from({ length: 3 }, (_, i) => i) as i (i)}\n                    <Card>\n                        <div class=\"space-y-3\">\n                            <div class=\"flex items-center justify-between\">\n                                <Skeleton class=\"h-4 w-24\" />\n                                <Skeleton class=\"size-6 rounded\" />\n                            </div>\n                            <Skeleton class=\"h-10 w-20\" />\n                            <Skeleton class=\"h-20 w-full rounded\" />\n                        </div>\n                    </Card>\n                {/each}\n            </div>\n        </div>\n\n        <!-- Media Grid -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Media Grid</p>\n            <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n                {#each Array.from({ length: 4 }, (_, i) => i) as i (i)}\n                    <div class=\"space-y-2\">\n                        <Skeleton class=\"aspect-square w-full rounded-lg\" />\n                        <Skeleton class=\"h-3 w-3/4\" />\n                        <Skeleton class=\"h-3 w-1/2\" />\n                    </div>\n                {/each}\n            </div>\n        </div>\n    </section>\n</div>\n",
     "timeline": "<script lang=\"ts\">\n    import { Timeline, Button, Separator } from '$lib/index.js'\n    import type { TimelineItem } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const\n\n    // Basic items\n    const basicItems: TimelineItem[] = [\n        { value: 1, title: 'Step 1', description: 'First step', date: 'Jan 1' },\n        { value: 2, title: 'Step 2', description: 'Second step', date: 'Jan 5' },\n        { value: 3, title: 'Step 3', description: 'Third step', date: 'Jan 10' }\n    ]\n\n    // Order tracking\n    let orderStep = $state(2)\n    const orderItems: TimelineItem[] = [\n        {\n            value: 1,\n            icon: 'lucide:shopping-cart',\n            title: 'Order Placed',\n            description: 'Your order has been confirmed',\n            date: 'Dec 20'\n        },\n        {\n            value: 2,\n            icon: 'lucide:package',\n            title: 'Processing',\n            description: 'Preparing your items',\n            date: 'Dec 21'\n        },\n        {\n            value: 3,\n            icon: 'lucide:truck',\n            title: 'Shipped',\n            description: 'On the way to you',\n            date: 'Dec 22'\n        },\n        {\n            value: 4,\n            icon: 'lucide:home',\n            title: 'Delivered',\n            description: 'Package delivered',\n            date: 'Dec 24'\n        }\n    ]\n\n    // Checkout stepper\n    let checkoutStep = $state(2)\n    const checkoutItems: TimelineItem[] = [\n        { value: 1, icon: 'lucide:shopping-bag', title: 'Cart' },\n        { value: 2, icon: 'lucide:map-pin', title: 'Address' },\n        { value: 3, icon: 'lucide:credit-card', title: 'Payment' },\n        { value: 4, icon: 'lucide:check', title: 'Confirm' }\n    ]\n\n    // Activity feed\n    const activityItems: TimelineItem[] = [\n        {\n            avatar: { src: 'https://i.pravatar.cc/150?u=john', alt: 'John' },\n            title: 'John merged PR #142',\n            description: 'feat: add Timeline component',\n            date: '5 min ago'\n        },\n        {\n            avatar: { src: 'https://i.pravatar.cc/150?u=sarah', alt: 'Sarah' },\n            title: 'Sarah commented',\n            description: 'Looks great! Ready for review.',\n            date: '15 min ago'\n        },\n        {\n            avatar: { src: 'https://i.pravatar.cc/150?u=mike', alt: 'Mike' },\n            title: 'Mike pushed 3 commits',\n            description: 'fix: resolve styling issues',\n            date: '1 hour ago'\n        },\n        {\n            avatar: { src: 'https://i.pravatar.cc/150?u=emma', alt: 'Emma' },\n            title: 'Emma created issue #38',\n            description: 'Bug: Timeline not rendering correctly',\n            date: '2 hours ago'\n        }\n    ]\n\n    // Per-item ui demo\n    const perItemUiItems: TimelineItem[] = [\n        {\n            value: 1,\n            icon: 'lucide:star',\n            title: 'Highlighted Step',\n            date: 'Special',\n            ui: {\n                indicator: 'ring-2 ring-warning ring-offset-2 ring-offset-surface-container-high',\n                title: 'text-warning font-bold'\n            }\n        },\n        {\n            value: 2,\n            icon: 'lucide:zap',\n            title: 'Normal Step',\n            date: 'Default'\n        },\n        {\n            value: 3,\n            icon: 'lucide:heart',\n            title: 'Custom Separator',\n            date: 'Styled',\n            ui: { separator: 'bg-gradient-to-b from-error to-primary' }\n        }\n    ]\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Timeline</h1>\n        <p class=\"text-on-surface-variant\">\n            Display a sequence of events with dates, titles, icons or avatars.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Without active state</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline\n                        items={[\n                            { title: 'Event 1', date: 'Jan 1' },\n                            { title: 'Event 2', date: 'Jan 5' },\n                            { title: 'Event 3', date: 'Jan 10' }\n                        ]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With active state</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline items={basicItems} value={2} />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Icons & Avatars -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Icons--Avatars\" class=\"text-lg font-semibold\">\n<a href=\"#Icons--Avatars\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icons & Avatars\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With Icons</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline\n                        items={[\n                            { value: 1, icon: 'lucide:file-plus', title: 'Created', date: 'Dec 1' },\n                            { value: 2, icon: 'lucide:edit', title: 'Edited', date: 'Dec 5' },\n                            {\n                                value: 3,\n                                icon: 'lucide:check-circle',\n                                title: 'Approved',\n                                date: 'Dec 8'\n                            }\n                        ]}\n                        value={2}\n                        color=\"success\"\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With Avatars</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline\n                        items={[\n                            {\n                                avatar: { src: 'https://i.pravatar.cc/150?u=a', alt: 'Alice' },\n                                title: 'Alice started',\n                                date: '2h ago'\n                            },\n                            {\n                                avatar: { src: 'https://i.pravatar.cc/150?u=b', alt: 'Bob' },\n                                title: 'Bob reviewed',\n                                date: '1h ago'\n                            },\n                            { avatar: { alt: 'You' }, title: 'You approved', date: 'Just now' }\n                        ]}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <div class=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n            {#each colors as color (color)}\n                <div class=\"rounded-lg bg-surface-container-high p-3\">\n                    <p class=\"mb-2 text-xs font-medium text-on-surface-variant capitalize\">\n                        {color}\n                    </p>\n                    <Timeline\n                        items={[\n                            { value: 1, title: 'Done' },\n                            { value: 2, title: 'Active' },\n                            { value: 3, title: 'Next' }\n                        ]}\n                        value={2}\n                        {color}\n                        size=\"sm\"\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"overflow-x-auto\">\n            <div\n                class=\"flex gap-6 rounded-lg bg-surface-container-high p-4\"\n                style=\"min-width: max-content;\"\n            >\n                {#each sizes as size (size)}\n                    <div class=\"flex flex-col items-center gap-2\">\n                        <span class=\"text-xs font-medium text-on-surface-variant\">{size}</span>\n                        <Timeline\n                            items={[\n                                { value: 1, icon: 'lucide:check' },\n                                { value: 2, icon: 'lucide:circle' }\n                            ]}\n                            value={1}\n                            {size}\n                        />\n                    </div>\n                {/each}\n            </div>\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <div class=\"space-y-4\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Horizontal</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline items={basicItems} value={2} orientation=\"horizontal\" />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Horizontal Reversed</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline items={basicItems} value={2} orientation=\"horizontal\" reverse />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Per-item UI Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Per-item-UI-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#Per-item-UI-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Per-item UI Overrides\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each item can have its own <code class=\"rounded bg-surface-container-highest px-1\"\n                >ui</code\n            > prop to override slot classes.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Timeline items={perItemUiItems} value={2} />\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom Indicator</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline\n                        items={[\n                            { value: 1, title: 'Phase 1', date: 'Q1' },\n                            { value: 2, title: 'Phase 2', date: 'Q2' },\n                            { value: 3, title: 'Phase 3', date: 'Q3' }\n                        ]}\n                        value={2}\n                    >\n                        {#snippet indicator({ state, index })}\n                            <div\n                                class=\"flex size-8 items-center justify-center rounded-full text-sm font-bold transition-all\"\n                                class:bg-primary={state !== 'pending'}\n                                class:text-on-primary={state !== 'pending'}\n                                class:bg-surface-container-highest={state === 'pending'}\n                                class:text-on-surface-variant={state === 'pending'}\n                                class:scale-110={state === 'active'}\n                            >\n                                {index + 1}\n                            </div>\n                        {/snippet}\n                    </Timeline>\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom Content</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Timeline\n                        items={[\n                            {\n                                value: 'v1',\n                                icon: 'lucide:package',\n                                title: 'v1.0.0',\n                                date: 'Jan 2024'\n                            },\n                            {\n                                value: 'v2',\n                                icon: 'lucide:sparkles',\n                                title: 'v2.0.0',\n                                date: 'Jun 2024'\n                            },\n                            {\n                                value: 'v3',\n                                icon: 'lucide:rocket',\n                                title: 'v3.0.0',\n                                date: 'Coming Soon'\n                            }\n                        ]}\n                        value=\"v2\"\n                        color=\"info\"\n                    >\n                        {#snippet content({ item, state })}\n                            <div\n                                class=\"mt-2 rounded-lg border border-outline-variant bg-surface-container p-3\"\n                            >\n                                {#if item.value === 'v1'}\n                                    <ul class=\"space-y-1 text-sm text-on-surface-variant\">\n                                        <li>Initial release</li>\n                                        <li>Core components</li>\n                                    </ul>\n                                {:else if item.value === 'v2'}\n                                    <ul class=\"space-y-1 text-sm text-on-surface-variant\">\n                                        <li>Timeline component</li>\n                                        <li>Performance improvements</li>\n                                    </ul>\n                                {:else}\n                                    <p class=\"text-sm text-on-surface-variant\">\n                                        {state === 'pending'\n                                            ? 'Exciting features coming!'\n                                            : 'Released!'}\n                                    </p>\n                                {/if}\n                            </div>\n                        {/snippet}\n                    </Timeline>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Timeline\n                items={[\n                    { value: 1, icon: 'lucide:star', title: 'Custom Ring', date: 'Styled' },\n                    { value: 2, icon: 'lucide:zap', title: 'Gradient Line', date: 'Colorful' },\n                    { value: 3, icon: 'lucide:heart', title: 'Bold Title', date: 'Italic' }\n                ]}\n                value={2}\n                ui={{\n                    indicator:\n                        'ring-2 ring-primary ring-offset-2 ring-offset-surface-container-high',\n                    separator: 'bg-gradient-to-b from-primary to-tertiary',\n                    title: 'text-primary font-bold',\n                    date: 'italic'\n                }}\n            />\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <!-- Order Tracking -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Order Tracking</p>\n            <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                <Timeline items={orderItems} value={orderStep} color=\"success\" />\n                <div class=\"mt-4 flex items-center justify-center gap-2\">\n                    <Button\n                        size=\"sm\"\n                        variant=\"outline\"\n                        onclick={() => (orderStep = Math.max(1, orderStep - 1))}\n                        disabled={orderStep === 1}\n                    >\n                        Previous\n                    </Button>\n                    <span class=\"px-3 text-sm text-on-surface-variant\">Step {orderStep} of 4</span>\n                    <Button\n                        size=\"sm\"\n                        variant=\"outline\"\n                        onclick={() => (orderStep = Math.min(4, orderStep + 1))}\n                        disabled={orderStep === 4}\n                    >\n                        Next\n                    </Button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Checkout Stepper -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Checkout Stepper (Horizontal)</p>\n            <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                <Timeline\n                    items={checkoutItems}\n                    value={checkoutStep}\n                    orientation=\"horizontal\"\n                    size=\"lg\"\n                />\n                <div class=\"mt-4 flex items-center justify-between\">\n                    <Button\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        onclick={() => (checkoutStep = Math.max(1, checkoutStep - 1))}\n                        disabled={checkoutStep === 1}\n                    >\n                        Back\n                    </Button>\n                    <Button\n                        size=\"sm\"\n                        onclick={() => (checkoutStep = Math.min(4, checkoutStep + 1))}\n                        disabled={checkoutStep === 4}\n                    >\n                        {checkoutStep === 3 ? 'Place Order' : 'Continue'}\n                    </Button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Activity Feed -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Activity Feed</p>\n            <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                <Timeline items={activityItems} size=\"lg\" />\n            </div>\n        </div>\n    </section>\n</div>\n",
     "user": "<script lang=\"ts\">\n    import { User, Separator } from '$lib/index.js'\n\n    const sizes = ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">User</h1>\n        <p class=\"text-on-surface-variant\">\n            Displays user information with avatar, name, and description.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-3\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With avatar & description</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"John Doe\"\n                        description=\"Software Engineer\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=john' }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Avatar with initials</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User name=\"Alex Chen\" description=\"Product Manager\" avatar={{ alt: 'AC' }} />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Name only</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User name=\"Jane Smith\" avatar={{ src: 'https://i.pravatar.cc/128?u=jane' }} />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-10 text-sm font-medium text-on-surface-variant\">{size}</span>\n                    <User\n                        name=\"John Doe\"\n                        description=\"Software Engineer\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=size-{size}' }}\n                        {size}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Horizontal (default)</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"John Doe\"\n                        description=\"Software Engineer\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=h' }}\n                        orientation=\"horizontal\"\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Vertical</p>\n                <div class=\"flex justify-center rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"John Doe\"\n                        description=\"Software Engineer\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=v' }}\n                        orientation=\"vertical\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- With Chip -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Chip\" class=\"text-lg font-semibold\">\n<a href=\"#With-Chip\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Chip\n                    </a>\n</h2>\n        <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Online</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Alice\"\n                        description=\"Available\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=online' }}\n                        chip={{ color: 'success' }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Busy</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Bob\"\n                        description=\"In a meeting\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=busy' }}\n                        chip={{ color: 'error' }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Away</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Carol\"\n                        description=\"Be right back\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=away' }}\n                        chip={{ color: 'warning' }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Default chip</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Dave\"\n                        description=\"Offline\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=offline' }}\n                        chip={true}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- As Link -->\n    <section class=\"space-y-3\">\n        <h2 id=\"As-Link\" class=\"text-lg font-semibold\">\n<a href=\"#As-Link\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        As Link\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <User\n                name=\"John Doe\"\n                description=\"View profile →\"\n                avatar={{ src: 'https://i.pravatar.cc/128?u=link' }}\n                href=\"/user\"\n            />\n        </div>\n    </section>\n\n    <!-- Clickable -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Clickable\" class=\"text-lg font-semibold\">\n<a href=\"#Clickable\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Clickable\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <User\n                name=\"Click me\"\n                description=\"Has onclick handler\"\n                avatar={{ src: 'https://i.pravatar.cc/128?u=click' }}\n                onclick={() => alert('Clicked!')}\n            />\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom avatar slot</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User name=\"Custom Avatar\" description=\"With emoji avatar\">\n                        {#snippet avatarSlot()}\n                            <div\n                                class=\"flex size-10 items-center justify-center rounded-full bg-primary text-lg\"\n                            >\n                                🎨\n                            </div>\n                        {/snippet}\n                    </User>\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom name & description</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User avatar={{ src: 'https://i.pravatar.cc/128?u=slot' }}>\n                        {#snippet nameSlot()}\n                            <p class=\"text-sm font-bold text-primary\">Premium User</p>\n                        {/snippet}\n                        {#snippet descriptionSlot()}\n                            <div class=\"flex items-center gap-1\">\n                                <span class=\"inline-block size-2 rounded-full bg-success\"></span>\n                                <span class=\"text-xs text-on-surface-variant\">Active now</span>\n                            </div>\n                        {/snippet}\n                    </User>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"grid gap-6 lg:grid-cols-3\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom text styles</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Styled Name\"\n                        description=\"Styled description\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=ui1' }}\n                        ui={{\n                            name: 'text-primary font-bold',\n                            description: 'text-tertiary italic'\n                        }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Bordered root</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Bordered\"\n                        description=\"With root override\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=ui2' }}\n                        ui={{\n                            root: 'border border-outline-variant rounded-xl p-3'\n                        }}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom avatar class</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <User\n                        name=\"Ring Avatar\"\n                        description=\"Avatar with ring\"\n                        avatar={{ src: 'https://i.pravatar.cc/128?u=ui3' }}\n                        ui={{\n                            avatar: 'ring-2 ring-primary ring-offset-2 ring-offset-surface-container-high'\n                        }}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <!-- User List -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">User List</p>\n            <div\n                class=\"max-w-sm space-y-1 rounded-lg border border-outline-variant bg-surface-container p-2\"\n            >\n                {#each [{ name: 'Alice Johnson', desc: 'Admin', u: 'alice' }, { name: 'Bob Williams', desc: 'Editor', u: 'bob' }, { name: 'Carol Davis', desc: 'Viewer', u: 'carol' }] as item (item.u)}\n                    <User\n                        name={item.name}\n                        description={item.desc}\n                        avatar={{\n                            src: `https://i.pravatar.cc/128?u=${item.u}`,\n                            alt: item.name\n                        }}\n                        onclick={() => alert(item.name)}\n                        size=\"sm\"\n                    />\n                {/each}\n            </div>\n        </div>\n\n        <!-- Comment Header -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Comment Header</p>\n            <div class=\"max-w-md rounded-lg border border-outline-variant bg-surface-container p-4\">\n                <User\n                    name=\"Sarah Chen\"\n                    description=\"2 hours ago\"\n                    avatar={{ src: 'https://i.pravatar.cc/128?u=sarah' }}\n                    size=\"sm\"\n                />\n                <p class=\"mt-2 text-sm text-on-surface-variant\">\n                    This looks great! I love the new design direction. The component feels much more\n                    polished now.\n                </p>\n            </div>\n        </div>\n\n        <!-- Profile Card -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Profile Card</p>\n            <div class=\"max-w-xs rounded-lg border border-outline-variant bg-surface-container p-6\">\n                <User\n                    name=\"Emily Parker\"\n                    description=\"Senior Developer at Acme Corp\"\n                    avatar={{ src: 'https://i.pravatar.cc/128?u=emily' }}\n                    orientation=\"vertical\"\n                    size=\"xl\"\n                    chip={{ color: 'success' }}\n                />\n            </div>\n        </div>\n\n        <!-- Team Members -->\n        <div class=\"space-y-3\">\n            <p class=\"text-sm font-medium\">Team Members</p>\n            <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n                {#each [{ name: 'Mike Ross', role: 'Frontend', u: 'mike', color: 'primary' as const }, { name: 'Rachel Zane', role: 'Backend', u: 'rachel', color: 'secondary' as const }, { name: 'Harvey Specter', role: 'Lead', u: 'harvey', color: 'tertiary' as const }] as member (member.u)}\n                    <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                        <User\n                            name={member.name}\n                            description={member.role}\n                            avatar={{ src: `https://i.pravatar.cc/128?u=${member.u}` }}\n                            chip={{ color: member.color }}\n                            href=\"/user\"\n                        />\n                    </div>\n                {/each}\n            </div>\n        </div>\n    </section>\n</div>\n",
@@ -138,7 +138,7 @@
     "checkbox": "<script lang=\"ts\">\n    import { Checkbox, FormField, Separator } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\n    let bindChecked = $state(false)\n    let indeterminate = $state(true)\n\n    let allChecked = $state(false)\n    let items = $state([\n        { label: 'Emails', checked: false },\n        { label: 'Push notifications', checked: false },\n        { label: 'SMS alerts', checked: false }\n    ])\n\n    function syncSelectAll() {\n        const all = items.every((i) => i.checked)\n        const none = items.every((i) => !i.checked)\n        allChecked = all\n        indeterminate = !all && !none\n    }\n\n    function toggleAll(checked: boolean) {\n        allChecked = checked\n        indeterminate = false\n        items = items.map((i) => ({ ...i, checked }))\n    }\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">Checkbox</h1>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A checkbox component for boolean and indeterminate states.\n        </p>\n        <div class=\"flex flex-wrap gap-6\">\n            <Checkbox />\n            <Checkbox checked={true} />\n        </div>\n    </section>\n\n    <!-- Two-way Binding -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Two-way-Binding\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Two-way-Binding\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Two-way Binding\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:checked</code\n            > for reactive two-way data binding.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6\">\n            <Checkbox bind:checked={bindChecked} label=\"Toggle me\" />\n            <p class=\"text-sm text-on-surface-variant\">\n                Checked: <span class=\"font-mono text-on-surface\">{bindChecked}</span>\n            </p>\n        </div>\n    </section>\n\n    <!-- Label & Description -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Label-amp-Description\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Label-amp-Description\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Label &amp; Description\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">label</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >description</code\n            > to add text next to the checkbox.\n        </p>\n        <div class=\"flex flex-col gap-4\">\n            <Checkbox label=\"Accept terms\" />\n            <Checkbox\n                label=\"Marketing emails\"\n                description=\"Receive emails about new products and features.\"\n            />\n            <Checkbox\n                label=\"Push notifications\"\n                description=\"Get notified when someone mentions you.\"\n            />\n        </div>\n    </section>\n\n    <!-- Indeterminate -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Indeterminate\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Indeterminate\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Indeterminate\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:indeterminate</code\n            > for tri-state behavior, useful for \"select all\" patterns.\n        </p>\n        <div class=\"flex flex-col gap-3\">\n            <Checkbox\n                checked={allChecked}\n                {indeterminate}\n                label=\"Select all\"\n                onCheckedChange={toggleAll}\n            />\n            <div class=\"ms-6 flex flex-col gap-2\">\n                {#each items as item, i (item.label)}\n                    <Checkbox\n                        bind:checked={items[i].checked}\n                        label={item.label}\n                        onCheckedChange={() => syncSelectAll()}\n                    />\n                {/each}\n            </div>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code\n            > to control the checked background color.\n        </p>\n        <div class=\"flex flex-wrap gap-6\">\n            {#each colors as color (color)}\n                <Checkbox {color} checked={true} label={color} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code> to\n            control the dimensions.\n        </p>\n        <div class=\"flex flex-wrap items-center gap-6\">\n            {#each sizes as size (size)}\n                <Checkbox {size} checked={true} label={size} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Variant -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Variant\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >variant=\"card\"</code\n            > to display the checkbox inside a bordered card. The border highlights when checked.\n        </p>\n        <div class=\"flex max-w-sm flex-col gap-3\">\n            <Checkbox\n                variant=\"card\"\n                label=\"Email notifications\"\n                description=\"Receive alerts in your inbox.\"\n            />\n            <Checkbox\n                variant=\"card\"\n                checked={true}\n                label=\"Push notifications\"\n                description=\"Alerts on your device.\"\n                color=\"primary\"\n            />\n            <Checkbox\n                variant=\"card\"\n                checked={true}\n                label=\"SMS alerts\"\n                description=\"Text messages for critical updates.\"\n                color=\"success\"\n            />\n            <Checkbox\n                variant=\"card\"\n                disabled\n                label=\"Fax (unavailable)\"\n                description=\"This option is currently disabled.\"\n            />\n        </div>\n    </section>\n\n    <!-- Indicator -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Indicator-Position\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Indicator-Position\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Indicator Position\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >indicator</code\n            >\n            to control where the checkbox appears:\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">start</code>,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">end</code>, or\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">hidden</code>.\n        </p>\n        <div class=\"flex max-w-sm flex-col gap-4\">\n            <Checkbox\n                indicator=\"start\"\n                label=\"Start (default)\"\n                description=\"Checkbox on the left.\"\n            />\n            <Checkbox\n                indicator=\"end\"\n                label=\"End\"\n                description=\"Checkbox on the right.\"\n                checked={true}\n            />\n            <Checkbox\n                indicator=\"hidden\"\n                label=\"Hidden\"\n                description=\"Checkbox hidden, label only.\"\n                checked={true}\n                color=\"secondary\"\n            />\n        </div>\n        <div class=\"flex max-w-sm flex-col gap-3\">\n            <p class=\"text-xs text-on-surface-variant\">Combined with card variant</p>\n            <Checkbox\n                variant=\"card\"\n                indicator=\"end\"\n                label=\"Opt in to beta features\"\n                description=\"Get early access to new features.\"\n                checked={true}\n                color=\"tertiary\"\n            />\n        </div>\n    </section>\n\n    <!-- Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">icon</code>\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >indeterminateIcon</code\n            > to customize the icons.\n        </p>\n        <div class=\"flex flex-col gap-4\">\n            <Checkbox icon=\"lucide:heart\" checked={true} label=\"Favorite\" color=\"error\" />\n            <Checkbox icon=\"lucide:star\" checked={true} label=\"Starred\" color=\"warning\" />\n            <Checkbox icon=\"lucide:thumbs-up\" checked={true} label=\"Liked\" color=\"success\" />\n        </div>\n    </section>\n\n    <!-- Loading -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Loading\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Loading\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >loading</code\n            > to show a spinner and disable interaction.\n        </p>\n        <div class=\"flex flex-col gap-4\">\n            <Checkbox loading label=\"Syncing...\" />\n            <Checkbox loading checked={true} label=\"Saving preferences...\" color=\"success\" />\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >disabled</code\n            > to prevent interaction.\n        </p>\n        <div class=\"flex flex-wrap gap-6\">\n            <Checkbox disabled label=\"Disabled (off)\" />\n            <Checkbox disabled checked={true} label=\"Disabled (on)\" />\n        </div>\n    </section>\n\n    <!-- Required -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Required\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Required\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Required\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >required</code\n            > to show an asterisk next to the label.\n        </p>\n        <Checkbox required label=\"Accept terms and conditions\" />\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >labelSlot</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >descriptionSlot</code\n            > for fully custom label content.\n        </p>\n        <div class=\"flex flex-col gap-4\">\n            <Checkbox checked={true} color=\"success\">\n                {#snippet labelSlot()}\n                    <span class=\"flex items-center gap-1.5 text-sm font-medium text-on-surface\">\n                        <span class=\"inline-block size-2 rounded-full bg-success\"></span>\n                        System online\n                    </span>\n                {/snippet}\n                {#snippet descriptionSlot()}\n                    <span class=\"text-xs text-on-surface-variant\">\n                        All services are running normally. Last checked <strong>just now</strong>.\n                    </span>\n                {/snippet}\n            </Checkbox>\n\n            <Checkbox>\n                {#snippet labelSlot()}\n                    <span class=\"flex items-center gap-2 text-sm font-medium text-on-surface\">\n                        Beta features\n                        <span\n                            class=\"rounded bg-tertiary-container px-1.5 py-0.5 text-[10px] font-bold text-on-tertiary-container\"\n                            >BETA</span\n                        >\n                    </span>\n                {/snippet}\n            </Checkbox>\n        </div>\n    </section>\n\n    <!-- FormField Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FormField-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FormField-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FormField Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FormField</code\n            >, the Checkbox automatically inherits size and error state.\n        </p>\n        <div class=\"max-w-sm space-y-4\">\n            <FormField label=\"Preferences\" description=\"Choose your notification preferences.\">\n                <Checkbox label=\"Email notifications\" />\n            </FormField>\n            <FormField label=\"Agreement\" error=\"You must accept the terms.\">\n                <Checkbox label=\"I accept the terms of service\" />\n            </FormField>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Notification preferences (list)</p>\n                <div\n                    class=\"max-w-sm space-y-3 rounded-lg border border-outline-variant bg-surface-container-low p-4\"\n                >\n                    <Checkbox\n                        checked={true}\n                        label=\"Email digest\"\n                        description=\"Daily summary of activity.\"\n                        color=\"primary\"\n                    />\n                    <Checkbox\n                        checked={true}\n                        label=\"Push notifications\"\n                        description=\"Alerts on your device.\"\n                        color=\"primary\"\n                    />\n                    <Checkbox\n                        label=\"SMS alerts\"\n                        description=\"Text messages for critical updates.\"\n                        color=\"primary\"\n                    />\n                    <Checkbox\n                        loading\n                        label=\"Marketing emails\"\n                        description=\"Updating preference...\"\n                        color=\"primary\"\n                    />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Plan selection (card variant)</p>\n                <div class=\"max-w-sm space-y-3\">\n                    <Checkbox\n                        variant=\"card\"\n                        indicator=\"end\"\n                        checked={true}\n                        color=\"primary\"\n                        label=\"Starter\"\n                        description=\"$9/mo · Up to 3 projects\"\n                    />\n                    <Checkbox\n                        variant=\"card\"\n                        indicator=\"end\"\n                        color=\"primary\"\n                        label=\"Pro\"\n                        description=\"$29/mo · Unlimited projects\"\n                    />\n                    <Checkbox\n                        variant=\"card\"\n                        indicator=\"end\"\n                        color=\"primary\"\n                        label=\"Enterprise\"\n                        description=\"Custom pricing · SSO + advanced security\"\n                    />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Permissions (hidden indicator)</p>\n                <div\n                    class=\"max-w-sm space-y-2 rounded-lg border border-outline-variant bg-surface-container-low p-4\"\n                >\n                    <Checkbox indicator=\"hidden\" checked={true} color=\"success\">\n                        {#snippet labelSlot()}\n                            <span\n                                class=\"flex w-full items-center justify-between text-sm text-on-surface\"\n                            >\n                                Read\n                                <span\n                                    class=\"rounded bg-success-container px-1.5 py-0.5 text-[10px] font-semibold text-on-success-container\"\n                                    >Granted</span\n                                >\n                            </span>\n                        {/snippet}\n                    </Checkbox>\n                    <Checkbox indicator=\"hidden\" checked={true} color=\"success\">\n                        {#snippet labelSlot()}\n                            <span\n                                class=\"flex w-full items-center justify-between text-sm text-on-surface\"\n                            >\n                                Write\n                                <span\n                                    class=\"rounded bg-success-container px-1.5 py-0.5 text-[10px] font-semibold text-on-success-container\"\n                                    >Granted</span\n                                >\n                            </span>\n                        {/snippet}\n                    </Checkbox>\n                    <Checkbox indicator=\"hidden\">\n                        {#snippet labelSlot()}\n                            <span\n                                class=\"flex w-full items-center justify-between text-sm text-on-surface-variant\"\n                            >\n                                Admin\n                                <span\n                                    class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-[10px] font-semibold text-on-surface-variant\"\n                                    >Denied</span\n                                >\n                            </span>\n                        {/snippet}\n                    </Checkbox>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "color-picker": "<script lang=\"ts\">\n    import { ColorPicker } from '$lib/index.js'\n    \n    let color1 = $state('#3b82f6')\n    let color2 = $state('#f43f5e')\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">ColorPicker</h1>\n        <p class=\"text-on-surface-variant\">\n            A flexible component for selecting colors via swatches, hex input, or native color picker.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Bind a hex string variable to the <code class=\"rounded bg-surface-container-highest px-1\">value</code> prop using <code class=\"rounded bg-surface-container-highest px-1\">bind:value</code>.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex flex-col gap-4 max-w-sm\">\n            <ColorPicker bind:value={color1} />\n            <div class=\"text-sm text-on-surface-variant\">\n                Selected Color: <span class=\"font-mono font-bold\" style=\"color: {color1};\">{color1}</span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Disabled State -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">disabled</code> prop to prevent interaction.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex flex-col gap-4 max-w-sm\">\n            <ColorPicker bind:value={color2} disabled />\n        </div>\n    </section>\n</div>\n",
     "checkbox-group": "<script lang=\"ts\">\n    import { CheckboxGroup } from '$lib/index.js'\n    import type { CheckboxGroupItem } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\n    const basicItems: CheckboxGroupItem[] = [\n        { value: 'svelte', label: 'Svelte' },\n        { value: 'react', label: 'React' },\n        { value: 'vue', label: 'Vue' }\n    ]\n\n    const itemsWithDesc: CheckboxGroupItem[] = [\n        {\n            value: 'email',\n            label: 'Email',\n            description: 'Receive notifications via email'\n        },\n        {\n            value: 'sms',\n            label: 'SMS',\n            description: 'Receive notifications via text message'\n        },\n        {\n            value: 'push',\n            label: 'Push',\n            description: 'Receive browser push notifications'\n        }\n    ]\n\n    const itemsWithDisabled: CheckboxGroupItem[] = [\n        { value: 'read', label: 'Read' },\n        { value: 'write', label: 'Write' },\n        { value: 'delete', label: 'Delete', disabled: true },\n        { value: 'admin', label: 'Admin', disabled: true }\n    ]\n\n    let basicValue = $state(['svelte'])\n    let notifValue = $state(['email'])\n    let cardValue = $state(['email'])\n    let horizontalValue = $state<string[]>([])\n    let permissionValue = $state(['read'])\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">CheckboxGroup</h1>\n        <p class=\"text-on-surface-variant\">\n            Group of checkboxes for selecting multiple values from a list.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CheckboxGroup items={basicItems} bind:value={basicValue} legend=\"Frameworks\" />\n            <p class=\"mt-3 text-sm text-on-surface-variant\">\n                Selected: {basicValue.join(', ') || 'none'}\n            </p>\n        </div>\n    </section>\n\n    <!-- With Description -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Description\" class=\"text-lg font-semibold\">\n<a href=\"#With-Description\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Description\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CheckboxGroup\n                items={itemsWithDesc}\n                bind:value={notifValue}\n                legend=\"Notifications\"\n                required\n            />\n        </div>\n    </section>\n\n    <!-- Variants -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants\n                    </a>\n</h2>\n        <div class=\"grid grid-cols-1 gap-4 rounded-lg bg-surface-container-high p-4 sm:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">List (default)</p>\n                <CheckboxGroup items={basicItems} value={['svelte']} legend=\"Pick frameworks\" />\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Card</p>\n                <CheckboxGroup\n                    items={itemsWithDesc}\n                    bind:value={cardValue}\n                    variant=\"card\"\n                    legend=\"Notifications\"\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Vertical (default)</p>\n                <CheckboxGroup items={basicItems} value={['svelte', 'vue']} />\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Horizontal</p>\n                <CheckboxGroup\n                    items={basicItems}\n                    bind:value={horizontalValue}\n                    orientation=\"horizontal\"\n                />\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Horizontal · Card</p>\n                <CheckboxGroup\n                    items={basicItems}\n                    value={['react']}\n                    variant=\"card\"\n                    orientation=\"horizontal\"\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <div class=\"space-y-3 rounded-lg bg-surface-container-high p-4\">\n            {#each colors as color (color)}\n                <CheckboxGroup items={[{ value: color, label: color }]} value={[color]} {color} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-6 text-xs text-on-surface-variant\">{size}</span>\n                    <CheckboxGroup\n                        items={basicItems}\n                        value={['svelte']}\n                        {size}\n                        orientation=\"horizontal\"\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Indicator Position -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Indicator-Position\" class=\"text-lg font-semibold\">\n<a href=\"#Indicator-Position\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Indicator Position\n                    </a>\n</h2>\n        <div class=\"grid grid-cols-1 gap-4 rounded-lg bg-surface-container-high p-4 sm:grid-cols-3\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Start (default)</p>\n                <CheckboxGroup items={itemsWithDesc} value={['email']} indicator=\"start\" />\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">End</p>\n                <CheckboxGroup items={itemsWithDesc} value={['email']} indicator=\"end\" />\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Hidden</p>\n                <CheckboxGroup items={itemsWithDesc} value={['email']} indicator=\"hidden\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <div class=\"grid grid-cols-1 gap-4 rounded-lg bg-surface-container-high p-4 sm:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Entire group disabled</p>\n                <CheckboxGroup items={basicItems} value={['svelte']} disabled />\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Per-item disabled</p>\n                <CheckboxGroup\n                    items={itemsWithDisabled}\n                    bind:value={permissionValue}\n                    legend=\"Permissions\"\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <CheckboxGroup items={itemsWithDesc} value={['email', 'push']}>\n                {#snippet legendSlot()}\n                    <span class=\"mb-1 block text-sm font-semibold text-primary\">\n                        Notification channels\n                    </span>\n                {/snippet}\n                {#snippet labelSlot({ item })}\n                    <span class=\"ms-2 text-sm font-semibold text-on-surface\">{item.label}</span>\n                {/snippet}\n                {#snippet descriptionSlot({ item })}\n                    <span class=\"ms-2 text-xs text-on-surface-variant italic\"\n                        >{item.description}</span\n                    >\n                {/snippet}\n            </CheckboxGroup>\n        </div>\n    </section>\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n        <div class=\"space-y-6 rounded-lg bg-surface-container-high p-4\">\n            <!-- Settings form -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Settings Form</p>\n                <div\n                    class=\"max-w-sm space-y-4 rounded-lg border border-outline-variant bg-surface-container p-4\"\n                >\n                    <CheckboxGroup\n                        items={[\n                            {\n                                value: 'marketing',\n                                label: 'Marketing emails',\n                                description: 'Promotions and offers'\n                            },\n                            {\n                                value: 'updates',\n                                label: 'Product updates',\n                                description: 'New features and improvements'\n                            },\n                            {\n                                value: 'security',\n                                label: 'Security alerts',\n                                description: 'Login and activity alerts'\n                            }\n                        ]}\n                        value={['security']}\n                        legend=\"Email preferences\"\n                        variant=\"card\"\n                        color=\"primary\"\n                    />\n                </div>\n            </div>\n\n            <!-- Filter tags -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Filter Tags</p>\n                <CheckboxGroup\n                    items={[\n                        { value: 'design', label: 'Design' },\n                        { value: 'engineering', label: 'Engineering' },\n                        { value: 'product', label: 'Product' },\n                        { value: 'marketing', label: 'Marketing' }\n                    ]}\n                    value={['design', 'engineering']}\n                    orientation=\"horizontal\"\n                    color=\"tertiary\"\n                    size=\"sm\"\n                />\n            </div>\n\n            <!-- Permission checklist -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Permission Checklist</p>\n                <CheckboxGroup\n                    items={[\n                        { value: 'read', label: 'Read', description: 'View resources' },\n                        {\n                            value: 'write',\n                            label: 'Write',\n                            description: 'Create and edit resources'\n                        },\n                        { value: 'delete', label: 'Delete', description: 'Remove resources' },\n                        {\n                            value: 'admin',\n                            label: 'Admin',\n                            description: 'Full access',\n                            disabled: true\n                        }\n                    ]}\n                    value={['read', 'write']}\n                    legend=\"API permissions\"\n                    variant=\"card\"\n                    color=\"error\"\n                    indicator=\"end\"\n                />\n            </div>\n        </div>\n    </section>\n</div>\n",
-    "editor": "<script lang=\"ts\">\n    import { Editor } from '$lib/Editor/index.js'\n    import type { EditorApi, EditorJSON, MentionItem } from '$lib/Editor/index.js'\n    import { Button, Badge, Separator, Card, Icon, Form, FormField, Input } from '$lib/index.js'\n\n    let basicHtml = $state('<p>Start writing here…</p>')\n\n    let jsonValue = $state<EditorJSON>({\n        type: 'doc',\n        content: [\n            {\n                type: 'paragraph',\n                content: [{ type: 'text', text: 'This document is stored as JSON.' }]\n            }\n        ]\n    })\n\n    let customToolbarValue = $state('<p>Only <strong>bold</strong> and <em>italic</em>.</p>')\n\n    let api = $state<EditorApi>()\n    let apiValue = $state('<p>Drive me from outside.</p>')\n\n    let limitedValue = $state('<p>Type here…</p>')\n\n    let bubbleValue = $state('<p>Select any text to see the floating menu.</p>')\n\n    // ----- Phase 2 demos -----\n\n    let markdownValue = $state('# Hello\\n\\nThis editor outputs **Markdown**.')\n\n    let imageValue = $state('<p>Click the image button to upload.</p>')\n    async function fakeUploadImage(file: File): Promise<string> {\n        // Demo: convert to data URL. Real apps would upload to a backend.\n        return new Promise((resolve, reject) => {\n            const reader = new FileReader()\n            reader.onload = () => resolve(String(reader.result))\n            reader.onerror = () => reject(new Error('FileReader failed'))\n            reader.readAsDataURL(file)\n        })\n    }\n\n    let tableValue = $state('<p>Click the table button → pick dimensions → insert.</p>')\n\n    let slashValue = $state('<p>Type / to open the command menu…</p>')\n    let youtubeValue = $state(\n        '<p>Click the YouTube button or use / → YouTube to embed a video.</p>'\n    )\n    let dragHandleValue = $state(\n        '<h2 id=\"Drag-me\">Drag me!</h2><p>Hover any block to see the drag handle appear on the left. Drag to reorder.</p><ul><li>First item</li><li>Second item</li><li>Third item</li></ul>'\n    )\n\n    let mentionValue = $state('<p>Type @ to mention someone…</p>')\n    const teamMembers: MentionItem[] = [\n        { id: 'alice', label: 'Alice Nguyen' },\n        { id: 'bob', label: 'Bob Tran' },\n        { id: 'charlie', label: 'Charlie Le' },\n        { id: 'diana', label: 'Diana Pham' },\n        { id: 'evan', label: 'Evan Vo' }\n    ]\n    async function searchMembers(query: string): Promise<MentionItem[]> {\n        await new Promise((r) => setTimeout(r, 50))\n        const q = query.toLowerCase()\n        return teamMembers.filter((m) => m.label.toLowerCase().includes(q))\n    }\n\n    const articleState = $state({ title: '', body: '<p></p>' })\n    let articleSubmitted = $state<string | null>(null)\n    function validateArticle(values: object) {\n        const v = values as { title: string; body: string }\n        const errors: { name: string; message: string }[] = []\n        if (!v.title.trim()) errors.push({ name: 'title', message: 'Title is required' })\n        if (v.body === '<p></p>' || !v.body.trim())\n            errors.push({ name: 'body', message: 'Body cannot be empty' })\n        return errors\n    }\n    function submitArticle(e: { data: unknown }) {\n        articleSubmitted = JSON.stringify(e.data, null, 2)\n    }\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n\n    let serializedJson = $derived(JSON.stringify(jsonValue, null, 2))\n\n    const importExample = \"import { Editor } from 'svelora/editor'\"\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Editor</h1>\n        <p class=\"text-on-surface-variant\">\n            Rich-text WYSIWYG editor built on <strong>Tiptap v3</strong> + ProseMirror. Imported via\n            the sub-export\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >svelora/editor</code\n            >\n            — only adds Tiptap to your bundle when actually used.\n        </p>\n        <div class=\"flex flex-wrap gap-2 pt-1\">\n            <Badge variant=\"soft\" color=\"info\" label=\"Phase 1 (v1.8)\" />\n            <Badge variant=\"soft\" color=\"surface\" label=\"HTML or JSON output\" />\n            <Badge variant=\"soft\" color=\"surface\" label=\"Config-driven toolbar\" />\n        </div>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Minimal usage — default toolbar, HTML output, bindable\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">value</code>.\n        </p>\n        <Editor bind:value={basicHtml} placeholder=\"Write something…\" />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show raw HTML</summary\n            >\n            <pre\n                class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\">{basicHtml}</pre>\n        </details>\n    </section>\n\n    <!-- JSON output -->\n    <section class=\"space-y-3\">\n        <h2 id=\"JSON-output\" class=\"text-lg font-semibold\">\n<a href=\"#JSON-output\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        JSON output\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >output=\"json\"</code\n            >\n            to receive a structured Tiptap document — ideal for database storage and downstream transformations.\n        </p>\n        <Editor bind:value={jsonValue} output=\"json\" placeholder=\"JSON-backed editor…\" />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show serialized JSON</summary\n            >\n            <pre\n                class=\"mt-2 max-h-80 overflow-auto rounded bg-surface-container-highest p-3 text-xs\">{serializedJson}</pre>\n        </details>\n    </section>\n\n    <!-- Custom toolbar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-toolbar-config\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-toolbar-config\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom toolbar config\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass an array of action ids + <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">'|'</code\n            > separators to control exactly which buttons appear.\n        </p>\n        <Editor bind:value={customToolbarValue} toolbar={['bold', 'italic', '|', 'undo', 'redo']} />\n    </section>\n\n    <!-- Bubble menu only -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Bubble-menu-no-top-toolbar\" class=\"text-lg font-semibold\">\n<a href=\"#Bubble-menu-no-top-toolbar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Bubble menu (no top toolbar)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >toolbar={'{false}'}</code\n            >\n            +\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bubbleMenu</code\n            >\n            shows a floating menu only when text is selected — minimal chrome.\n        </p>\n        <Editor bind:value={bubbleValue} toolbar={false} bubbleMenu />\n    </section>\n\n    <!-- Character count + maxLength -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Character-limit\" class=\"text-lg font-semibold\">\n<a href=\"#Character-limit\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Character limit\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">maxLength</code\n            >\n            blocks input beyond the limit and shows a counter in the footer.\n        </p>\n        <Editor bind:value={limitedValue} maxLength={140} placeholder=\"Tweet-length post…\" />\n    </section>\n\n    <!-- Read-only / disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Read-only-amp-disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Read-only-amp-disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Read-only &amp; disabled\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div>\n                <p class=\"mb-2 text-sm font-medium\">readonly</p>\n                <Editor\n                    value=\"<h3>Read-only</h3><p>Content renders but typing is blocked.</p>\"\n                    readonly\n                />\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium\">disabled</p>\n                <Editor value=\"<h3>Disabled</h3><p>Faded + non-interactive.</p>\" disabled />\n            </div>\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4\">\n            {#each ['sm', 'md', 'lg'] as const as size (size)}\n                <div>\n                    <p class=\"mb-1 text-xs font-medium tracking-wide uppercase\">{size}</p>\n                    <Editor\n                        {size}\n                        value={`<p>Size: <strong>${size}</strong></p>`}\n                        toolbar={['bold', 'italic', '|', 'h1', 'h2']}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Colors (focus ring) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Focus-ring-colors\" class=\"text-lg font-semibold\">\n<a href=\"#Focus-ring-colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Focus ring colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Click into each editor to see the focus ring.</p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            {#each colors as color (color)}\n                <div>\n                    <p class=\"mb-1 text-xs font-medium capitalize\">{color}</p>\n                    <Editor\n                        {color}\n                        value={`<p>Focus me — <strong>${color}</strong> ring.</p>`}\n                        toolbar={['bold', 'italic', '|', 'undo', 'redo']}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Imperative API -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Imperative-API--bindapi\" class=\"text-lg font-semibold\">\n<a href=\"#Imperative-API--bindapi\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Imperative API — bind:api\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Drive the editor from outside via <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">bind:api</code\n            >. Useful for custom toolbars, form submission, or external controls.\n        </p>\n        <Editor bind:api bind:value={apiValue} placeholder=\"Drive me from outside…\" />\n        <div class=\"flex flex-wrap items-center gap-2\">\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:bold\"\n                label=\"Bold\"\n                onclick={() => api?.run('bold')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:italic\"\n                label=\"Italic\"\n                onclick={() => api?.run('italic')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:heading-1\"\n                label=\"H1\"\n                onclick={() => api?.run('h1')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:link\"\n                label=\"Link\"\n                onclick={() => api?.run('link')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:undo-2\"\n                label=\"Undo\"\n                disabled={!api?.state.can.undo}\n                onclick={() => api?.run('undo')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:redo-2\"\n                label=\"Redo\"\n                disabled={!api?.state.can.redo}\n                onclick={() => api?.run('redo')}\n            />\n            <Button\n                size=\"xs\"\n                color=\"error\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:trash-2\"\n                label=\"Clear\"\n                onclick={() => api?.clear()}\n            />\n            <Button\n                size=\"xs\"\n                color=\"primary\"\n                variant=\"solid\"\n                leadingIcon=\"lucide:plus\"\n                label=\"Insert sample\"\n                onclick={() => api?.insert(' — <em>inserted</em>')}\n            />\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2 pt-2 text-xs text-on-surface-variant\">\n            <span>State:</span>\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.active.bold ? 'primary' : 'surface'}\n                >bold {api?.state.active.bold ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.active.italic ? 'primary' : 'surface'}\n                >italic {api?.state.active.italic ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.isFocused ? 'success' : 'surface'}\n                >focused {api?.state.isFocused ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.isEmpty ? 'warning' : 'surface'}\n                >empty {api?.state.isEmpty ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color=\"info\">chars: {api?.state.charCount ?? 0}</Badge>\n            <Badge size=\"xs\" variant=\"soft\" color=\"info\">words: {api?.state.wordCount ?? 0}</Badge>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Phase 2: Markdown output -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Markdown-output-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Markdown-output-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Markdown output (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >output=\"markdown\"</code\n            >\n            to bind a Markdown string. Powered by the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >tiptap-markdown</code\n            > extension — paste markdown is also recognized.\n        </p>\n        <Editor\n            bind:value={markdownValue}\n            output=\"markdown\"\n            placeholder=\"Type or paste markdown…\"\n        />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show raw markdown</summary\n            >\n            <pre\n                class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\">{markdownValue}</pre>\n        </details>\n    </section>\n\n    <!-- Phase 2: Image upload -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Image-upload-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Image-upload-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Image upload (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">image</code>\n            toolbar action opens a file picker → calls\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onImageUpload(file)</code\n            >\n            → inserts the returned URL. Demo here converts to a data URL client-side.\n        </p>\n        <Editor\n            bind:value={imageValue}\n            image\n            onImageUpload={fakeUploadImage}\n            toolbar={[\n                'bold',\n                'italic',\n                '|',\n                'h1',\n                'h2',\n                '|',\n                'image',\n                '|',\n                'bulletList',\n                'orderedList',\n                '|',\n                'undo',\n                'redo'\n            ]}\n        />\n    </section>\n\n    <!-- Phase 2: Tables -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Tables-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Tables-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Tables (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Enable with <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >tables</code\n            >\n            and add the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">table</code> toolbar\n            action. Click → hover the grid → pick dimensions → click to insert.\n        </p>\n        <Editor\n            bind:value={tableValue}\n            tables\n            toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'table', '|', 'undo', 'redo']}\n        />\n    </section>\n\n    <!-- Phase 2: Mentions -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Mentions-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Mentions-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Mentions (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Provide <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onMention(query)</code\n            >\n            to enable @-style suggestions. Type\n            <kbd\n                class=\"rounded border border-outline-variant bg-surface-container-high px-1.5 py-0.5 text-xs\"\n                >@</kbd\n            >\n            inside the editor — a popup will open with matching items. Arrow keys to navigate, Enter to\n            select.\n        </p>\n        <Editor bind:value={mentionValue} onMention={searchMembers} placeholder=\"Try typing @al…\" />\n    </section>\n\n    <Separator />\n\n    <!-- Phase 3: Slash commands -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Slash-commands-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#Slash-commands-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Slash commands (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">slash</code\n            >\n            to enable. Inside the editor, type\n            <kbd\n                class=\"rounded border border-outline-variant bg-surface-container-high px-1.5 py-0.5 text-xs\"\n                >/</kbd\n            >\n            to open the command menu — fuzzy filter by typing, Arrow keys to navigate, Enter to run. Pass\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >slashCommands</code\n            > to customize.\n        </p>\n        <Editor bind:value={slashValue} slash image tables youtube />\n    </section>\n\n    <!-- Phase 3: YouTube embed -->\n    <section class=\"space-y-3\">\n        <h2 id=\"YouTube-embeds-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#YouTube-embeds-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        YouTube embeds (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">youtube</code>\n            enables the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">youtube</code> toolbar\n            action which prompts for a URL and inserts a responsive embed.\n        </p>\n        <Editor\n            bind:value={youtubeValue}\n            youtube\n            toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'youtube', '|', 'undo', 'redo']}\n        />\n    </section>\n\n    <!-- Phase 3: Drag handle -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Drag-handle-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#Drag-handle-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Drag handle (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >dragHandle</code\n            >\n            shows a draggable handle on the left of each block on hover. Drag to reorder paragraphs, headings,\n            lists, etc.\n        </p>\n        <Editor bind:value={dragHandleValue} dragHandle />\n    </section>\n\n    <Separator />\n\n    <!-- Phase 2: Form integration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Form-integration-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Form-integration-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Form integration (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Wrap in <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >&lt;FormField&gt;</code\n            > to get error highlighting, label association, and per-field validation events.\n        </p>\n        <Card class=\"space-y-3 p-4\">\n            <Form state={articleState} validate={validateArticle} onsubmit={submitArticle}>\n                <div class=\"space-y-4\">\n                    <FormField name=\"title\" label=\"Title\" required>\n                        <Input bind:value={articleState.title} placeholder=\"Article title…\" />\n                    </FormField>\n                    <FormField name=\"body\" label=\"Body\" required>\n                        <Editor\n                            bind:value={articleState.body}\n                            placeholder=\"Write your article…\"\n                            toolbar={[\n                                'bold',\n                                'italic',\n                                '|',\n                                'h2',\n                                'h3',\n                                '|',\n                                'bulletList',\n                                'orderedList',\n                                'blockquote',\n                                '|',\n                                'link',\n                                '|',\n                                'undo',\n                                'redo'\n                            ]}\n                        />\n                    </FormField>\n                    <div class=\"flex justify-end\">\n                        <Button type=\"submit\" color=\"primary\" size=\"sm\" label=\"Submit article\" />\n                    </div>\n                </div>\n            </Form>\n            {#if articleSubmitted}\n                <pre\n                    class=\"mt-2 max-h-60 overflow-auto rounded bg-surface-container-highest p-3 text-xs\">{articleSubmitted}</pre>\n            {/if}\n        </Card>\n    </section>\n\n    <Separator />\n\n    <!-- Real-world: comment box -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-world--Comment-box\" class=\"text-lg font-semibold\">\n<a href=\"#Real-world--Comment-box\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real-world — Comment box\n                    </a>\n</h2>\n        <Card class=\"space-y-3 p-4\">\n            <Editor\n                bind:value={limitedValue}\n                placeholder=\"Add a thoughtful comment…\"\n                maxLength={280}\n                toolbar={['bold', 'italic', 'code', '|', 'bulletList', 'orderedList', '|', 'link']}\n                bubbleMenu\n                stickyToolbar\n            />\n            <div class=\"flex items-center justify-end gap-2\">\n                <Button variant=\"ghost\" size=\"sm\" label=\"Cancel\" />\n                <Button color=\"primary\" size=\"sm\" leadingIcon=\"lucide:send\" label=\"Post comment\" />\n            </div>\n        </Card>\n    </section>\n\n    <!-- Note about sub-export -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Import-path\" class=\"text-lg font-semibold\">\n<a href=\"#Import-path\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Import path\n                    </a>\n</h2>\n        <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4 text-sm\">\n            <p class=\"mb-2 flex items-center gap-2 font-medium\">\n                <Icon name=\"lucide:package\" size=\"18\" class=\"text-primary\" />\n                Editor is opt-in via a separate entry point\n            </p>\n            <pre class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\"><code\n                    >{importExample}</code\n                ></pre>\n            <p class=\"mt-3 text-on-surface-variant\">\n                When your app doesn't reach this import path, Tiptap (~120 KB gzipped) is\n                tree-shaken out of the production bundle.\n            </p>\n        </div>\n    </section>\n</div>\n",
+    "editor": "<script lang=\"ts\">\n    import { Editor } from '$lib/components/Editor/index.js'\n    import type { EditorApi, EditorJSON, MentionItem } from '$lib/components/Editor/index.js'\n    import { Button, Badge, Separator, Card, Icon, Form, FormField, Input } from '$lib/index.js'\n\n    let basicHtml = $state('<p>Start writing here…</p>')\n\n    let jsonValue = $state<EditorJSON>({\n        type: 'doc',\n        content: [\n            {\n                type: 'paragraph',\n                content: [{ type: 'text', text: 'This document is stored as JSON.' }]\n            }\n        ]\n    })\n\n    let customToolbarValue = $state('<p>Only <strong>bold</strong> and <em>italic</em>.</p>')\n\n    let api = $state<EditorApi>()\n    let apiValue = $state('<p>Drive me from outside.</p>')\n\n    let limitedValue = $state('<p>Type here…</p>')\n\n    let bubbleValue = $state('<p>Select any text to see the floating menu.</p>')\n\n    // ----- Phase 2 demos -----\n\n    let markdownValue = $state('# Hello\\n\\nThis editor outputs **Markdown**.')\n\n    let imageValue = $state('<p>Click the image button to upload.</p>')\n    async function fakeUploadImage(file: File): Promise<string> {\n        // Demo: convert to data URL. Real apps would upload to a backend.\n        return new Promise((resolve, reject) => {\n            const reader = new FileReader()\n            reader.onload = () => resolve(String(reader.result))\n            reader.onerror = () => reject(new Error('FileReader failed'))\n            reader.readAsDataURL(file)\n        })\n    }\n\n    let tableValue = $state('<p>Click the table button → pick dimensions → insert.</p>')\n\n    let slashValue = $state('<p>Type / to open the command menu…</p>')\n    let youtubeValue = $state(\n        '<p>Click the YouTube button or use / → YouTube to embed a video.</p>'\n    )\n    let dragHandleValue = $state(\n        '<h2 id=\"Drag-me\">Drag me!</h2><p>Hover any block to see the drag handle appear on the left. Drag to reorder.</p><ul><li>First item</li><li>Second item</li><li>Third item</li></ul>'\n    )\n\n    let mentionValue = $state('<p>Type @ to mention someone…</p>')\n    const teamMembers: MentionItem[] = [\n        { id: 'alice', label: 'Alice Nguyen' },\n        { id: 'bob', label: 'Bob Tran' },\n        { id: 'charlie', label: 'Charlie Le' },\n        { id: 'diana', label: 'Diana Pham' },\n        { id: 'evan', label: 'Evan Vo' }\n    ]\n    async function searchMembers(query: string): Promise<MentionItem[]> {\n        await new Promise((r) => setTimeout(r, 50))\n        const q = query.toLowerCase()\n        return teamMembers.filter((m) => m.label.toLowerCase().includes(q))\n    }\n\n    const articleState = $state({ title: '', body: '<p></p>' })\n    let articleSubmitted = $state<string | null>(null)\n    function validateArticle(values: object) {\n        const v = values as { title: string; body: string }\n        const errors: { name: string; message: string }[] = []\n        if (!v.title.trim()) errors.push({ name: 'title', message: 'Title is required' })\n        if (v.body === '<p></p>' || !v.body.trim())\n            errors.push({ name: 'body', message: 'Body cannot be empty' })\n        return errors\n    }\n    function submitArticle(e: { data: unknown }) {\n        articleSubmitted = JSON.stringify(e.data, null, 2)\n    }\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n\n    let serializedJson = $derived(JSON.stringify(jsonValue, null, 2))\n\n    const importExample = \"import { Editor } from 'svelora/editor'\"\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Editor</h1>\n        <p class=\"text-on-surface-variant\">\n            Rich-text WYSIWYG editor built on <strong>Tiptap v3</strong> + ProseMirror. Imported via\n            the sub-export\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >svelora/editor</code\n            >\n            — only adds Tiptap to your bundle when actually used.\n        </p>\n        <div class=\"flex flex-wrap gap-2 pt-1\">\n            <Badge variant=\"soft\" color=\"info\" label=\"Phase 1 (v1.8)\" />\n            <Badge variant=\"soft\" color=\"surface\" label=\"HTML or JSON output\" />\n            <Badge variant=\"soft\" color=\"surface\" label=\"Config-driven toolbar\" />\n        </div>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Minimal usage — default toolbar, HTML output, bindable\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">value</code>.\n        </p>\n        <Editor bind:value={basicHtml} placeholder=\"Write something…\" />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show raw HTML</summary\n            >\n            <pre\n                class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\">{basicHtml}</pre>\n        </details>\n    </section>\n\n    <!-- JSON output -->\n    <section class=\"space-y-3\">\n        <h2 id=\"JSON-output\" class=\"text-lg font-semibold\">\n<a href=\"#JSON-output\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        JSON output\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >output=\"json\"</code\n            >\n            to receive a structured Tiptap document — ideal for database storage and downstream transformations.\n        </p>\n        <Editor bind:value={jsonValue} output=\"json\" placeholder=\"JSON-backed editor…\" />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show serialized JSON</summary\n            >\n            <pre\n                class=\"mt-2 max-h-80 overflow-auto rounded bg-surface-container-highest p-3 text-xs\">{serializedJson}</pre>\n        </details>\n    </section>\n\n    <!-- Custom toolbar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-toolbar-config\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-toolbar-config\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom toolbar config\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass an array of action ids + <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">'|'</code\n            > separators to control exactly which buttons appear.\n        </p>\n        <Editor bind:value={customToolbarValue} toolbar={['bold', 'italic', '|', 'undo', 'redo']} />\n    </section>\n\n    <!-- Bubble menu only -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Bubble-menu-no-top-toolbar\" class=\"text-lg font-semibold\">\n<a href=\"#Bubble-menu-no-top-toolbar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Bubble menu (no top toolbar)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >toolbar={'{false}'}</code\n            >\n            +\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bubbleMenu</code\n            >\n            shows a floating menu only when text is selected — minimal chrome.\n        </p>\n        <Editor bind:value={bubbleValue} toolbar={false} bubbleMenu />\n    </section>\n\n    <!-- Character count + maxLength -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Character-limit\" class=\"text-lg font-semibold\">\n<a href=\"#Character-limit\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Character limit\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">maxLength</code\n            >\n            blocks input beyond the limit and shows a counter in the footer.\n        </p>\n        <Editor bind:value={limitedValue} maxLength={140} placeholder=\"Tweet-length post…\" />\n    </section>\n\n    <!-- Read-only / disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Read-only-amp-disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Read-only-amp-disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Read-only &amp; disabled\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div>\n                <p class=\"mb-2 text-sm font-medium\">readonly</p>\n                <Editor\n                    value=\"<h3>Read-only</h3><p>Content renders but typing is blocked.</p>\"\n                    readonly\n                />\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium\">disabled</p>\n                <Editor value=\"<h3>Disabled</h3><p>Faded + non-interactive.</p>\" disabled />\n            </div>\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4\">\n            {#each ['sm', 'md', 'lg'] as const as size (size)}\n                <div>\n                    <p class=\"mb-1 text-xs font-medium tracking-wide uppercase\">{size}</p>\n                    <Editor\n                        {size}\n                        value={`<p>Size: <strong>${size}</strong></p>`}\n                        toolbar={['bold', 'italic', '|', 'h1', 'h2']}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Colors (focus ring) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Focus-ring-colors\" class=\"text-lg font-semibold\">\n<a href=\"#Focus-ring-colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Focus ring colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Click into each editor to see the focus ring.</p>\n        <div class=\"grid gap-3 md:grid-cols-2\">\n            {#each colors as color (color)}\n                <div>\n                    <p class=\"mb-1 text-xs font-medium capitalize\">{color}</p>\n                    <Editor\n                        {color}\n                        value={`<p>Focus me — <strong>${color}</strong> ring.</p>`}\n                        toolbar={['bold', 'italic', '|', 'undo', 'redo']}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Imperative API -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Imperative-API--bindapi\" class=\"text-lg font-semibold\">\n<a href=\"#Imperative-API--bindapi\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Imperative API — bind:api\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Drive the editor from outside via <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">bind:api</code\n            >. Useful for custom toolbars, form submission, or external controls.\n        </p>\n        <Editor bind:api bind:value={apiValue} placeholder=\"Drive me from outside…\" />\n        <div class=\"flex flex-wrap items-center gap-2\">\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:bold\"\n                label=\"Bold\"\n                onclick={() => api?.run('bold')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:italic\"\n                label=\"Italic\"\n                onclick={() => api?.run('italic')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:heading-1\"\n                label=\"H1\"\n                onclick={() => api?.run('h1')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:link\"\n                label=\"Link\"\n                onclick={() => api?.run('link')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:undo-2\"\n                label=\"Undo\"\n                disabled={!api?.state.can.undo}\n                onclick={() => api?.run('undo')}\n            />\n            <Button\n                size=\"xs\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:redo-2\"\n                label=\"Redo\"\n                disabled={!api?.state.can.redo}\n                onclick={() => api?.run('redo')}\n            />\n            <Button\n                size=\"xs\"\n                color=\"error\"\n                variant=\"outline\"\n                leadingIcon=\"lucide:trash-2\"\n                label=\"Clear\"\n                onclick={() => api?.clear()}\n            />\n            <Button\n                size=\"xs\"\n                color=\"primary\"\n                variant=\"solid\"\n                leadingIcon=\"lucide:plus\"\n                label=\"Insert sample\"\n                onclick={() => api?.insert(' — <em>inserted</em>')}\n            />\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2 pt-2 text-xs text-on-surface-variant\">\n            <span>State:</span>\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.active.bold ? 'primary' : 'surface'}\n                >bold {api?.state.active.bold ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.active.italic ? 'primary' : 'surface'}\n                >italic {api?.state.active.italic ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.isFocused ? 'success' : 'surface'}\n                >focused {api?.state.isFocused ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color={api?.state.isEmpty ? 'warning' : 'surface'}\n                >empty {api?.state.isEmpty ?? false}</Badge\n            >\n            <Badge size=\"xs\" variant=\"soft\" color=\"info\">chars: {api?.state.charCount ?? 0}</Badge>\n            <Badge size=\"xs\" variant=\"soft\" color=\"info\">words: {api?.state.wordCount ?? 0}</Badge>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Phase 2: Markdown output -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Markdown-output-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Markdown-output-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Markdown output (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >output=\"markdown\"</code\n            >\n            to bind a Markdown string. Powered by the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >tiptap-markdown</code\n            > extension — paste markdown is also recognized.\n        </p>\n        <Editor\n            bind:value={markdownValue}\n            output=\"markdown\"\n            placeholder=\"Type or paste markdown…\"\n        />\n        <details class=\"text-sm\">\n            <summary class=\"cursor-pointer text-on-surface-variant hover:text-on-surface\"\n                >Show raw markdown</summary\n            >\n            <pre\n                class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\">{markdownValue}</pre>\n        </details>\n    </section>\n\n    <!-- Phase 2: Image upload -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Image-upload-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Image-upload-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Image upload (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">image</code>\n            toolbar action opens a file picker → calls\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onImageUpload(file)</code\n            >\n            → inserts the returned URL. Demo here converts to a data URL client-side.\n        </p>\n        <Editor\n            bind:value={imageValue}\n            image\n            onImageUpload={fakeUploadImage}\n            toolbar={[\n                'bold',\n                'italic',\n                '|',\n                'h1',\n                'h2',\n                '|',\n                'image',\n                '|',\n                'bulletList',\n                'orderedList',\n                '|',\n                'undo',\n                'redo'\n            ]}\n        />\n    </section>\n\n    <!-- Phase 2: Tables -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Tables-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Tables-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Tables (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Enable with <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >tables</code\n            >\n            and add the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">table</code> toolbar\n            action. Click → hover the grid → pick dimensions → click to insert.\n        </p>\n        <Editor\n            bind:value={tableValue}\n            tables\n            toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'table', '|', 'undo', 'redo']}\n        />\n    </section>\n\n    <!-- Phase 2: Mentions -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Mentions-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Mentions-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Mentions (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Provide <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onMention(query)</code\n            >\n            to enable @-style suggestions. Type\n            <kbd\n                class=\"rounded border border-outline-variant bg-surface-container-high px-1.5 py-0.5 text-xs\"\n                >@</kbd\n            >\n            inside the editor — a popup will open with matching items. Arrow keys to navigate, Enter to\n            select.\n        </p>\n        <Editor bind:value={mentionValue} onMention={searchMembers} placeholder=\"Try typing @al…\" />\n    </section>\n\n    <Separator />\n\n    <!-- Phase 3: Slash commands -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Slash-commands-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#Slash-commands-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Slash commands (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">slash</code\n            >\n            to enable. Inside the editor, type\n            <kbd\n                class=\"rounded border border-outline-variant bg-surface-container-high px-1.5 py-0.5 text-xs\"\n                >/</kbd\n            >\n            to open the command menu — fuzzy filter by typing, Arrow keys to navigate, Enter to run. Pass\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >slashCommands</code\n            > to customize.\n        </p>\n        <Editor bind:value={slashValue} slash image tables youtube />\n    </section>\n\n    <!-- Phase 3: YouTube embed -->\n    <section class=\"space-y-3\">\n        <h2 id=\"YouTube-embeds-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#YouTube-embeds-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        YouTube embeds (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">youtube</code>\n            enables the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">youtube</code> toolbar\n            action which prompts for a URL and inserts a responsive embed.\n        </p>\n        <Editor\n            bind:value={youtubeValue}\n            youtube\n            toolbar={['bold', 'italic', '|', 'h2', 'h3', '|', 'youtube', '|', 'undo', 'redo']}\n        />\n    </section>\n\n    <!-- Phase 3: Drag handle -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Drag-handle-Phase-3\" class=\"text-lg font-semibold\">\n<a href=\"#Drag-handle-Phase-3\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Drag handle (Phase 3)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >dragHandle</code\n            >\n            shows a draggable handle on the left of each block on hover. Drag to reorder paragraphs, headings,\n            lists, etc.\n        </p>\n        <Editor bind:value={dragHandleValue} dragHandle />\n    </section>\n\n    <Separator />\n\n    <!-- Phase 2: Form integration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Form-integration-Phase-2\" class=\"text-lg font-semibold\">\n<a href=\"#Form-integration-Phase-2\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Form integration (Phase 2)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Wrap in <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >&lt;FormField&gt;</code\n            > to get error highlighting, label association, and per-field validation events.\n        </p>\n        <Card class=\"space-y-3 p-4\">\n            <Form state={articleState} validate={validateArticle} onsubmit={submitArticle}>\n                <div class=\"space-y-4\">\n                    <FormField name=\"title\" label=\"Title\" required>\n                        <Input bind:value={articleState.title} placeholder=\"Article title…\" />\n                    </FormField>\n                    <FormField name=\"body\" label=\"Body\" required>\n                        <Editor\n                            bind:value={articleState.body}\n                            placeholder=\"Write your article…\"\n                            toolbar={[\n                                'bold',\n                                'italic',\n                                '|',\n                                'h2',\n                                'h3',\n                                '|',\n                                'bulletList',\n                                'orderedList',\n                                'blockquote',\n                                '|',\n                                'link',\n                                '|',\n                                'undo',\n                                'redo'\n                            ]}\n                        />\n                    </FormField>\n                    <div class=\"flex justify-end\">\n                        <Button type=\"submit\" color=\"primary\" size=\"sm\" label=\"Submit article\" />\n                    </div>\n                </div>\n            </Form>\n            {#if articleSubmitted}\n                <pre\n                    class=\"mt-2 max-h-60 overflow-auto rounded bg-surface-container-highest p-3 text-xs\">{articleSubmitted}</pre>\n            {/if}\n        </Card>\n    </section>\n\n    <Separator />\n\n    <!-- Real-world: comment box -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-world--Comment-box\" class=\"text-lg font-semibold\">\n<a href=\"#Real-world--Comment-box\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real-world — Comment box\n                    </a>\n</h2>\n        <Card class=\"space-y-3 p-4\">\n            <Editor\n                bind:value={limitedValue}\n                placeholder=\"Add a thoughtful comment…\"\n                maxLength={280}\n                toolbar={['bold', 'italic', 'code', '|', 'bulletList', 'orderedList', '|', 'link']}\n                bubbleMenu\n                stickyToolbar\n            />\n            <div class=\"flex items-center justify-end gap-2\">\n                <Button variant=\"ghost\" size=\"sm\" label=\"Cancel\" />\n                <Button color=\"primary\" size=\"sm\" leadingIcon=\"lucide:send\" label=\"Post comment\" />\n            </div>\n        </Card>\n    </section>\n\n    <!-- Note about sub-export -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Import-path\" class=\"text-lg font-semibold\">\n<a href=\"#Import-path\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Import path\n                    </a>\n</h2>\n        <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4 text-sm\">\n            <p class=\"mb-2 flex items-center gap-2 font-medium\">\n                <Icon name=\"lucide:package\" size=\"18\" class=\"text-primary\" />\n                Editor is opt-in via a separate entry point\n            </p>\n            <pre class=\"mt-2 overflow-x-auto rounded bg-surface-container-highest p-3 text-xs\"><code\n                    >{importExample}</code\n                ></pre>\n            <p class=\"mt-3 text-on-surface-variant\">\n                When your app doesn't reach this import path, Tiptap (~120 KB gzipped) is\n                tree-shaken out of the production bundle.\n            </p>\n        </div>\n    </section>\n</div>\n",
     "input": "<script lang=\"ts\">\n    import { Input, FormField, FieldGroup, Separator } from '$lib/index.js'\n\n    const variants = ['outline', 'soft', 'subtle', 'ghost', 'none'] as const\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\n    let bindValue = $state('')\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">Input</h1>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A form input component with variants, colors, icons, and integration with FormField and\n            FieldGroup.\n        </p>\n        <div class=\"max-w-sm\">\n            <Input placeholder=\"Enter text...\" />\n        </div>\n    </section>\n\n    <!-- Two-way Binding -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Two-way-Binding\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Two-way-Binding\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Two-way Binding\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:value</code\n            > for reactive two-way data binding.\n        </p>\n        <div class=\"max-w-sm space-y-3\">\n            <Input\n                bind:value={bindValue}\n                leadingIcon=\"lucide:pencil\"\n                placeholder=\"Type something...\"\n            />\n            <p class=\"text-sm text-on-surface-variant\">\n                Value: <span class=\"font-mono text-on-surface\">{bindValue || '(empty)'}</span>\n            </p>\n            <p class=\"text-sm text-on-surface-variant\">\n                Length: <span class=\"font-mono text-on-surface\">{bindValue.length}</span>\n            </p>\n        </div>\n    </section>\n\n    <!-- Variants × Colors -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Variants-times-Colors\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Variants-times-Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants &times; Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >variant</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code> to control\n            appearance.\n        </p>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full border-collapse\">\n                <thead>\n                    <tr>\n                        <th class=\"px-3 py-2 text-left text-xs font-medium text-on-surface-variant\"\n                        ></th>\n                        {#each colors as color (color)}\n                            <th\n                                class=\"px-3 py-2 text-left text-xs font-medium text-on-surface-variant capitalize\"\n                                >{color}</th\n                            >\n                        {/each}\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each variants as variant (variant)}\n                        <tr>\n                            <td\n                                class=\"px-3 py-2 text-xs font-medium text-on-surface-variant capitalize\"\n                                >{variant}</td\n                            >\n                            {#each colors as color (color)}\n                                <td class=\"px-3 py-2\">\n                                    <Input {variant} {color} placeholder={color} />\n                                </td>\n                            {/each}\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Size -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Size\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code> to\n            control the dimensions and text size.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-4\">\n            {#each sizes as size (size)}\n                <div class=\"w-48\">\n                    <Input {size} placeholder=\"{size} size\" />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >leadingIcon</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >trailingIcon</code\n            > to add icons.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Input leadingIcon=\"lucide:search\" placeholder=\"Search...\" />\n            </div>\n            <div class=\"w-64\">\n                <Input trailingIcon=\"lucide:eye\" placeholder=\"Password\" type=\"password\" />\n            </div>\n            <div class=\"w-64\">\n                <Input\n                    leadingIcon=\"lucide:mail\"\n                    trailingIcon=\"lucide:check\"\n                    placeholder=\"Email\"\n                    type=\"email\"\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Icon (with trailing) -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Icon-with-trailing\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Icon-with-trailing\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icon (with trailing)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">icon</code>\n            with\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">trailing</code> to\n            position it.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Input icon=\"lucide:user\" placeholder=\"Leading icon\" />\n            </div>\n            <div class=\"w-64\">\n                <Input icon=\"lucide:user\" trailing placeholder=\"Trailing icon\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Avatar -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Avatar\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatar\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >avatar</code\n            > to display an avatar before the input.\n        </p>\n        <div class=\"w-64\">\n            <Input\n                avatar={{ src: 'https://i.pravatar.cc/120?img=1', alt: 'User' }}\n                placeholder=\"With avatar\"\n            />\n        </div>\n    </section>\n\n    <!-- Loading -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Loading\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Loading\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >loading</code\n            > to show a loading spinner.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Input loading placeholder=\"Loading (leading)...\" />\n            </div>\n            <div class=\"w-64\">\n                <Input loading trailing placeholder=\"Loading (trailing)...\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >disabled</code\n            > to prevent interaction.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Input disabled placeholder=\"Disabled\" />\n            </div>\n            <div class=\"w-64\">\n                <Input disabled value=\"Disabled with value\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Highlight -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Highlight\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Highlight\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Highlight\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >highlight</code\n            > to emphasize the ring color like a focus state.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            {#each colors as color (color)}\n                <div class=\"w-48\">\n                    <Input highlight {color} placeholder={color} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- FormField Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FormField-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FormField-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FormField Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FormField</code\n            >, the Input automatically inherits size, error state, and accessibility attributes.\n        </p>\n        <div class=\"max-w-sm space-y-4\">\n            <FormField\n                label=\"Email\"\n                description=\"We'll use this to send you notifications.\"\n                required\n            >\n                <Input leadingIcon=\"lucide:mail\" placeholder=\"Enter your email\" type=\"email\" />\n            </FormField>\n\n            <FormField\n                label=\"Password\"\n                help=\"Must be at least 8 characters.\"\n                error=\"Password is too short.\"\n            >\n                <Input\n                    trailingIcon=\"lucide:eye\"\n                    placeholder=\"Enter your password\"\n                    type=\"password\"\n                />\n            </FormField>\n        </div>\n    </section>\n\n    <!-- FieldGroup Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FieldGroup-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FieldGroup-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FieldGroup Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FieldGroup</code\n            >, inputs are visually connected.\n        </p>\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">horizontal (default)</p>\n                <FieldGroup orientation=\"horizontal\">\n                    <Input placeholder=\"First name\" />\n                    <Input placeholder=\"Last name\" />\n                    <Input placeholder=\"Email\" />\n                </FieldGroup>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">vertical</p>\n                <div class=\"max-w-sm\">\n                    <FieldGroup orientation=\"vertical\">\n                        <Input placeholder=\"Street address\" />\n                        <Input placeholder=\"City\" />\n                        <Input placeholder=\"Zip code\" />\n                    </FieldGroup>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Search bar</p>\n                <div class=\"max-w-md\">\n                    <FieldGroup>\n                        <Input leadingIcon=\"lucide:search\" placeholder=\"Search products...\" />\n                        <Input placeholder=\"Location\" leadingIcon=\"lucide:map-pin\" />\n                    </FieldGroup>\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Login form</p>\n                <div\n                    class=\"max-w-sm space-y-4 rounded-lg border border-outline-variant bg-surface-container-low p-4\"\n                >\n                    <FormField label=\"Email\" required>\n                        <Input\n                            leadingIcon=\"lucide:mail\"\n                            placeholder=\"john@example.com\"\n                            type=\"email\"\n                        />\n                    </FormField>\n\n                    <FormField label=\"Password\" required help=\"Must be at least 8 characters.\">\n                        <Input\n                            leadingIcon=\"lucide:lock\"\n                            placeholder=\"Enter your password\"\n                            type=\"password\"\n                        />\n                    </FormField>\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Validation states</p>\n                <div\n                    class=\"max-w-sm space-y-4 rounded-lg border border-outline-variant bg-surface-container-low p-4\"\n                >\n                    <FormField label=\"Username\" error=\"Username is already taken.\">\n                        <Input value=\"admin\" color=\"error\" leadingIcon=\"lucide:user\" />\n                    </FormField>\n\n                    <FormField label=\"Email\" help=\"Looks good!\">\n                        <Input\n                            type=\"email\"\n                            value=\"valid@example.com\"\n                            color=\"success\"\n                            leadingIcon=\"lucide:mail\"\n                        />\n                    </FormField>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "radio-group": "<script lang=\"ts\">\n    import { RadioGroup, FormField, Separator } from '$lib/index.js'\n    import type { RadioGroupItem } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\n    const fruits: RadioGroupItem[] = [\n        { value: 'apple', label: 'Apple' },\n        { value: 'banana', label: 'Banana' },\n        { value: 'orange', label: 'Orange' }\n    ]\n\n    const plans: RadioGroupItem[] = [\n        { value: 'free', label: 'Free', description: 'Basic features for personal use.' },\n        { value: 'pro', label: 'Pro', description: 'Advanced features for professionals.' },\n        { value: 'enterprise', label: 'Enterprise', description: 'Full suite for organizations.' }\n    ]\n\n    const partialDisabled: RadioGroupItem[] = [\n        { value: 'available', label: 'Available' },\n        { value: 'unavailable', label: 'Unavailable', disabled: true },\n        { value: 'limited', label: 'Limited' }\n    ]\n\n    let bindValue = $state('')\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">RadioGroup</h1>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A radio group component for single selection from a list of options.\n        </p>\n        <RadioGroup items={fruits} />\n    </section>\n\n    <!-- Two-way Binding -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Two-way-Binding\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Two-way-Binding\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Two-way Binding\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:value</code\n            > for reactive two-way data binding.\n        </p>\n        <div class=\"flex flex-wrap items-start gap-8\">\n            <RadioGroup items={fruits} bind:value={bindValue} />\n            <p class=\"text-sm text-on-surface-variant\">\n                Selected: <span class=\"font-mono text-on-surface\">{bindValue || '(none)'}</span>\n            </p>\n        </div>\n    </section>\n\n    <!-- Label & Description -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Label-amp-Description\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Label-amp-Description\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Label &amp; Description\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each item supports <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">label</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >description</code\n            > properties.\n        </p>\n        <RadioGroup items={plans} />\n    </section>\n\n    <!-- Legend -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Legend\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Legend\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Legend\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >legend</code\n            >\n            to add a title above the radio group. Use\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">required</code> to\n            show an asterisk.\n        </p>\n        <div class=\"flex flex-wrap gap-8\">\n            <RadioGroup items={fruits} legend=\"Select a fruit\" />\n            <RadioGroup items={fruits} legend=\"Select a fruit\" required />\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code\n            > to control the checked indicator color.\n        </p>\n        <div class=\"flex flex-wrap gap-8\">\n            {#each colors as color (color)}\n                <RadioGroup {color} value=\"a\" items={[{ value: 'a', label: color }]} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code> to\n            control the dimensions.\n        </p>\n        <div class=\"flex flex-wrap items-start gap-8\">\n            {#each sizes as size (size)}\n                <RadioGroup {size} value=\"a\" items={[{ value: 'a', label: size }]} />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >orientation</code\n            > to control layout direction.\n        </p>\n        <div class=\"flex flex-col gap-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Vertical (default)</p>\n                <RadioGroup items={fruits} orientation=\"vertical\" />\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Horizontal</p>\n                <RadioGroup items={fruits} orientation=\"horizontal\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Variant -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Variant\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >variant=\"card\"</code\n            > to display each item as a bordered card. The border highlights when selected.\n        </p>\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"max-w-sm\">\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Vertical cards</p>\n                <RadioGroup variant=\"card\" value=\"pro\" items={plans} color=\"primary\" />\n            </div>\n            <div class=\"max-w-sm\">\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Horizontal cards</p>\n                <RadioGroup\n                    variant=\"card\"\n                    value=\"apple\"\n                    items={fruits}\n                    orientation=\"horizontal\"\n                    color=\"success\"\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Indicator -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Indicator-Position\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Indicator-Position\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Indicator Position\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >indicator</code\n            >\n            to control where the radio appears:\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">start</code>,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">end</code>, or\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">hidden</code>.\n        </p>\n        <div class=\"flex flex-wrap gap-8\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Start (default)</p>\n                <RadioGroup indicator=\"start\" items={fruits} value=\"apple\" />\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">End</p>\n                <RadioGroup indicator=\"end\" items={fruits} value=\"banana\" />\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Hidden</p>\n                <RadioGroup indicator=\"hidden\" items={fruits} value=\"orange\" />\n            </div>\n        </div>\n        <div class=\"max-w-sm\">\n            <p class=\"mb-2 text-xs text-on-surface-variant\">Card + end indicator</p>\n            <RadioGroup variant=\"card\" indicator=\"end\" items={plans} value=\"pro\" color=\"primary\" />\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >disabled</code\n            >\n            to disable the entire group or individual items via\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >item.disabled</code\n            >.\n        </p>\n        <div class=\"flex flex-wrap gap-8\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Entire group disabled</p>\n                <RadioGroup items={fruits} disabled value=\"apple\" />\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Individual item disabled</p>\n                <RadioGroup items={partialDisabled} />\n            </div>\n        </div>\n    </section>\n\n    <!-- Loading -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Loading\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Loading\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >loading</code\n            > to show a spinner and disable interaction.\n        </p>\n        <RadioGroup items={fruits} loading value=\"apple\" />\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >legendSlot</code\n            >,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">labelSlot</code\n            >, and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >descriptionSlot</code\n            > for fully custom content.\n        </p>\n        <div class=\"flex flex-col gap-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom legend</p>\n                <RadioGroup items={fruits} value=\"apple\">\n                    {#snippet legendSlot()}\n                        <span\n                            class=\"mb-2 flex items-center gap-1.5 text-sm font-semibold text-on-surface\"\n                        >\n                            <span class=\"inline-block size-2 rounded-full bg-primary\"></span>\n                            Pick your favorite\n                        </span>\n                    {/snippet}\n                </RadioGroup>\n            </div>\n\n            <div class=\"max-w-sm\">\n                <p class=\"mb-2 text-xs text-on-surface-variant\">\n                    Custom label + description per item\n                </p>\n                <RadioGroup items={plans} value=\"pro\">\n                    {#snippet labelSlot({ item })}\n                        <span class=\"flex items-center gap-2 text-sm font-medium text-on-surface\">\n                            {item.label}\n                            {#if item.value === 'pro'}\n                                <span\n                                    class=\"rounded bg-primary-container px-1.5 py-0.5 text-[10px] font-bold text-on-primary-container\"\n                                    >POPULAR</span\n                                >\n                            {/if}\n                        </span>\n                    {/snippet}\n                    {#snippet descriptionSlot({ item })}\n                        <span class=\"text-xs text-on-surface-variant\">{item.description}</span>\n                    {/snippet}\n                </RadioGroup>\n            </div>\n        </div>\n    </section>\n\n    <!-- FormField Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FormField-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FormField-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FormField Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FormField</code\n            >, the RadioGroup automatically inherits size and error state.\n        </p>\n        <div class=\"max-w-sm space-y-4\">\n            <FormField label=\"Subscription Plan\" description=\"Choose the plan that works for you.\">\n                <RadioGroup items={plans} />\n            </FormField>\n            <FormField label=\"Preferred Fruit\" error=\"Please select a fruit.\">\n                <RadioGroup items={fruits} />\n            </FormField>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">\n                    Pricing plan selection (card + end)\n                </p>\n                <div class=\"max-w-sm space-y-2\">\n                    <RadioGroup\n                        variant=\"card\"\n                        indicator=\"end\"\n                        value=\"pro\"\n                        color=\"primary\"\n                        items={[\n                            {\n                                value: 'starter',\n                                label: 'Starter',\n                                description: '$9/mo · Up to 3 projects'\n                            },\n                            {\n                                value: 'pro',\n                                label: 'Pro',\n                                description: '$29/mo · Unlimited projects'\n                            },\n                            {\n                                value: 'enterprise',\n                                label: 'Enterprise',\n                                description: 'Custom pricing · SSO + security'\n                            }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">\n                    Notification frequency (horizontal + card)\n                </p>\n                <RadioGroup\n                    variant=\"card\"\n                    orientation=\"horizontal\"\n                    value=\"daily\"\n                    color=\"secondary\"\n                    items={[\n                        { value: 'realtime', label: 'Real-time' },\n                        { value: 'daily', label: 'Daily' },\n                        { value: 'weekly', label: 'Weekly' },\n                        { value: 'never', label: 'Never' }\n                    ]}\n                />\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">\n                    Theme selector (hidden indicator + custom label)\n                </p>\n                <RadioGroup\n                    indicator=\"hidden\"\n                    orientation=\"horizontal\"\n                    value=\"system\"\n                    items={[\n                        { value: 'light', label: 'Light' },\n                        { value: 'dark', label: 'Dark' },\n                        { value: 'system', label: 'System' }\n                    ]}\n                >\n                    {#snippet labelSlot({ item })}\n                        <span class=\"text-sm text-on-surface\">{item.label}</span>\n                    {/snippet}\n                </RadioGroup>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "select": "<script lang=\"ts\">\n    import { Select, FormField, FieldGroup, Separator } from '$lib/index.js'\n    import type { SelectItem, SelectItemType } from '$lib/index.js'\n\n    const variants = ['outline', 'soft', 'subtle', 'ghost', 'none'] as const\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\n    let bindValue = $state('')\n    let multipleValue = $state<string[]>(['apple', 'banana'])\n\n    const fruits: SelectItem[] = [\n        { value: 'apple', label: 'Apple' },\n        { value: 'banana', label: 'Banana' },\n        { value: 'cherry', label: 'Cherry' },\n        { value: 'grape', label: 'Grape' },\n        { value: 'orange', label: 'Orange' }\n    ]\n\n    const iconItems: SelectItem[] = [\n        { value: 'home', label: 'Home', icon: 'lucide:home' },\n        { value: 'settings', label: 'Settings', icon: 'lucide:settings' },\n        { value: 'profile', label: 'Profile', icon: 'lucide:user' },\n        { value: 'notifications', label: 'Notifications', icon: 'lucide:bell' }\n    ]\n\n    const avatarItems: SelectItem[] = [\n        {\n            value: 'alice',\n            label: 'Alice',\n            avatar: { src: 'https://i.pravatar.cc/120?img=1', alt: 'Alice' }\n        },\n        {\n            value: 'bob',\n            label: 'Bob',\n            avatar: { src: 'https://i.pravatar.cc/120?img=3', alt: 'Bob' }\n        },\n        {\n            value: 'charlie',\n            label: 'Charlie',\n            avatar: { src: 'https://i.pravatar.cc/120?img=5', alt: 'Charlie' }\n        }\n    ]\n\n    const descriptionItems: SelectItem[] = [\n        { value: 'standard', label: 'Standard', description: 'Free shipping, 5-7 business days' },\n        { value: 'express', label: 'Express', description: 'Paid shipping, 2-3 business days' },\n        {\n            value: 'overnight',\n            label: 'Overnight',\n            description: 'Premium shipping, next business day'\n        }\n    ]\n\n    const groupedItems: SelectItemType[] = [\n        { type: 'label', label: 'Fruits' },\n        { value: 'apple', label: 'Apple' },\n        { value: 'banana', label: 'Banana' },\n        { type: 'separator' },\n        { type: 'label', label: 'Vegetables' },\n        { value: 'carrot', label: 'Carrot' },\n        { value: 'broccoli', label: 'Broccoli' }\n    ]\n\n    const manyItems: SelectItem[] = Array.from({ length: 50 }, (_, i) => ({\n        value: `item-${i + 1}`,\n        label: `Item ${i + 1}`\n    }))\n\n    const disabledItems: SelectItem[] = [\n        { value: 'active', label: 'Active' },\n        { value: 'disabled', label: 'Disabled', disabled: true },\n        { value: 'pending', label: 'Pending' }\n    ]\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">Select</h1>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A dropdown select component with variants, colors, icons, avatars, and integration with\n            FormField and FieldGroup.\n        </p>\n        <div class=\"max-w-sm\">\n            <Select items={fruits} placeholder=\"Pick a fruit...\" />\n        </div>\n    </section>\n\n    <!-- Two-way Binding -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Two-way-Binding\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Two-way-Binding\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Two-way Binding\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:value</code\n            > for reactive two-way data binding.\n        </p>\n        <div class=\"max-w-sm space-y-3\">\n            <Select\n                bind:value={bindValue}\n                items={fruits}\n                placeholder=\"Select a fruit...\"\n                leadingIcon=\"lucide:apple\"\n            />\n            <p class=\"text-sm text-on-surface-variant\">\n                Value: <span class=\"font-mono text-on-surface\">{bindValue || '(empty)'}</span>\n            </p>\n        </div>\n    </section>\n\n    <!-- Variants × Colors -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Variants-times-Colors\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Variants-times-Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants &times; Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >variant</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code> to control\n            appearance.\n        </p>\n        <div class=\"overflow-x-auto\">\n            <table class=\"w-full border-collapse\">\n                <thead>\n                    <tr>\n                        <th class=\"px-3 py-2 text-left text-xs font-medium text-on-surface-variant\"\n                        ></th>\n                        {#each colors as color (color)}\n                            <th\n                                class=\"px-3 py-2 text-left text-xs font-medium text-on-surface-variant capitalize\"\n                                >{color}</th\n                            >\n                        {/each}\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each variants as variant (variant)}\n                        <tr>\n                            <td\n                                class=\"px-3 py-2 text-xs font-medium text-on-surface-variant capitalize\"\n                                >{variant}</td\n                            >\n                            {#each colors as color (color)}\n                                <td class=\"px-3 py-2\">\n                                    <Select {variant} {color} items={fruits} placeholder={color} />\n                                </td>\n                            {/each}\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n\n    <!-- Size -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Size\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code> to\n            control the dimensions and text size.\n        </p>\n        <div class=\"flex flex-wrap items-end gap-4\">\n            {#each sizes as size (size)}\n                <div class=\"w-48\">\n                    <Select {size} items={fruits} placeholder=\"{size} size\" />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >leadingIcon</code\n            > to add an icon before the value.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Select leadingIcon=\"lucide:search\" items={fruits} placeholder=\"Search...\" />\n            </div>\n            <div class=\"w-64\">\n                <Select leadingIcon=\"lucide:globe\" items={fruits} placeholder=\"Language\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Items with Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Items-with-Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Items-with-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Items with Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Each item can have its own icon.</p>\n        <div class=\"w-64\">\n            <Select items={iconItems} placeholder=\"Choose a page...\" />\n        </div>\n    </section>\n\n    <!-- Avatar -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Avatar\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatar\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >avatar</code\n            > on the trigger, or provide avatars on individual items.\n        </p>\n        <div class=\"w-64\">\n            <Select\n                avatar={{ src: 'https://i.pravatar.cc/120?img=1', alt: 'User' }}\n                items={avatarItems}\n                placeholder=\"Assign to...\"\n            />\n        </div>\n    </section>\n\n    <!-- Item Descriptions -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Item-Descriptions\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Item-Descriptions\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Item Descriptions\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Items can include descriptions shown below the label.\n        </p>\n        <div class=\"w-80\">\n            <Select items={descriptionItems} placeholder=\"Choose shipping...\" />\n        </div>\n    </section>\n\n    <!-- Grouped Items -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Grouped-Items\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Grouped-Items\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Grouped Items\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >type: 'label'</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >type: 'separator'</code\n            > to organize items into groups.\n        </p>\n        <div class=\"w-64\">\n            <Select items={groupedItems} placeholder=\"Pick an item...\" />\n        </div>\n    </section>\n\n    <!-- Disabled Items -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled-Items\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled-Items\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled Items\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Individual items can be disabled.</p>\n        <div class=\"w-64\">\n            <Select items={disabledItems} placeholder=\"Select status...\" />\n        </div>\n    </section>\n\n    <!-- Many Items (Scrollable) -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Many-Items-Scrollable\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Many-Items-Scrollable\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Many Items (Scrollable)\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            With 50 items, the dropdown automatically scrolls within its max height.\n        </p>\n        <div class=\"w-64\">\n            <Select items={manyItems} placeholder=\"Select from 50 items...\" />\n        </div>\n    </section>\n\n    <!-- Loading -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Loading\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Loading\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Loading\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >loading</code\n            > to show a loading spinner.\n        </p>\n        <div class=\"w-64\">\n            <Select loading items={fruits} placeholder=\"Loading...\" />\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >disabled</code\n            > to prevent interaction.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            <div class=\"w-64\">\n                <Select disabled items={fruits} placeholder=\"Disabled\" />\n            </div>\n            <div class=\"w-64\">\n                <Select disabled items={fruits} value=\"apple\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Highlight -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Highlight\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Highlight\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Highlight\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >highlight</code\n            > to emphasize the ring color.\n        </p>\n        <div class=\"flex flex-wrap gap-4\">\n            {#each colors as color (color)}\n                <div class=\"w-48\">\n                    <Select highlight {color} items={fruits} placeholder={color} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- FormField Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FormField-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FormField-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FormField Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FormField</code\n            >, the Select automatically inherits size, error state, and accessibility attributes.\n        </p>\n        <div class=\"max-w-sm space-y-4\">\n            <FormField label=\"Country\" description=\"Select your country of residence.\" required>\n                <Select\n                    leadingIcon=\"lucide:globe\"\n                    items={[\n                        { value: 'us', label: 'United States' },\n                        { value: 'uk', label: 'United Kingdom' },\n                        { value: 'ca', label: 'Canada' },\n                        { value: 'au', label: 'Australia' }\n                    ]}\n                    placeholder=\"Choose a country\"\n                />\n            </FormField>\n\n            <FormField label=\"Role\" error=\"Please select a role.\">\n                <Select\n                    items={[\n                        { value: 'admin', label: 'Admin' },\n                        { value: 'editor', label: 'Editor' },\n                        { value: 'viewer', label: 'Viewer' }\n                    ]}\n                    placeholder=\"Choose a role\"\n                />\n            </FormField>\n        </div>\n    </section>\n\n    <!-- FieldGroup Integration -->\n    <section class=\"space-y-4\">\n        <h2 id=\"FieldGroup-Integration\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#FieldGroup-Integration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        FieldGroup Integration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When used inside a <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">FieldGroup</code\n            >, selects are visually connected.\n        </p>\n        <FieldGroup orientation=\"horizontal\">\n            <Select\n                items={[\n                    { value: 'mr', label: 'Mr.' },\n                    { value: 'mrs', label: 'Mrs.' },\n                    { value: 'ms', label: 'Ms.' }\n                ]}\n                placeholder=\"Title\"\n            />\n            <Select items={fruits} placeholder=\"First\" />\n            <Select items={fruits} placeholder=\"Last\" />\n        </FieldGroup>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">User assignment</p>\n                <div\n                    class=\"max-w-sm space-y-4 rounded-lg border border-outline-variant bg-surface-container-low p-4\"\n                >\n                    <FormField label=\"Assignee\" required>\n                        <Select items={avatarItems} placeholder=\"Select a team member...\" />\n                    </FormField>\n\n                    <FormField label=\"Priority\">\n                        <Select\n                            items={[\n                                { value: 'low', label: 'Low', icon: 'lucide:arrow-down' },\n                                { value: 'medium', label: 'Medium', icon: 'lucide:minus' },\n                                { value: 'high', label: 'High', icon: 'lucide:arrow-up' },\n                                { value: 'urgent', label: 'Urgent', icon: 'lucide:alert-triangle' }\n                            ]}\n                            placeholder=\"Set priority...\"\n                        />\n                    </FormField>\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Shipping options</p>\n                <div class=\"max-w-md\">\n                    <Select items={descriptionItems} placeholder=\"Choose shipping method...\" />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Grouped categories</p>\n                <div class=\"max-w-sm\">\n                    <Select\n                        items={groupedItems}\n                        placeholder=\"Select category...\"\n                        leadingIcon=\"lucide:tag\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <section>\n        <h2 id=\"Multiple-selection\" class=\"mb-3 text-lg font-semibold\">\n<a href=\"#Multiple-selection\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Multiple selection\n                    </a>\n</h2>\n        <p class=\"mb-4 text-sm text-on-surface-variant\">\n            Set <code>multiple</code> to allow selecting more than one option. The\n            <code>value</code> becomes a <code>string[]</code> and selected labels are joined with\n            <code>separator</code> (default <code>, </code>).\n        </p>\n\n        <div class=\"grid gap-4 sm:grid-cols-2\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Default (comma-separated)</p>\n                <div class=\"max-w-sm\">\n                    <Select\n                        multiple\n                        bind:value={multipleValue}\n                        items={fruits}\n                        placeholder=\"Pick fruits...\"\n                    />\n                </div>\n                <p class=\"mt-2 text-xs text-on-surface-variant\">\n                    Selected: {JSON.stringify(multipleValue)}\n                </p>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom separator + leading icon</p>\n                <div class=\"max-w-sm\">\n                    <Select\n                        multiple\n                        items={iconItems}\n                        separator=\" • \"\n                        leadingIcon=\"lucide:list-checks\"\n                        placeholder=\"Pick sections...\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
@@ -158,11 +158,11 @@
     "chat": "<script lang=\"ts\">\n    import { ChatBubble, ChatMessage, ChatInput, Avatar, Button } from '$lib/index.js'\n    \n    let messageText = $state('')\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Chat</h1>\n        <p class=\"text-on-surface-variant\">\n            A comprehensive set of components to build chat interfaces, including bubbles, messages, and inputs.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Combine <code class=\"rounded bg-surface-container-highest px-1\">ChatBubble</code>, <code class=\"rounded bg-surface-container-highest px-1\">ChatMessage</code>, and <code class=\"rounded bg-surface-container-highest px-1\">ChatInput</code> to create conversational UI.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <div class=\"w-full max-w-md h-[400px] flex flex-col bg-surface border border-outline-variant rounded-lg overflow-hidden\">\n                <div class=\"flex-1 p-4 overflow-y-auto space-y-4\">\n                    <ChatBubble position=\"start\" name=\"Obi-Wan\" time=\"12:00\">\n                        {#snippet avatar()}\n                            <Avatar src=\"https://i.pravatar.cc/150?img=11\" alt=\"Obi\" />\n                        {/snippet}\n                        <ChatMessage>Hello there!</ChatMessage>\n                    </ChatBubble>\n                    \n                    <ChatBubble position=\"end\" name=\"Grievous\" time=\"12:01\">\n                        {#snippet avatar()}\n                            <Avatar src=\"https://i.pravatar.cc/150?img=12\" alt=\"Grievous\" />\n                        {/snippet}\n                        <ChatMessage variant=\"primary\">General Kenobi.</ChatMessage>\n                        <ChatMessage variant=\"primary\">You are a bold one.</ChatMessage>\n                    </ChatBubble>\n                </div>\n                \n                <div class=\"p-3 border-t border-outline-variant bg-surface-50 dark:bg-surface-900\">\n                    <ChatInput bind:value={messageText} placeholder=\"Type a message...\">\n                        {#snippet trailing()}\n                            <Button icon=\"lucide:send\" size=\"sm\" color=\"primary\" square disabled={!messageText} />\n                        {/snippet}\n                    </ChatInput>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Variants -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Message-Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Message-Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Message Variants\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1\">variant</code> prop on <code class=\"rounded bg-surface-container-highest px-1\">ChatMessage</code> to change its appearance.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex flex-col gap-2 max-w-md\">\n            <ChatBubble position=\"start\">\n                <ChatMessage variant=\"surface\">Surface (Default)</ChatMessage>\n                <ChatMessage variant=\"primary\">Primary</ChatMessage>\n                <ChatMessage variant=\"outline\">Outline</ChatMessage>\n            </ChatBubble>\n        </div>\n    </section>\n</div>\n",
     "marquee": "<script lang=\"ts\">\n    import { Marquee, Card } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Marquee</h1>\n        <p class=\"text-on-surface-variant\">\n            An infinite scrolling marquee component for displaying logos, text, or cards.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Horizontal-Marquee\" class=\"text-lg font-semibold\">\n<a href=\"#Horizontal-Marquee\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Horizontal Marquee\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A standard left-scrolling marquee that pauses on hover.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high py-8 overflow-hidden\">\n            <Marquee pauseOnHover={true} duration=\"20s\">\n                {#each Array(6) as _, i}\n                    <Card class=\"w-48 p-4 text-center font-semibold\">Brand {i + 1}</Card>\n                {/each}\n            </Marquee>\n        </div>\n    </section>\n\n    <!-- Vertical -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Vertical-Marquee\" class=\"text-lg font-semibold\">\n<a href=\"#Vertical-Marquee\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Vertical Marquee\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1\">direction=\"up\"</code> or <code class=\"rounded bg-surface-container-highest px-1\">\"down\"</code> for vertical scrolling.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high py-8 overflow-hidden flex justify-center\">\n            <div class=\"h-[300px] flex gap-4 overflow-hidden\">\n                <Marquee direction=\"up\" duration=\"15s\">\n                    {#each Array(5) as _, i}\n                        <Card class=\"w-48 p-4 text-center\">Feature A-{i + 1}</Card>\n                    {/each}\n                </Marquee>\n                <Marquee direction=\"down\" duration=\"15s\">\n                    {#each Array(5) as _, i}\n                        <Card class=\"w-48 p-4 text-center\">Feature B-{i + 1}</Card>\n                    {/each}\n                </Marquee>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "progress": "<script lang=\"ts\">\n    import { Progress, Button } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const\n    const animations = ['carousel', 'carousel-inverse', 'swing', 'elastic'] as const\n\n    let value = $state(65)\n    let stepValue = $state(2)\n    const steps = ['Cart', 'Shipping', 'Payment', 'Confirm']\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Progress</h1>\n        <p class=\"text-on-surface-variant\">\n            Visual indicator for task completion or loading status.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={25} />\n            <Progress value={50} />\n            <Progress value={75} />\n            <Progress value={100} />\n        </div>\n    </section>\n\n    <!-- Interactive -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Interactive\" class=\"text-lg font-semibold\">\n<a href=\"#Interactive\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Interactive\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress {value} status />\n            <div class=\"flex items-center gap-2\">\n                <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onclick={() => (value = Math.max(0, value - 10))}\n                >\n                    -10\n                </Button>\n                <input type=\"range\" min=\"0\" max=\"100\" bind:value class=\"flex-1\" />\n                <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onclick={() => (value = Math.min(100, value + 10))}\n                >\n                    +10\n                </Button>\n            </div>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <div class=\"space-y-3 rounded-lg bg-surface-container-high p-4\">\n            {#each colors as color (color)}\n                <div class=\"flex items-center gap-3\">\n                    <span class=\"w-20 text-sm text-on-surface-variant capitalize\">{color}</span>\n                    <Progress {color} value={70} class=\"flex-1\" />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-center gap-3\">\n                    <span class=\"w-12 text-sm text-on-surface-variant\">{size}</span>\n                    <Progress {size} value={60} class=\"flex-1\" />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- With Status -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Status\" class=\"text-lg font-semibold\">\n<a href=\"#With-Status\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Status\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Display percentage text alongside the progress bar.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={33} status />\n            <Progress value={66} status color=\"success\" />\n            <Progress value={100} status color=\"tertiary\" />\n        </div>\n    </section>\n\n    <!-- Indeterminate -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Indeterminate\" class=\"text-lg font-semibold\">\n<a href=\"#Indeterminate\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Indeterminate\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            When value is null, the progress shows an animated indeterminate state.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={null} />\n            <Progress value={null} color=\"success\" />\n            <Progress value={null} color=\"tertiary\" />\n        </div>\n    </section>\n\n    <!-- Animations -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Animations\" class=\"text-lg font-semibold\">\n<a href=\"#Animations\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Animations\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Different animation styles for the indeterminate state.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            {#each animations as animation (animation)}\n                <div class=\"flex items-center gap-3\">\n                    <span class=\"w-32 text-sm text-on-surface-variant\">{animation}</span>\n                    <Progress {animation} class=\"flex-1\" />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Vertical -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Vertical\" class=\"text-lg font-semibold\">\n<a href=\"#Vertical\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Vertical\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-8 rounded-lg bg-surface-container-high p-4\">\n            <div class=\"flex flex-col items-center gap-2\">\n                <div class=\"h-32\">\n                    <Progress value={75} orientation=\"vertical\" />\n                </div>\n                <span class=\"text-xs text-on-surface-variant\">75%</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <div class=\"h-32\">\n                    <Progress value={50} orientation=\"vertical\" color=\"success\" />\n                </div>\n                <span class=\"text-xs text-on-surface-variant\">50%</span>\n            </div>\n            <div class=\"flex flex-col items-center gap-2\">\n                <div class=\"h-32\">\n                    <Progress value={null} orientation=\"vertical\" color=\"tertiary\" />\n                </div>\n                <span class=\"text-xs text-on-surface-variant\">loading</span>\n            </div>\n            {#each sizes as size (size)}\n                <div class=\"flex flex-col items-center gap-2\">\n                    <div class=\"h-32\">\n                        <Progress value={60} orientation=\"vertical\" {size} />\n                    </div>\n                    <span class=\"text-xs text-on-surface-variant\">{size}</span>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Inverted -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Inverted\" class=\"text-lg font-semibold\">\n<a href=\"#Inverted\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Inverted\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Reverse the fill direction and status position.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"space-y-2\">\n                    <span class=\"text-sm text-on-surface-variant\">Normal</span>\n                    <Progress value={60} status />\n                </div>\n                <div class=\"space-y-2\">\n                    <span class=\"text-sm text-on-surface-variant\">Inverted</span>\n                    <Progress value={60} status inverted />\n                </div>\n            </div>\n            <div class=\"flex gap-8\">\n                <div class=\"flex flex-col items-center gap-2\">\n                    <div class=\"h-32\">\n                        <Progress value={60} orientation=\"vertical\" />\n                    </div>\n                    <span class=\"text-xs text-on-surface-variant\">Normal</span>\n                </div>\n                <div class=\"flex flex-col items-center gap-2\">\n                    <div class=\"h-32\">\n                        <Progress value={60} orientation=\"vertical\" inverted />\n                    </div>\n                    <span class=\"text-xs text-on-surface-variant\">Inverted</span>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Steps -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Steps\" class=\"text-lg font-semibold\">\n<a href=\"#Steps\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Steps\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass an array of strings as max to display labeled steps with overlay transitions.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={stepValue} max={steps} />\n            <div class=\"flex items-center justify-center gap-2\">\n                <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onclick={() => (stepValue = Math.max(0, stepValue - 1))}\n                    disabled={stepValue === 0}\n                >\n                    Previous\n                </Button>\n                <span class=\"px-4 text-sm text-on-surface-variant\">\n                    Step {stepValue + 1} of {steps.length}\n                </span>\n                <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onclick={() => (stepValue = Math.min(steps.length - 1, stepValue + 1))}\n                    disabled={stepValue === steps.length - 1}\n                >\n                    Next\n                </Button>\n            </div>\n\n            <Progress value={0} max={['Account', 'Profile', 'Review', 'Done']} color=\"tertiary\" />\n            <Progress value={3} max={['Account', 'Profile', 'Review', 'Done']} color=\"success\" />\n        </div>\n    </section>\n\n    <!-- Custom Status Slot -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Status-Slot\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Status-Slot\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Status Slot\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Customize the status display with a snippet.</p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={75} status>\n                {#snippet statusSlot({ percent })}\n                    <span class=\"font-medium text-primary\">{percent}% completed</span>\n                {/snippet}\n            </Progress>\n            <Progress value={40} status color=\"warning\">\n                {#snippet statusSlot({ percent })}\n                    <span class=\"text-warning\">Uploading... {percent}%</span>\n                {/snippet}\n            </Progress>\n        </div>\n    </section>\n\n    <!-- Custom Step Slot -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Step-Slot\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Step-Slot\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Step Slot\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Customize individual step labels with a snippet.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress value={1} max={['Draft', 'Review', 'Approved', 'Published']}>\n                {#snippet stepSlot({ step, index })}\n                    <span class=\"flex items-center gap-1\">\n                        <span\n                            class=\"inline-flex size-5 items-center justify-center rounded-full text-xs\n                            {index <= 1\n                                ? 'bg-primary text-on-primary'\n                                : 'bg-surface-container-highest text-on-surface-variant'}\"\n                        >\n                            {index + 1}\n                        </span>\n                        {step}\n                    </span>\n                {/snippet}\n            </Progress>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <Progress\n                value={70}\n                ui={{\n                    base: 'rounded-none',\n                    indicator: 'rounded-none bg-gradient-to-r from-primary to-tertiary'\n                }}\n            />\n            <Progress\n                value={50}\n                status\n                ui={{\n                    base: 'h-4 rounded-lg',\n                    indicator: 'rounded-lg',\n                    status: 'font-bold text-primary'\n                }}\n            />\n        </div>\n    </section>\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n        <div class=\"space-y-6 rounded-lg bg-surface-container-high p-4\">\n            <!-- File Upload -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">File Upload</p>\n                <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                    <div class=\"mb-2 flex items-center justify-between\">\n                        <span class=\"text-sm\">document.pdf</span>\n                        <span class=\"text-sm text-on-surface-variant\">2.4 MB / 3.2 MB</span>\n                    </div>\n                    <Progress value={75} color=\"primary\" size=\"sm\" />\n                </div>\n            </div>\n\n            <!-- Loading State -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Loading State</p>\n                <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                    <div class=\"mb-2 flex items-center gap-2\">\n                        <span class=\"text-sm\">Processing data...</span>\n                    </div>\n                    <Progress value={null} color=\"info\" size=\"xs\" />\n                </div>\n            </div>\n\n            <!-- Multi-step Form -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Checkout Flow</p>\n                <div class=\"rounded-lg border border-outline-variant bg-surface-container p-4\">\n                    <Progress\n                        value={2}\n                        max={['Cart', 'Shipping', 'Payment', 'Done']}\n                        color=\"success\"\n                    />\n                </div>\n            </div>\n\n            <!-- Skill Bars -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Skill Bars</p>\n                <div\n                    class=\"space-y-3 rounded-lg border border-outline-variant bg-surface-container p-4\"\n                >\n                    <div class=\"space-y-1\">\n                        <div class=\"flex justify-between text-sm\">\n                            <span>TypeScript</span>\n                            <span class=\"text-on-surface-variant\">90%</span>\n                        </div>\n                        <Progress value={90} color=\"primary\" size=\"sm\" />\n                    </div>\n                    <div class=\"space-y-1\">\n                        <div class=\"flex justify-between text-sm\">\n                            <span>Svelte</span>\n                            <span class=\"text-on-surface-variant\">85%</span>\n                        </div>\n                        <Progress value={85} color=\"tertiary\" size=\"sm\" />\n                    </div>\n                    <div class=\"space-y-1\">\n                        <div class=\"flex justify-between text-sm\">\n                            <span>Rust</span>\n                            <span class=\"text-on-surface-variant\">60%</span>\n                        </div>\n                        <Progress value={60} color=\"warning\" size=\"sm\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <!-- Colors x Sizes Matrix -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors-x-Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Colors-x-Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors x Sizes\n                    </a>\n</h2>\n        <div class=\"overflow-x-auto rounded-lg bg-surface-container-high p-4\">\n            <table class=\"w-full\">\n                <thead>\n                    <tr class=\"border-b border-outline-variant\">\n                        <th class=\"px-3 py-3 text-left text-sm font-medium text-on-surface-variant\"\n                            >Color</th\n                        >\n                        {#each sizes as size (size)}\n                            <th\n                                class=\"px-3 py-3 text-center text-sm font-medium text-on-surface-variant\"\n                                >{size}</th\n                            >\n                        {/each}\n                    </tr>\n                </thead>\n                <tbody>\n                    {#each colors as color (color)}\n                        <tr class=\"border-b border-outline-variant/50\">\n                            <td\n                                class=\"px-3 py-3 text-sm font-medium text-on-surface-variant capitalize\"\n                                >{color}</td\n                            >\n                            {#each sizes as size (size)}\n                                <td class=\"px-3 py-3\">\n                                    <Progress {color} {size} value={65} />\n                                </td>\n                            {/each}\n                        </tr>\n                    {/each}\n                </tbody>\n            </table>\n        </div>\n    </section>\n</div>\n",
-    "toast": "<script lang=\"ts\">\n    import { toast, Toaster } from '$lib/index.js'\n    import { Button, Icon } from '$lib/index.js'\n    import type { ToasterProps } from '$lib/Toast/toast.types.js'\n\n    type Variant = NonNullable<ToasterProps['variant']>\n    type Position = NonNullable<ToasterProps['position']>\n\n    const variants: Variant[] = ['outline', 'soft', 'subtle', 'solid', 'accent']\n    const positions: Position[] = [\n        'top-left',\n        'top-center',\n        'top-right',\n        'bottom-left',\n        'bottom-center',\n        'bottom-right'\n    ]\n\n    let activeVariant: Variant = $state('outline')\n    let activePosition: Position = $state('bottom-right')\n    let expandToasts = $state(false)\n    let showCloseButton = $state(true)\n\n    let counter = $state(0)\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Toast</h1>\n        <p class=\"text-on-surface-variant\">\n            Non-intrusive notification messages that appear temporarily. Powered by svelte-sonner\n            with Svelora semantic color theming.\n        </p>\n    </div>\n\n    <!-- Toaster Configuration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Toaster-Configuration\" class=\"text-lg font-semibold\">\n<a href=\"#Toaster-Configuration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Toaster Configuration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Adjust the Toaster props to see how they affect all toasts.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <!-- Variant -->\n            <div class=\"space-y-1.5\">\n                <p class=\"text-sm font-medium\">Variant</p>\n                <div class=\"flex flex-wrap gap-2\">\n                    {#each variants as v (v)}\n                        <Button\n                            variant={activeVariant === v ? 'solid' : 'outline'}\n                            size=\"xs\"\n                            onclick={() => (activeVariant = v)}\n                        >\n                            {v}\n                        </Button>\n                    {/each}\n                </div>\n            </div>\n\n            <!-- Position -->\n            <div class=\"space-y-1.5\">\n                <p class=\"text-sm font-medium\">Position</p>\n                <div class=\"flex flex-wrap gap-2\">\n                    {#each positions as p (p)}\n                        <Button\n                            variant={activePosition === p ? 'solid' : 'outline'}\n                            size=\"xs\"\n                            onclick={() => (activePosition = p)}\n                        >\n                            {p}\n                        </Button>\n                    {/each}\n                </div>\n            </div>\n\n            <!-- Toggles -->\n            <div class=\"flex flex-wrap gap-4\">\n                <label class=\"flex items-center gap-2 text-sm\">\n                    <input type=\"checkbox\" bind:checked={expandToasts} class=\"accent-primary\" />\n                    Expand\n                </label>\n                <label class=\"flex items-center gap-2 text-sm\">\n                    <input type=\"checkbox\" bind:checked={showCloseButton} class=\"accent-primary\" />\n                    Close Button\n                </label>\n            </div>\n        </div>\n    </section>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button variant=\"outline\" onclick={() => toast('This is a default toast')}>\n                Default\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Title only toast — no description needed')}\n            >\n                Title Only\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Event has been created', {\n                        description: 'Monday, January 3rd at 6:00 PM'\n                    })}\n            >\n                With Description\n            </Button>\n        </div>\n    </section>\n\n    <!-- Types -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Types\" class=\"text-lg font-semibold\">\n<a href=\"#Types\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Types\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each type automatically maps to a semantic color from the theme.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() => toast.success('Operation completed successfully')}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() => toast.error('Something went wrong')}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() => toast.warning('Please review before proceeding')}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() => toast.info('Here is some useful information')}\n            >\n                Info\n            </Button>\n            <Button variant=\"soft\" onclick={() => toast.loading('Loading data...')}>Loading</Button>\n        </div>\n    </section>\n\n    <!-- Types with Description -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Types-with-Description\" class=\"text-lg font-semibold\">\n<a href=\"#Types-with-Description\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Types with Description\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.success('Payment Successful', {\n                        description: 'Your payment of $49.99 has been processed.'\n                    })}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.error('Upload Failed', {\n                        description: 'The file exceeds the maximum size of 10MB.'\n                    })}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.warning('Storage Almost Full', {\n                        description: 'You have used 90% of your storage quota.'\n                    })}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.info('New Update Available', {\n                        description: 'Version 2.0 is ready to install.'\n                    })}\n            >\n                Info\n            </Button>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >color</code\n            >\n            option to apply any semantic color, beyond the 4 built-in types.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"primary\"\n                variant=\"soft\"\n                onclick={() => toast('Primary notification', { color: 'primary' })}\n            >\n                Primary\n            </Button>\n            <Button\n                color=\"secondary\"\n                variant=\"soft\"\n                onclick={() => toast('Secondary notification', { color: 'secondary' })}\n            >\n                Secondary\n            </Button>\n            <Button\n                color=\"tertiary\"\n                variant=\"soft\"\n                onclick={() => toast('Tertiary notification', { color: 'tertiary' })}\n            >\n                Tertiary\n            </Button>\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast('Success notification', {\n                        color: 'success',\n                        description: 'Same as toast.success() but via color option'\n                    })}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() => toast('Warning notification', { color: 'warning' })}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() => toast('Error notification', { color: 'error' })}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() => toast('Info notification', { color: 'info' })}\n            >\n                Info\n            </Button>\n        </div>\n    </section>\n\n    <!-- Custom Icons -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Icons\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Icons\n                    </a>\n</h2>\n\n        <!-- Global icons -->\n        <div class=\"space-y-1.5\">\n            <p class=\"text-sm font-medium\">Global Icons (via Toaster snippets)</p>\n            <p class=\"text-sm text-on-surface-variant\">\n                The Toaster below uses Iconify icons instead of sonner's default SVGs. All typed\n                toasts inherit them automatically.\n            </p>\n            <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n                <Button\n                    variant=\"outline\"\n                    color=\"success\"\n                    onclick={() =>\n                        toast.success('Deployed to production', {\n                            description: 'Uses global successIcon snippet.'\n                        })}\n                >\n                    Success (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"error\"\n                    onclick={() =>\n                        toast.error('Build failed', {\n                            description: 'Uses global errorIcon snippet.'\n                        })}\n                >\n                    Error (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"warning\"\n                    onclick={() =>\n                        toast.warning('Disk usage at 92%', {\n                            description: 'Uses global warningIcon snippet.'\n                        })}\n                >\n                    Warning (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"info\"\n                    onclick={() =>\n                        toast.info('Maintenance scheduled', {\n                            description: 'Uses global infoIcon snippet.'\n                        })}\n                >\n                    Info (global)\n                </Button>\n            </div>\n        </div>\n\n        <!-- Per-toast icon override -->\n        <div class=\"space-y-1.5\">\n            <p class=\"text-sm font-medium\">Per-toast Icon Override</p>\n            <p class=\"text-sm text-on-surface-variant\">\n                Pass an Iconify icon name string, or\n                <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">null</code>\n                to hide the icon.\n            </p>\n            <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast('Rocket launched!', {\n                            description: 'icon: \"lucide:rocket\"',\n                            icon: 'lucide:rocket'\n                        })}\n                >\n                    Rocket\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.success('Git push complete', {\n                            description: 'icon: \"lucide:git-branch\"',\n                            icon: 'lucide:git-branch'\n                        })}\n                >\n                    Git Branch\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.warning('Battery low', {\n                            description: 'icon: \"lucide:battery-low\"',\n                            icon: 'lucide:battery-low'\n                        })}\n                >\n                    Battery\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.error('Server offline', {\n                            description: 'icon: \"lucide:server-off\"',\n                            icon: 'lucide:server-off'\n                        })}\n                >\n                    Server\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.success('No icon toast', {\n                            description: 'icon: null',\n                            icon: null\n                        })}\n                >\n                    icon: null\n                </Button>\n            </div>\n        </div>\n    </section>\n\n    <!-- Avatar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Avatar\" class=\"text-lg font-semibold\">\n<a href=\"#Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatar\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >avatar</code\n            >\n            option to show an avatar in the icon slot.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('John commented on your post', {\n                        description: '\"Great article! Thanks for sharing.\"',\n                        avatar: {\n                            src: 'https://i.pravatar.cc/150?img=1',\n                            alt: 'John'\n                        }\n                    })}\n            >\n                With Photo\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.info('Jane sent you a message', {\n                        description: '\"Hey, are you free for a call?\"',\n                        avatar: {\n                            src: 'https://i.pravatar.cc/150?img=5',\n                            alt: 'Jane'\n                        }\n                    })}\n            >\n                Info + Avatar\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Alex invited you to a project', {\n                        description: 'Project: Svelora Design System',\n                        avatar: { alt: 'Alex' },\n                        action: {\n                            label: 'Accept',\n                            onClick: () => toast.success('Invitation accepted')\n                        }\n                    })}\n            >\n                Initials + Action\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.success('Team joined!', {\n                        description: 'You are now a member of the Design team.',\n                        avatar: { icon: 'lucide:users' }\n                    })}\n            >\n                Icon Fallback\n            </Button>\n        </div>\n    </section>\n\n    <!-- Action & Cancel -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Action--Cancel\" class=\"text-lg font-semibold\">\n<a href=\"#Action--Cancel\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Action & Cancel\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('File deleted', {\n                        action: {\n                            label: 'Undo',\n                            onClick: () => toast.success('File restored')\n                        }\n                    })}\n            >\n                Action Button\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Accept cookies?', {\n                        action: {\n                            label: 'Accept',\n                            onClick: () => toast.success('Cookies accepted')\n                        },\n                        cancel: {\n                            label: 'Decline',\n                            onClick: () => toast('Cookies declined')\n                        }\n                    })}\n            >\n                Action + Cancel\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"info\"\n                onclick={() =>\n                    toast.info('New version available', {\n                        action: {\n                            label: 'Update Now',\n                            onClick: () => toast.success('Updating...')\n                        },\n                        cancel: {\n                            label: 'Later',\n                            onClick: () => {}\n                        }\n                    })}\n            >\n                Info with Actions\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"error\"\n                onclick={() =>\n                    toast.error('Delete this item?', {\n                        description: 'This action cannot be undone.',\n                        action: {\n                            label: 'Delete',\n                            onClick: () => toast.success('Item deleted')\n                        },\n                        cancel: {\n                            label: 'Keep',\n                            onClick: () => {}\n                        }\n                    })}\n            >\n                Error with Confirm\n            </Button>\n        </div>\n    </section>\n\n    <!-- Promise -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Promise\" class=\"text-lg font-semibold\">\n<a href=\"#Promise\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Promise\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Automatically transitions between loading, success, and error states.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {\n                        loading: 'Saving changes...',\n                        success: 'Changes saved successfully!',\n                        error: 'Failed to save changes'\n                    })\n                }}\n            >\n                Save (Resolves)\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"error\"\n                onclick={() => {\n                    toast.promise(\n                        new Promise((_, reject) =>\n                            setTimeout(() => reject(new Error('timeout')), 2000)\n                        ),\n                        {\n                            loading: 'Connecting to server...',\n                            success: 'Connected!',\n                            error: 'Connection failed'\n                        }\n                    )\n                }}\n            >\n                Connect (Rejects)\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 3000)), {\n                        loading: 'Uploading file (0%)...',\n                        success: 'File uploaded!',\n                        error: 'Upload failed'\n                    })\n                }}\n            >\n                Upload File\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 4000)), {\n                        loading: 'Deploying to production...',\n                        success: 'Deployed! Live at https://example.com',\n                        error: 'Deploy failed — check CI logs'\n                    })\n                }}\n            >\n                Deploy\n            </Button>\n        </div>\n    </section>\n\n    <!-- Duration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Duration\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Duration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Duration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Control how long a toast stays visible before auto-dismiss.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button variant=\"outline\" onclick={() => toast('Gone in a flash', { duration: 1000 })}>\n                1 second\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Standard duration', { duration: 3000 })}\n            >\n                3 seconds\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Longer reading time', { duration: 8000 })}\n            >\n                8 seconds\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('This toast will stay until dismissed', { duration: Infinity })}\n            >\n                Persistent (Infinity)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Update Existing Toast -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Update-Existing-Toast\" class=\"text-lg font-semibold\">\n<a href=\"#Update-Existing-Toast\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Update Existing Toast\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Reuse the same ID to update an existing toast in-place.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.loading('Uploading...', { duration: Infinity })\n                    setTimeout(() => toast.success('Upload complete!', { id }), 2000)\n                }}\n            >\n                Loading → Success\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.loading('Validating...', { duration: Infinity })\n                    setTimeout(() => toast.error('Validation failed!', { id }), 2000)\n                }}\n            >\n                Loading → Error\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Step 1 of 3...', { duration: Infinity })\n                    setTimeout(() => toast('Step 2 of 3...', { id, duration: Infinity }), 1000)\n                    setTimeout(() => toast('Step 3 of 3...', { id, duration: Infinity }), 2000)\n                    setTimeout(() => toast.success('All steps complete!', { id }), 3000)\n                }}\n            >\n                Multi-step Progress\n            </Button>\n        </div>\n    </section>\n\n    <!-- Deduplicated -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Deduplicated-Toasts\" class=\"text-lg font-semibold\">\n<a href=\"#Deduplicated-Toasts\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Deduplicated Toasts\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass the same <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >id</code\n            >\n            to prevent duplicate toasts. Clicking multiple times updates the existing toast instead of\n            creating new ones.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('You have 3 new messages', {\n                        id: 'new-messages',\n                        description: 'Click again — no duplicate!'\n                    })}\n            >\n                Same ID (click many times)\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"warning\"\n                onclick={() =>\n                    toast.warning('Rate limit reached', {\n                        id: 'rate-limit',\n                        description: 'Try again in 30 seconds.'\n                    })}\n            >\n                Rate Limit (deduplicated)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Dismiss -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Programmatic-Dismiss\" class=\"text-lg font-semibold\">\n<a href=\"#Programmatic-Dismiss\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Programmatic Dismiss\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Processing...', { duration: Infinity })\n                    setTimeout(() => {\n                        toast.dismiss(id)\n                        toast.success('Done!')\n                    }, 2000)\n                }}\n            >\n                Auto Dismiss After 2s\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast('Toast 1', { duration: Infinity })\n                    toast.success('Toast 2', { duration: Infinity })\n                    toast.error('Toast 3', { duration: Infinity })\n                }}\n            >\n                Create 3 Toasts\n            </Button>\n            <Button variant=\"outline\" color=\"error\" onclick={() => toast.dismiss()}>\n                Dismiss All\n            </Button>\n        </div>\n    </section>\n\n    <!-- Stacking -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Stacking\" class=\"text-lg font-semibold\">\n<a href=\"#Stacking\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Stacking\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Toggle \"Expand\" in the config above, then fire multiple toasts to see stacked vs\n            expanded behavior.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    counter++\n                    toast.success(`Notification #${counter}`, {\n                        description: 'Hover or expand to see all stacked toasts.'\n                    })\n                }}\n            >\n                Add Toast (#{counter + 1})\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.info('Info toast', { description: 'First in stack' })\n                    setTimeout(\n                        () => toast.warning('Warning toast', { description: 'Second in stack' }),\n                        300\n                    )\n                    setTimeout(\n                        () => toast.error('Error toast', { description: 'Third in stack' }),\n                        600\n                    )\n                }}\n            >\n                Fire 3 Different Types\n            </Button>\n        </div>\n    </section>\n\n    <!-- Non-dismissible -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Non-dismissible\" class=\"text-lg font-semibold\">\n<a href=\"#Non-dismissible\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Non-dismissible\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A toast that cannot be swiped away or closed by the user.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.warning('Processing payment...', {\n                        description: 'Please do not close this page.',\n                        dismissible: false,\n                        duration: Infinity\n                    })\n                    setTimeout(() => {\n                        toast.success('Payment complete!', { id })\n                    }, 3000)\n                }}\n            >\n                Non-dismissible (3s)\n            </Button>\n        </div>\n    </section>\n\n    <!-- All Types at Once (visual test) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"All-Types-at-Once\" class=\"text-lg font-semibold\">\n<a href=\"#All-Types-at-Once\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        All Types at Once\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Fire every type simultaneously to visually compare styling.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast('Default toast', {\n                        description: 'Neutral surface styling',\n                        duration: 10000\n                    })\n                    toast.success('Success toast', {\n                        description: 'Operation successful',\n                        duration: 10000\n                    })\n                    toast.error('Error toast', {\n                        description: 'Something went wrong',\n                        duration: 10000\n                    })\n                    toast.warning('Warning toast', {\n                        description: 'Proceed with caution',\n                        duration: 10000\n                    })\n                    toast.info('Info toast', {\n                        description: 'Here is some context',\n                        duration: 10000\n                    })\n                    toast.loading('Loading toast', {\n                        description: 'Please wait...',\n                        duration: 10000\n                    })\n                }}\n            >\n                Fire All Types (10s)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.success('Profile Updated', {\n                        description: 'Your profile changes have been saved.'\n                    })}\n            >\n                Save Profile\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.error('Permission Denied', {\n                        description: 'You do not have access to this resource.',\n                        action: {\n                            label: 'Request Access',\n                            onClick: () => toast.info('Access request sent to admin')\n                        }\n                    })}\n            >\n                Access Denied\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.warning('Session Expiring', {\n                        description: 'Your session will expire in 5 minutes.',\n                        duration: 8000,\n                        action: {\n                            label: 'Extend',\n                            onClick: () => toast.success('Session extended by 30 minutes')\n                        }\n                    })}\n            >\n                Session Warning\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 3000)), {\n                        loading: 'Sending email...',\n                        success: 'Email sent to john@example.com',\n                        error: 'Failed to send email'\n                    })\n                }}\n            >\n                Send Email\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Item moved to trash', {\n                        action: {\n                            label: 'Undo',\n                            onClick: () => toast.success('Item restored')\n                        },\n                        cancel: {\n                            label: 'Delete permanently',\n                            onClick: () => {\n                                toast.dismiss(id)\n                                toast.error('Item permanently deleted')\n                            }\n                        }\n                    })\n                }}\n            >\n                Move to Trash\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.info('New comment on your post', {\n                        description: '\"Great article! Thanks for sharing.\" — Jane',\n                        action: {\n                            label: 'View',\n                            onClick: () => toast('Opening post...')\n                        }\n                    })\n                }}\n            >\n                New Comment\n            </Button>\n        </div>\n    </section>\n</div>\n\n<!-- Dynamic Toaster with configurable props -->\n<Toaster\n    variant={activeVariant}\n    position={activePosition}\n    expand={expandToasts}\n    closeButton={showCloseButton}\n>\n    {#snippet successIcon()}<Icon name=\"lucide:circle-check\" size=\"18\" />{/snippet}\n    {#snippet errorIcon()}<Icon name=\"lucide:circle-x\" size=\"18\" />{/snippet}\n    {#snippet warningIcon()}<Icon name=\"lucide:triangle-alert\" size=\"18\" />{/snippet}\n    {#snippet infoIcon()}<Icon name=\"lucide:info\" size=\"18\" />{/snippet}\n</Toaster>\n",
+    "toast": "<script lang=\"ts\">\n    import { toast, Toaster } from '$lib/index.js'\n    import { Button, Icon } from '$lib/index.js'\n    import type { ToasterProps } from '$lib/components/Toast/toast.types.js'\n\n    type Variant = NonNullable<ToasterProps['variant']>\n    type Position = NonNullable<ToasterProps['position']>\n\n    const variants: Variant[] = ['outline', 'soft', 'subtle', 'solid', 'accent']\n    const positions: Position[] = [\n        'top-left',\n        'top-center',\n        'top-right',\n        'bottom-left',\n        'bottom-center',\n        'bottom-right'\n    ]\n\n    let activeVariant: Variant = $state('outline')\n    let activePosition: Position = $state('bottom-right')\n    let expandToasts = $state(false)\n    let showCloseButton = $state(true)\n\n    let counter = $state(0)\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Toast</h1>\n        <p class=\"text-on-surface-variant\">\n            Non-intrusive notification messages that appear temporarily. Powered by svelte-sonner\n            with Svelora semantic color theming.\n        </p>\n    </div>\n\n    <!-- Toaster Configuration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Toaster-Configuration\" class=\"text-lg font-semibold\">\n<a href=\"#Toaster-Configuration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Toaster Configuration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Adjust the Toaster props to see how they affect all toasts.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-4\">\n            <!-- Variant -->\n            <div class=\"space-y-1.5\">\n                <p class=\"text-sm font-medium\">Variant</p>\n                <div class=\"flex flex-wrap gap-2\">\n                    {#each variants as v (v)}\n                        <Button\n                            variant={activeVariant === v ? 'solid' : 'outline'}\n                            size=\"xs\"\n                            onclick={() => (activeVariant = v)}\n                        >\n                            {v}\n                        </Button>\n                    {/each}\n                </div>\n            </div>\n\n            <!-- Position -->\n            <div class=\"space-y-1.5\">\n                <p class=\"text-sm font-medium\">Position</p>\n                <div class=\"flex flex-wrap gap-2\">\n                    {#each positions as p (p)}\n                        <Button\n                            variant={activePosition === p ? 'solid' : 'outline'}\n                            size=\"xs\"\n                            onclick={() => (activePosition = p)}\n                        >\n                            {p}\n                        </Button>\n                    {/each}\n                </div>\n            </div>\n\n            <!-- Toggles -->\n            <div class=\"flex flex-wrap gap-4\">\n                <label class=\"flex items-center gap-2 text-sm\">\n                    <input type=\"checkbox\" bind:checked={expandToasts} class=\"accent-primary\" />\n                    Expand\n                </label>\n                <label class=\"flex items-center gap-2 text-sm\">\n                    <input type=\"checkbox\" bind:checked={showCloseButton} class=\"accent-primary\" />\n                    Close Button\n                </label>\n            </div>\n        </div>\n    </section>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button variant=\"outline\" onclick={() => toast('This is a default toast')}>\n                Default\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Title only toast — no description needed')}\n            >\n                Title Only\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Event has been created', {\n                        description: 'Monday, January 3rd at 6:00 PM'\n                    })}\n            >\n                With Description\n            </Button>\n        </div>\n    </section>\n\n    <!-- Types -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Types\" class=\"text-lg font-semibold\">\n<a href=\"#Types\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Types\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each type automatically maps to a semantic color from the theme.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() => toast.success('Operation completed successfully')}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() => toast.error('Something went wrong')}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() => toast.warning('Please review before proceeding')}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() => toast.info('Here is some useful information')}\n            >\n                Info\n            </Button>\n            <Button variant=\"soft\" onclick={() => toast.loading('Loading data...')}>Loading</Button>\n        </div>\n    </section>\n\n    <!-- Types with Description -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Types-with-Description\" class=\"text-lg font-semibold\">\n<a href=\"#Types-with-Description\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Types with Description\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.success('Payment Successful', {\n                        description: 'Your payment of $49.99 has been processed.'\n                    })}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.error('Upload Failed', {\n                        description: 'The file exceeds the maximum size of 10MB.'\n                    })}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.warning('Storage Almost Full', {\n                        description: 'You have used 90% of your storage quota.'\n                    })}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast.info('New Update Available', {\n                        description: 'Version 2.0 is ready to install.'\n                    })}\n            >\n                Info\n            </Button>\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >color</code\n            >\n            option to apply any semantic color, beyond the 4 built-in types.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                color=\"primary\"\n                variant=\"soft\"\n                onclick={() => toast('Primary notification', { color: 'primary' })}\n            >\n                Primary\n            </Button>\n            <Button\n                color=\"secondary\"\n                variant=\"soft\"\n                onclick={() => toast('Secondary notification', { color: 'secondary' })}\n            >\n                Secondary\n            </Button>\n            <Button\n                color=\"tertiary\"\n                variant=\"soft\"\n                onclick={() => toast('Tertiary notification', { color: 'tertiary' })}\n            >\n                Tertiary\n            </Button>\n            <Button\n                color=\"success\"\n                variant=\"soft\"\n                onclick={() =>\n                    toast('Success notification', {\n                        color: 'success',\n                        description: 'Same as toast.success() but via color option'\n                    })}\n            >\n                Success\n            </Button>\n            <Button\n                color=\"warning\"\n                variant=\"soft\"\n                onclick={() => toast('Warning notification', { color: 'warning' })}\n            >\n                Warning\n            </Button>\n            <Button\n                color=\"error\"\n                variant=\"soft\"\n                onclick={() => toast('Error notification', { color: 'error' })}\n            >\n                Error\n            </Button>\n            <Button\n                color=\"info\"\n                variant=\"soft\"\n                onclick={() => toast('Info notification', { color: 'info' })}\n            >\n                Info\n            </Button>\n        </div>\n    </section>\n\n    <!-- Custom Icons -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Icons\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Icons\n                    </a>\n</h2>\n\n        <!-- Global icons -->\n        <div class=\"space-y-1.5\">\n            <p class=\"text-sm font-medium\">Global Icons (via Toaster snippets)</p>\n            <p class=\"text-sm text-on-surface-variant\">\n                The Toaster below uses Iconify icons instead of sonner's default SVGs. All typed\n                toasts inherit them automatically.\n            </p>\n            <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n                <Button\n                    variant=\"outline\"\n                    color=\"success\"\n                    onclick={() =>\n                        toast.success('Deployed to production', {\n                            description: 'Uses global successIcon snippet.'\n                        })}\n                >\n                    Success (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"error\"\n                    onclick={() =>\n                        toast.error('Build failed', {\n                            description: 'Uses global errorIcon snippet.'\n                        })}\n                >\n                    Error (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"warning\"\n                    onclick={() =>\n                        toast.warning('Disk usage at 92%', {\n                            description: 'Uses global warningIcon snippet.'\n                        })}\n                >\n                    Warning (global)\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    color=\"info\"\n                    onclick={() =>\n                        toast.info('Maintenance scheduled', {\n                            description: 'Uses global infoIcon snippet.'\n                        })}\n                >\n                    Info (global)\n                </Button>\n            </div>\n        </div>\n\n        <!-- Per-toast icon override -->\n        <div class=\"space-y-1.5\">\n            <p class=\"text-sm font-medium\">Per-toast Icon Override</p>\n            <p class=\"text-sm text-on-surface-variant\">\n                Pass an Iconify icon name string, or\n                <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">null</code>\n                to hide the icon.\n            </p>\n            <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast('Rocket launched!', {\n                            description: 'icon: \"lucide:rocket\"',\n                            icon: 'lucide:rocket'\n                        })}\n                >\n                    Rocket\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.success('Git push complete', {\n                            description: 'icon: \"lucide:git-branch\"',\n                            icon: 'lucide:git-branch'\n                        })}\n                >\n                    Git Branch\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.warning('Battery low', {\n                            description: 'icon: \"lucide:battery-low\"',\n                            icon: 'lucide:battery-low'\n                        })}\n                >\n                    Battery\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.error('Server offline', {\n                            description: 'icon: \"lucide:server-off\"',\n                            icon: 'lucide:server-off'\n                        })}\n                >\n                    Server\n                </Button>\n                <Button\n                    variant=\"outline\"\n                    onclick={() =>\n                        toast.success('No icon toast', {\n                            description: 'icon: null',\n                            icon: null\n                        })}\n                >\n                    icon: null\n                </Button>\n            </div>\n        </div>\n    </section>\n\n    <!-- Avatar -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Avatar\" class=\"text-lg font-semibold\">\n<a href=\"#Avatar\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Avatar\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >avatar</code\n            >\n            option to show an avatar in the icon slot.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('John commented on your post', {\n                        description: '\"Great article! Thanks for sharing.\"',\n                        avatar: {\n                            src: 'https://i.pravatar.cc/150?img=1',\n                            alt: 'John'\n                        }\n                    })}\n            >\n                With Photo\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.info('Jane sent you a message', {\n                        description: '\"Hey, are you free for a call?\"',\n                        avatar: {\n                            src: 'https://i.pravatar.cc/150?img=5',\n                            alt: 'Jane'\n                        }\n                    })}\n            >\n                Info + Avatar\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Alex invited you to a project', {\n                        description: 'Project: Svelora Design System',\n                        avatar: { alt: 'Alex' },\n                        action: {\n                            label: 'Accept',\n                            onClick: () => toast.success('Invitation accepted')\n                        }\n                    })}\n            >\n                Initials + Action\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.success('Team joined!', {\n                        description: 'You are now a member of the Design team.',\n                        avatar: { icon: 'lucide:users' }\n                    })}\n            >\n                Icon Fallback\n            </Button>\n        </div>\n    </section>\n\n    <!-- Action & Cancel -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Action--Cancel\" class=\"text-lg font-semibold\">\n<a href=\"#Action--Cancel\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Action & Cancel\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('File deleted', {\n                        action: {\n                            label: 'Undo',\n                            onClick: () => toast.success('File restored')\n                        }\n                    })}\n            >\n                Action Button\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('Accept cookies?', {\n                        action: {\n                            label: 'Accept',\n                            onClick: () => toast.success('Cookies accepted')\n                        },\n                        cancel: {\n                            label: 'Decline',\n                            onClick: () => toast('Cookies declined')\n                        }\n                    })}\n            >\n                Action + Cancel\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"info\"\n                onclick={() =>\n                    toast.info('New version available', {\n                        action: {\n                            label: 'Update Now',\n                            onClick: () => toast.success('Updating...')\n                        },\n                        cancel: {\n                            label: 'Later',\n                            onClick: () => {}\n                        }\n                    })}\n            >\n                Info with Actions\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"error\"\n                onclick={() =>\n                    toast.error('Delete this item?', {\n                        description: 'This action cannot be undone.',\n                        action: {\n                            label: 'Delete',\n                            onClick: () => toast.success('Item deleted')\n                        },\n                        cancel: {\n                            label: 'Keep',\n                            onClick: () => {}\n                        }\n                    })}\n            >\n                Error with Confirm\n            </Button>\n        </div>\n    </section>\n\n    <!-- Promise -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Promise\" class=\"text-lg font-semibold\">\n<a href=\"#Promise\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Promise\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Automatically transitions between loading, success, and error states.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {\n                        loading: 'Saving changes...',\n                        success: 'Changes saved successfully!',\n                        error: 'Failed to save changes'\n                    })\n                }}\n            >\n                Save (Resolves)\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"error\"\n                onclick={() => {\n                    toast.promise(\n                        new Promise((_, reject) =>\n                            setTimeout(() => reject(new Error('timeout')), 2000)\n                        ),\n                        {\n                            loading: 'Connecting to server...',\n                            success: 'Connected!',\n                            error: 'Connection failed'\n                        }\n                    )\n                }}\n            >\n                Connect (Rejects)\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 3000)), {\n                        loading: 'Uploading file (0%)...',\n                        success: 'File uploaded!',\n                        error: 'Upload failed'\n                    })\n                }}\n            >\n                Upload File\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 4000)), {\n                        loading: 'Deploying to production...',\n                        success: 'Deployed! Live at https://example.com',\n                        error: 'Deploy failed — check CI logs'\n                    })\n                }}\n            >\n                Deploy\n            </Button>\n        </div>\n    </section>\n\n    <!-- Duration -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Duration\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Duration\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Duration\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Control how long a toast stays visible before auto-dismiss.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button variant=\"outline\" onclick={() => toast('Gone in a flash', { duration: 1000 })}>\n                1 second\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Standard duration', { duration: 3000 })}\n            >\n                3 seconds\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => toast('Longer reading time', { duration: 8000 })}\n            >\n                8 seconds\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('This toast will stay until dismissed', { duration: Infinity })}\n            >\n                Persistent (Infinity)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Update Existing Toast -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Update-Existing-Toast\" class=\"text-lg font-semibold\">\n<a href=\"#Update-Existing-Toast\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Update Existing Toast\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Reuse the same ID to update an existing toast in-place.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.loading('Uploading...', { duration: Infinity })\n                    setTimeout(() => toast.success('Upload complete!', { id }), 2000)\n                }}\n            >\n                Loading → Success\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.loading('Validating...', { duration: Infinity })\n                    setTimeout(() => toast.error('Validation failed!', { id }), 2000)\n                }}\n            >\n                Loading → Error\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Step 1 of 3...', { duration: Infinity })\n                    setTimeout(() => toast('Step 2 of 3...', { id, duration: Infinity }), 1000)\n                    setTimeout(() => toast('Step 3 of 3...', { id, duration: Infinity }), 2000)\n                    setTimeout(() => toast.success('All steps complete!', { id }), 3000)\n                }}\n            >\n                Multi-step Progress\n            </Button>\n        </div>\n    </section>\n\n    <!-- Deduplicated -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Deduplicated-Toasts\" class=\"text-lg font-semibold\">\n<a href=\"#Deduplicated-Toasts\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Deduplicated Toasts\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass the same <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >id</code\n            >\n            to prevent duplicate toasts. Clicking multiple times updates the existing toast instead of\n            creating new ones.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast('You have 3 new messages', {\n                        id: 'new-messages',\n                        description: 'Click again — no duplicate!'\n                    })}\n            >\n                Same ID (click many times)\n            </Button>\n            <Button\n                variant=\"outline\"\n                color=\"warning\"\n                onclick={() =>\n                    toast.warning('Rate limit reached', {\n                        id: 'rate-limit',\n                        description: 'Try again in 30 seconds.'\n                    })}\n            >\n                Rate Limit (deduplicated)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Dismiss -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Programmatic-Dismiss\" class=\"text-lg font-semibold\">\n<a href=\"#Programmatic-Dismiss\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Programmatic Dismiss\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Processing...', { duration: Infinity })\n                    setTimeout(() => {\n                        toast.dismiss(id)\n                        toast.success('Done!')\n                    }, 2000)\n                }}\n            >\n                Auto Dismiss After 2s\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast('Toast 1', { duration: Infinity })\n                    toast.success('Toast 2', { duration: Infinity })\n                    toast.error('Toast 3', { duration: Infinity })\n                }}\n            >\n                Create 3 Toasts\n            </Button>\n            <Button variant=\"outline\" color=\"error\" onclick={() => toast.dismiss()}>\n                Dismiss All\n            </Button>\n        </div>\n    </section>\n\n    <!-- Stacking -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Stacking\" class=\"text-lg font-semibold\">\n<a href=\"#Stacking\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Stacking\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Toggle \"Expand\" in the config above, then fire multiple toasts to see stacked vs\n            expanded behavior.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    counter++\n                    toast.success(`Notification #${counter}`, {\n                        description: 'Hover or expand to see all stacked toasts.'\n                    })\n                }}\n            >\n                Add Toast (#{counter + 1})\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.info('Info toast', { description: 'First in stack' })\n                    setTimeout(\n                        () => toast.warning('Warning toast', { description: 'Second in stack' }),\n                        300\n                    )\n                    setTimeout(\n                        () => toast.error('Error toast', { description: 'Third in stack' }),\n                        600\n                    )\n                }}\n            >\n                Fire 3 Different Types\n            </Button>\n        </div>\n    </section>\n\n    <!-- Non-dismissible -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Non-dismissible\" class=\"text-lg font-semibold\">\n<a href=\"#Non-dismissible\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Non-dismissible\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            A toast that cannot be swiped away or closed by the user.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast.warning('Processing payment...', {\n                        description: 'Please do not close this page.',\n                        dismissible: false,\n                        duration: Infinity\n                    })\n                    setTimeout(() => {\n                        toast.success('Payment complete!', { id })\n                    }, 3000)\n                }}\n            >\n                Non-dismissible (3s)\n            </Button>\n        </div>\n    </section>\n\n    <!-- All Types at Once (visual test) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"All-Types-at-Once\" class=\"text-lg font-semibold\">\n<a href=\"#All-Types-at-Once\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        All Types at Once\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Fire every type simultaneously to visually compare styling.\n        </p>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast('Default toast', {\n                        description: 'Neutral surface styling',\n                        duration: 10000\n                    })\n                    toast.success('Success toast', {\n                        description: 'Operation successful',\n                        duration: 10000\n                    })\n                    toast.error('Error toast', {\n                        description: 'Something went wrong',\n                        duration: 10000\n                    })\n                    toast.warning('Warning toast', {\n                        description: 'Proceed with caution',\n                        duration: 10000\n                    })\n                    toast.info('Info toast', {\n                        description: 'Here is some context',\n                        duration: 10000\n                    })\n                    toast.loading('Loading toast', {\n                        description: 'Please wait...',\n                        duration: 10000\n                    })\n                }}\n            >\n                Fire All Types (10s)\n            </Button>\n        </div>\n    </section>\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n        <div class=\"flex flex-wrap gap-3 rounded-lg bg-surface-container-high p-4\">\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.success('Profile Updated', {\n                        description: 'Your profile changes have been saved.'\n                    })}\n            >\n                Save Profile\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.error('Permission Denied', {\n                        description: 'You do not have access to this resource.',\n                        action: {\n                            label: 'Request Access',\n                            onClick: () => toast.info('Access request sent to admin')\n                        }\n                    })}\n            >\n                Access Denied\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() =>\n                    toast.warning('Session Expiring', {\n                        description: 'Your session will expire in 5 minutes.',\n                        duration: 8000,\n                        action: {\n                            label: 'Extend',\n                            onClick: () => toast.success('Session extended by 30 minutes')\n                        }\n                    })}\n            >\n                Session Warning\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.promise(new Promise((resolve) => setTimeout(resolve, 3000)), {\n                        loading: 'Sending email...',\n                        success: 'Email sent to john@example.com',\n                        error: 'Failed to send email'\n                    })\n                }}\n            >\n                Send Email\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    const id = toast('Item moved to trash', {\n                        action: {\n                            label: 'Undo',\n                            onClick: () => toast.success('Item restored')\n                        },\n                        cancel: {\n                            label: 'Delete permanently',\n                            onClick: () => {\n                                toast.dismiss(id)\n                                toast.error('Item permanently deleted')\n                            }\n                        }\n                    })\n                }}\n            >\n                Move to Trash\n            </Button>\n            <Button\n                variant=\"outline\"\n                onclick={() => {\n                    toast.info('New comment on your post', {\n                        description: '\"Great article! Thanks for sharing.\" — Jane',\n                        action: {\n                            label: 'View',\n                            onClick: () => toast('Opening post...')\n                        }\n                    })\n                }}\n            >\n                New Comment\n            </Button>\n        </div>\n    </section>\n</div>\n\n<!-- Dynamic Toaster with configurable props -->\n<Toaster\n    variant={activeVariant}\n    position={activePosition}\n    expand={expandToasts}\n    closeButton={showCloseButton}\n>\n    {#snippet successIcon()}<Icon name=\"lucide:circle-check\" size=\"18\" />{/snippet}\n    {#snippet errorIcon()}<Icon name=\"lucide:circle-x\" size=\"18\" />{/snippet}\n    {#snippet warningIcon()}<Icon name=\"lucide:triangle-alert\" size=\"18\" />{/snippet}\n    {#snippet infoIcon()}<Icon name=\"lucide:info\" size=\"18\" />{/snippet}\n</Toaster>\n",
     "spotlight": "<script lang=\"ts\">\n    import { Spotlight } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Spotlight</h1>\n        <p class=\"text-on-surface-variant\">\n            A hover effect that follows your mouse cursor around the container.\n        </p>\n    </div>\n\n    <!-- Usage -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Usage\" class=\"text-lg font-semibold\">\n<a href=\"#Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Wrap your content in a <code class=\"rounded bg-surface-container-highest px-1\">Spotlight</code> component. Hover over the card to see the effect.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex justify-center\">\n            <Spotlight class=\"w-full max-w-sm rounded-xl border border-outline bg-surface-50 dark:bg-surface-900 p-8\">\n                <h3 class=\"text-xl font-bold mb-2\">Interactive Card</h3>\n                <p class=\"text-surface-500\">\n                    The spotlight follows your cursor, creating a subtle, premium look for modern interfaces.\n                </p>\n            </Spotlight>\n        </div>\n    </section>\n    \n    <!-- Custom Color -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Color--Size\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Color--Size\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Color & Size\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1\">color</code> and <code class=\"rounded bg-surface-container-highest px-1\">size</code> props to adjust the spotlight appearance.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4 flex gap-4 justify-center flex-wrap\">\n            <Spotlight \n                color=\"rgba(59, 130, 246, 0.2)\" \n                size={300}\n                class=\"w-full max-w-[200px] rounded-xl border border-outline bg-surface-900 text-white p-6\"\n            >\n                <div class=\"font-semibold text-primary-300\">Blue Spotlight</div>\n            </Spotlight>\n            \n            <Spotlight \n                color=\"rgba(16, 185, 129, 0.2)\" \n                size={500}\n                class=\"w-full max-w-[200px] rounded-xl border border-outline bg-surface-900 text-white p-6\"\n            >\n                <div class=\"font-semibold text-success-400\">Large Green Spotlight</div>\n            </Spotlight>\n        </div>\n    </section>\n</div>\n",
     "breadcrumb": "<script lang=\"ts\">\n    import { Breadcrumb, Icon, Link, Separator } from '$lib/index.js'\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Breadcrumb</h1>\n        <p class=\"text-on-surface-variant\">\n            Display a hierarchy of navigation links to show the user's current location within a\n            site.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Breadcrumb\n                items={[\n                    { label: 'Home', href: '/' },\n                    { label: 'Products', href: '/products' },\n                    { label: 'Laptops', href: '/products/laptops' },\n                    { label: 'MacBook Pro' }\n                ]}\n            />\n        </div>\n    </section>\n\n    <!-- With Icons -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Icons\" class=\"text-lg font-semibold\">\n<a href=\"#With-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Icons\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Breadcrumb\n                items={[\n                    { label: 'Home', href: '/', icon: 'lucide:home' },\n                    { label: 'Settings', href: '/settings', icon: 'lucide:settings' },\n                    { label: 'Profile', icon: 'lucide:user' }\n                ]}\n            />\n        </div>\n    </section>\n\n    <!-- Separator Icon -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Separator-Icon\" class=\"text-lg font-semibold\">\n<a href=\"#Separator-Icon\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Separator Icon\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Customize the separator between items via the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >separatorIcon</code\n            > prop.\n        </p>\n        <div class=\"grid gap-4 sm:grid-cols-2\">\n            {#each [{ icon: 'lucide:chevron-right', name: 'Chevron (default)' }, { icon: 'lucide:slash', name: 'Slash' }, { icon: 'lucide:arrow-right', name: 'Arrow' }, { icon: 'lucide:dot', name: 'Dot' }] as sep (sep.icon)}\n                <div class=\"space-y-1 rounded-lg bg-surface-container-high p-4\">\n                    <p class=\"text-xs font-medium text-on-surface-variant\">{sep.name}</p>\n                    <Breadcrumb\n                        separatorIcon={sep.icon}\n                        items={[\n                            { label: 'Home', href: '/' },\n                            { label: 'Docs', href: '/docs' },\n                            { label: 'API' }\n                        ]}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Separator Snippet -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Separator-Snippet\" class=\"text-lg font-semibold\">\n<a href=\"#Separator-Snippet\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Separator Snippet\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">separator</code\n            > snippet for fully custom separator content.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Breadcrumb\n                items={[\n                    { label: 'Home', href: '/' },\n                    { label: 'Category', href: '/category' },\n                    { label: 'Current Page' }\n                ]}\n            >\n                {#snippet separator()}\n                    <span class=\"text-sm text-on-surface-variant/40\">/</span>\n                {/snippet}\n            </Breadcrumb>\n        </div>\n    </section>\n\n    <!-- Disabled Items -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled-Items\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled-Items\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled Items\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Breadcrumb\n                items={[\n                    { label: 'Home', href: '/' },\n                    { label: 'Archived', href: '/archived', disabled: true },\n                    { label: 'Old Post', href: '/archived/old-post', disabled: true },\n                    { label: 'Detail' }\n                ]}\n            />\n        </div>\n    </section>\n\n    <!-- Custom Item Snippet -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Item-Snippet\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Item-Snippet\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Item Snippet\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">item</code>\n            snippet for fully custom item rendering.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Breadcrumb\n                items={[\n                    { label: 'Home', href: '/', icon: 'lucide:home' },\n                    { label: 'Projects', href: '/projects', icon: 'lucide:folder' },\n                    { label: 'svelora', icon: 'lucide:package' }\n                ]}\n            >\n                {#snippet item({ item: crumb, active })}\n                    {#if active}\n                        <span\n                            class=\"inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary\"\n                        >\n                            {#if crumb.icon}\n                                <Icon name={crumb.icon} size=\"14\" />\n                            {/if}\n                            {crumb.label}\n                        </span>\n                    {:else}\n                        <Link\n                            href={crumb.href ?? ''}\n                            raw\n                            class=\"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm text-on-surface-variant transition-colors hover:bg-surface-container-highest\"\n                        >\n                            {#if crumb.icon}\n                                <Icon name={crumb.icon} size=\"14\" />\n                            {/if}\n                            {crumb.label}\n                        </Link>\n                    {/if}\n                {/snippet}\n            </Breadcrumb>\n        </div>\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Custom active color</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        ui={{ link: 'text-on-surface font-semibold' }}\n                        items={[\n                            { label: 'Dashboard', href: '/' },\n                            { label: 'Analytics', href: '/analytics' },\n                            { label: 'Revenue' }\n                        ]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Larger separator</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        ui={{ separatorIcon: 'size-6 text-primary/40' }}\n                        items={[\n                            { label: 'Home', href: '/' },\n                            { label: 'Blog', href: '/blog' },\n                            { label: 'Latest Post' }\n                        ]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">With background container</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        ui={{ root: 'bg-surface-container rounded-lg px-4 py-2' }}\n                        items={[\n                            { label: 'Home', href: '/' },\n                            { label: 'Shop', href: '/shop' },\n                            { label: 'Electronics', href: '/shop/electronics' },\n                            { label: 'Phones' }\n                        ]}\n                    />\n                </div>\n            </div>\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium text-on-surface-variant\">Wider gap</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        ui={{ list: 'gap-3' }}\n                        items={[\n                            { label: 'Home', href: '/' },\n                            { label: 'Team', href: '/team' },\n                            { label: 'Members' }\n                        ]}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"grid gap-4 md:grid-cols-2\">\n            <!-- File Browser -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">File Browser</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        items={[\n                            { label: 'Root', href: '/', icon: 'lucide:hard-drive' },\n                            { label: 'Users', href: '/users', icon: 'lucide:users' },\n                            { label: 'Documents', href: '/documents', icon: 'lucide:folder' },\n                            { label: 'README.md', icon: 'lucide:file-text' }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <!-- E-commerce -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">E-commerce</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        items={[\n                            { label: 'Store', href: '/' },\n                            { label: 'Electronics', href: '/electronics' },\n                            { label: 'Laptops', href: '/electronics/laptops' },\n                            { label: 'ASUS ROG Strix' }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <!-- Admin Dashboard -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">Admin Dashboard</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        ui={{ root: 'bg-surface-container rounded-lg px-4 py-2.5' }}\n                        items={[\n                            { label: 'Admin', href: '/admin', icon: 'lucide:shield' },\n                            { label: 'Users', href: '/admin/users', icon: 'lucide:users' },\n                            { label: 'Permissions', icon: 'lucide:lock' }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <!-- Documentation -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">Documentation</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Breadcrumb\n                        separatorIcon=\"lucide:slash\"\n                        items={[\n                            { label: 'Docs', href: '/docs', icon: 'lucide:book-open' },\n                            { label: 'Components', href: '/docs/components' },\n                            { label: 'Breadcrumb' }\n                        ]}\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "pagination": "<script lang=\"ts\">\n    import { Pagination, Button, Separator } from '$lib/index.js'\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n    const activeVariants = ['solid', 'outline', 'soft', 'subtle', 'ghost'] as const\n    const navVariants = ['ghost', 'outline', 'soft', 'subtle', 'solid', 'link'] as const\n\n    let controlledPage = $state(5)\n    let callbackPage = $state(1)\n    let callbackLog = $state('')\n</script>\n\n<div class=\"space-y-8\">\n    <h1 class=\"text-2xl font-bold text-on-surface\">Pagination</h1>\n\n    <!-- Basic -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic-Usage\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Basic-Usage\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic Usage\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Simple pagination with previous/next controls and page numbers.\n        </p>\n        <Pagination total={100} itemsPerPage={10} />\n    </section>\n\n    <!-- Default Page -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Default-Page\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Default-Page\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Default Page\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set the initial page with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">defaultPage</code\n            >.\n        </p>\n        <Pagination total={100} itemsPerPage={10} defaultPage={5} />\n    </section>\n\n    <!-- Show Edges -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Show-Edges\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Show-Edges\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Show Edges\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Display first/last page buttons with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">showEdges</code\n            >.\n        </p>\n        <Pagination total={100} itemsPerPage={10} showEdges />\n    </section>\n\n    <!-- Without Controls -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Without-Controls\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Without-Controls\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Without Controls\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Hide prev/next buttons with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >showControls={'{false}'}</code\n            >.\n        </p>\n        <div class=\"space-y-3\">\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">Pages only</p>\n                <Pagination total={100} itemsPerPage={10} showControls={false} />\n            </div>\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">With edges, no prev/next</p>\n                <Pagination total={100} itemsPerPage={10} showEdges showControls={false} />\n            </div>\n        </div>\n    </section>\n\n    <!-- Sibling Count -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Sibling-Count\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Sibling-Count\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sibling Count\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Control visible siblings around current page with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >siblingCount</code\n            >.\n        </p>\n        <div class=\"space-y-3\">\n            {#each [0, 1, 2] as count (count)}\n                <div>\n                    <p class=\"mb-1 text-xs text-on-surface-variant\">\n                        siblingCount={count}{count === 1 ? ' (default)' : ''}\n                    </p>\n                    <Pagination total={100} itemsPerPage={10} page={5} siblingCount={count} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Items Per Page -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Items-Per-Page\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Items-Per-Page\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Items Per Page\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Same total (100) with different <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >itemsPerPage</code\n            > values.\n        </p>\n        <div class=\"space-y-3\">\n            {#each [5, 10, 25, 50] as perPage (perPage)}\n                <div>\n                    <p class=\"mb-1 text-xs text-on-surface-variant\">\n                        {perPage} items/page ({Math.ceil(100 / perPage)} pages)\n                    </p>\n                    <Pagination total={100} itemsPerPage={perPage} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Controlled State -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Controlled-State\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Controlled-State\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Controlled State\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >bind:page</code\n            >\n            for two-way binding. Current page:\n            <strong class=\"text-on-surface\">{controlledPage}</strong>\n        </p>\n        <Pagination total={200} itemsPerPage={10} bind:page={controlledPage} showEdges />\n        <div class=\"flex gap-2\">\n            {#each [1, 10, 20] as p (p)}\n                <Button\n                    variant=\"solid\"\n                    color=\"primary\"\n                    size=\"sm\"\n                    label=\"Go to page {p}\"\n                    onclick={() => (controlledPage = p)}\n                />\n            {/each}\n        </div>\n    </section>\n\n    <!-- Active Colors -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Active-Colors\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Active-Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Active Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Customize the active page color with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">activeColor</code\n            >.\n        </p>\n        <div class=\"space-y-3\">\n            {#each colors as color (color)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-20 text-sm text-on-surface-variant\">{color}</span>\n                    <Pagination total={100} itemsPerPage={10} page={3} activeColor={color} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Active Variant -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Active-Variant\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Active-Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Active Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Change the selected page style with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >activeVariant</code\n            >.\n        </p>\n        <div class=\"space-y-3\">\n            {#each activeVariants as av (av)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-16 text-sm text-on-surface-variant\">{av}</span>\n                    <Pagination total={100} itemsPerPage={10} page={3} activeVariant={av} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Nav Button Variant -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Nav-Button-Variant\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Nav-Button-Variant\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Nav Button Variant\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Change navigation button style with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">variant</code\n            >\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code>.\n        </p>\n        <div class=\"space-y-3\">\n            {#each navVariants as v (v)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-16 text-sm text-on-surface-variant\">{v}</span>\n                    <Pagination\n                        total={100}\n                        itemsPerPage={10}\n                        page={3}\n                        variant={v}\n                        color=\"primary\"\n                        showEdges\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Control the pagination size with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">size</code\n            >.\n        </p>\n        <div class=\"space-y-4\">\n            {#each sizes as size (size)}\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"w-8 text-sm text-on-surface-variant\">{size}</span>\n                    <Pagination total={100} itemsPerPage={10} {size} showEdges />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Disable all controls with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">disabled</code\n            >.\n        </p>\n        <Pagination total={100} itemsPerPage={10} page={3} disabled showEdges />\n    </section>\n\n    <!-- Page Change Callback -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Page-Change-Callback\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Page-Change-Callback\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Page Change Callback\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Listen for page changes with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onPageChange</code\n            >. Current page: <strong class=\"text-on-surface\">{callbackPage}</strong>\n        </p>\n        <Pagination\n            total={100}\n            itemsPerPage={10}\n            bind:page={callbackPage}\n            onPageChange={(p) => (callbackLog = `Navigated to page ${p}`)}\n            showEdges\n        />\n        {#if callbackLog}\n            <p class=\"text-xs text-on-surface-variant\">{callbackLog}</p>\n        {/if}\n    </section>\n\n    <!-- Custom Icons -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Custom-Icons\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Custom-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Customize navigation icons with icon props.</p>\n        <Pagination\n            total={100}\n            itemsPerPage={10}\n            page={5}\n            showEdges\n            prevIcon=\"lucide:arrow-left\"\n            nextIcon=\"lucide:arrow-right\"\n            ellipsisIcon=\"lucide:more-horizontal\"\n        />\n    </section>\n\n    <!-- UI Slot Overrides -->\n    <section class=\"space-y-4\">\n        <h2 id=\"UI-Slot-Overrides\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#UI-Slot-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Slot Overrides\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Customize individual parts with <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">ui</code\n            >.\n        </p>\n        <div class=\"space-y-4\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Rounded buttons</p>\n                <Pagination\n                    total={100}\n                    itemsPerPage={10}\n                    page={3}\n                    showEdges\n                    ui={{\n                        item: 'rounded-full',\n                        first: 'rounded-full',\n                        prev: 'rounded-full',\n                        next: 'rounded-full',\n                        last: 'rounded-full'\n                    }}\n                />\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom gap &amp; root</p>\n                <Pagination\n                    total={100}\n                    itemsPerPage={10}\n                    page={3}\n                    class=\"rounded-lg border border-outline-variant bg-surface-container p-3\"\n                    ui={{ list: 'gap-2' }}\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Custom Snippet Slots -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Custom-Snippet-Slots\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Custom-Snippet-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Snippet Slots\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Override individual parts with snippet slots.</p>\n        <div class=\"space-y-4\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom item slot (rounded)</p>\n                <Pagination total={50} itemsPerPage={10} page={2}>\n                    {#snippet itemSlot({ page, selected })}\n                        <span\n                            class=\"inline-flex size-9 items-center justify-center rounded-full text-sm font-bold {selected\n                                ? 'bg-primary text-on-primary'\n                                : 'text-on-surface-variant'}\"\n                        >\n                            {page}\n                        </span>\n                    {/snippet}\n                </Pagination>\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom prev/next text</p>\n                <Pagination total={100} itemsPerPage={10} page={3}>\n                    {#snippet prevSlot({ disabled })}\n                        <span\n                            class=\"text-sm font-medium {disabled\n                                ? 'text-on-surface-variant/50'\n                                : 'text-primary'}\"\n                        >\n                            Previous\n                        </span>\n                    {/snippet}\n                    {#snippet nextSlot({ disabled })}\n                        <span\n                            class=\"text-sm font-medium {disabled\n                                ? 'text-on-surface-variant/50'\n                                : 'text-primary'}\"\n                        >\n                            Next\n                        </span>\n                    {/snippet}\n                </Pagination>\n            </div>\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Custom ellipsis</p>\n                <Pagination total={100} itemsPerPage={10} page={5}>\n                    {#snippet ellipsisSlot()}\n                        <span class=\"text-on-surface-variant\">---</span>\n                    {/snippet}\n                </Pagination>\n            </div>\n        </div>\n    </section>\n\n    <!-- Edge Cases -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Edge-Cases\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Edge-Cases\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Edge Cases\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">Handling special scenarios.</p>\n        <div class=\"space-y-3\">\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">Single page (5 items, 10/page)</p>\n                <Pagination total={5} itemsPerPage={10} showEdges />\n            </div>\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">Few pages (30 items, 10/page)</p>\n                <Pagination total={30} itemsPerPage={10} showEdges />\n            </div>\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">Many pages (1000 items, 10/page)</p>\n                <Pagination total={1000} itemsPerPage={10} page={50} showEdges />\n            </div>\n            <div>\n                <p class=\"mb-1 text-xs text-on-surface-variant\">Zero total</p>\n                <Pagination total={0} itemsPerPage={10} />\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Example -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold text-on-surface\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-6\">\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Table-style pagination</p>\n                <div class=\"rounded-lg border border-outline-variant bg-surface-container-low p-4\">\n                    <div class=\"mb-3 text-sm text-on-surface-variant\">\n                        Showing <strong class=\"text-on-surface\">41-50</strong> of\n                        <strong class=\"text-on-surface\">200</strong> results\n                    </div>\n                    <Pagination\n                        total={200}\n                        itemsPerPage={10}\n                        page={5}\n                        showEdges\n                        size=\"sm\"\n                        activeColor=\"primary\"\n                    />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Minimal blog pagination</p>\n                <div class=\"flex items-center justify-center\">\n                    <Pagination\n                        total={50}\n                        itemsPerPage={5}\n                        page={3}\n                        showControls={false}\n                        activeColor=\"surface\"\n                        ui={{ item: 'rounded-full' }}\n                    />\n                </div>\n            </div>\n\n            <div>\n                <p class=\"mb-2 text-xs text-on-surface-variant\">Combined features</p>\n                <Pagination\n                    total={200}\n                    itemsPerPage={10}\n                    bind:page={controlledPage}\n                    activeColor=\"success\"\n                    size=\"lg\"\n                    showEdges\n                    siblingCount={2}\n                    ui={{\n                        item: 'rounded-full',\n                        first: 'rounded-full',\n                        prev: 'rounded-full',\n                        next: 'rounded-full',\n                        last: 'rounded-full',\n                        list: 'gap-1.5'\n                    }}\n                />\n                <p class=\"mt-2 text-xs text-on-surface-variant\">\n                    Page <strong class=\"text-on-surface\">{controlledPage}</strong> | Size: lg | Color:\n                    success | Edges | Siblings: 2 | Rounded\n                </p>\n            </div>\n        </div>\n    </section>\n</div>\n",
-    "sidebar": "<script lang=\"ts\">\n    import { Sidebar, Button, NavigationMenu, Avatar, Badge, DropdownMenu } from '$lib/index.js'\n    import type { NavigationMenuItemType } from '$lib/NavigationMenu/navigation-menu.types.js'\n    \n    let isCollapsed = $state(false)\n\n    const basicItems: NavigationMenuItemType[] = [\n        { label: 'Inbox', icon: 'lucide:inbox', href: '#inbox', badge: 12 },\n        { label: 'Sent', icon: 'lucide:send', href: '#sent' },\n        { label: 'Drafts', icon: 'lucide:file-text', href: '#drafts' },\n        { label: 'Trash', icon: 'lucide:trash-2', href: '#trash' }\n    ]\n\n    const groupedItems: NavigationMenuItemType[][] = [\n        [\n            { label: 'Dashboard', icon: 'lucide:home', href: '#home', active: true },\n            { label: 'Analytics', icon: 'lucide:bar-chart-2', href: '#analytics' }\n        ],\n        [\n            { label: 'Customers', icon: 'lucide:users', href: '#customers' },\n            { label: 'Orders', icon: 'lucide:shopping-cart', href: '#orders', badge: 'New', badgeColor: 'success' },\n            { label: 'Products', icon: 'lucide:package', href: '#products' }\n        ],\n        [\n            { label: 'Settings', icon: 'lucide:settings', href: '#settings' },\n            { label: 'Help', icon: 'lucide:help-circle', href: '#help' }\n        ]\n    ]\n</script>\n\n<div class=\"space-y-12 pb-20\">\n    <div class=\"space-y-2 border-b border-outline-variant/60 pb-8\">\n        <h1 class=\"text-3xl font-bold tracking-tight\">Sidebar</h1>\n        <p class=\"text-lg text-on-surface-variant max-w-3xl\">\n            A premium layout component with built-in collapsible states, perfect for application shells and dashboards. Integrates seamlessly with <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code>.\n        </p>\n    </div>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic\" class=\"text-xl font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">A simple sidebar with a header, navigation links, and a footer.</p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-[280px] h-[500px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-sm\">\n                <Sidebar>\n                    {#snippet header()}\n                        <div class=\"w-full flex items-center gap-3\">\n                            <div class=\"w-8 h-8 rounded-lg bg-primary text-on-primary flex items-center justify-center font-bold\">A</div>\n                            <span class=\"font-semibold text-lg\">Acme Corp</span>\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children()}\n                        <div class=\"space-y-1\">\n                            <NavigationMenu items={basicItems} orientation=\"vertical\" variant=\"ghost\" />\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet footer()}\n                        <Button variant=\"soft\" color=\"surface\" class=\"w-full justify-start text-on-surface-variant\">\n                            {#snippet children()}\n                                <div class=\"flex items-center gap-3 w-full\">\n                                    <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" />\n                                    <span class=\"font-medium text-sm truncate flex-1 text-left\">Alex Doe</span>\n                                </div>\n                            {/snippet}\n                        </Button>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n\n    <!-- Grouped Sections -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Grouped-Sections\" class=\"text-xl font-semibold\">\n<a href=\"#Grouped-Sections\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Grouped Sections\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">Pass an array of arrays to <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code> inside the sidebar to create distinct groupings.</p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-[280px] h-[600px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-sm\">\n                <Sidebar>\n                    {#snippet children()}\n                        <div class=\"space-y-6 mt-2\">\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Overview</p>\n                                <NavigationMenu items={groupedItems[0]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Business</p>\n                                <NavigationMenu items={groupedItems[1]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">System</p>\n                                <NavigationMenu items={groupedItems[2]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        </div>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n\n    <!-- Collapsible App Shell -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Collapsible-App-Shell\" class=\"text-xl font-semibold\">\n<a href=\"#Collapsible-App-Shell\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Collapsible App Shell\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">\n            Pass <code class=\"rounded bg-surface-container px-1 text-sm\">collapsed</code> to the Sidebar. When collapsed, <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code> items instantly convert to perfectly proportioned tooltips! Use the <code class=\"rounded bg-surface-container px-1 text-sm\">{\"{ collapsed }\"}</code> snippet props to conditionally render the header/footer.\n        </p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-4xl h-[600px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-xl\">\n                <Sidebar collapsed={isCollapsed}>\n                    {#snippet header({ collapsed: isCol })}\n                        <div class=\"w-full flex items-center justify-between\">\n                            {#if !isCol}\n                                <span class=\"font-bold text-lg flex items-center gap-2\">\n                                    <div class=\"w-7 h-7 rounded-lg bg-primary text-on-primary flex items-center justify-center text-sm\">S</div>\n                                    Svelora\n                                </span>\n                            {:else}\n                                <div class=\"w-8 h-8 rounded-lg bg-primary text-on-primary flex items-center justify-center text-sm font-bold\">S</div>\n                            {/if}\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children()}\n                        <div class=\"space-y-6\">\n                            <div>\n                                {#if !isCollapsed}\n                                    <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Main Menu</p>\n                                {/if}\n                                <NavigationMenu items={basicItems} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                {#if !isCollapsed}\n                                    <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Settings</p>\n                                {/if}\n                                <NavigationMenu items={groupedItems[2]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet footer({ collapsed: isCol })}\n                        <div class=\"w-full flex flex-col gap-3 items-center\">\n                            <Button \n                                icon={isCol ? \"lucide:chevron-right\" : \"lucide:chevron-left\"} \n                                variant=\"outline\" \n                                color=\"surface\"\n                                size={isCol ? \"md\" : \"sm\"} \n                                class={isCol ? \"w-10 h-10 aspect-square p-0\" : \"w-full justify-center\"}\n                                onclick={() => isCollapsed = !isCollapsed} \n                            >\n                                {#if !isCol} Collapse Sidebar {/if}\n                            </Button>\n\n                            {#if !isCol}\n                                <DropdownMenu \n                                    items={[\n                                        { label: 'Profile', icon: 'lucide:user' },\n                                        { label: 'Billing', icon: 'lucide:credit-card' },\n                                        { type: 'separator' },\n                                        { label: 'Log out', icon: 'lucide:log-out' }\n                                    ]}\n                                    align=\"center\"\n                                >\n                                    {#snippet children({ props })}\n                                        <button {...props} class=\"w-full flex items-center gap-3 p-2 rounded-lg hover:bg-surface-container transition-colors text-left focus:outline-none focus-visible:ring-2 ring-primary\">\n                                            <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" />\n                                            <div class=\"flex-1 overflow-hidden\">\n                                                <div class=\"font-semibold text-sm truncate text-on-surface\">Alex Doe</div>\n                                                <div class=\"text-xs text-on-surface-variant truncate\">alex@svelora.com</div>\n                                            </div>\n                                            <div class=\"text-on-surface-variant opacity-50\">\n                                                <iconify-icon icon=\"lucide:chevron-up\" class=\"text-sm\"></iconify-icon>\n                                            </div>\n                                        </button>\n                                    {/snippet}\n                                </DropdownMenu>\n                            {:else}\n                                <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" class=\"cursor-pointer\" />\n                            {/if}\n                        </div>\n                    {/snippet}\n                </Sidebar>\n                \n                <main class=\"flex-1 p-8 bg-surface-50 dark:bg-surface-950 flex flex-col\">\n                    <header class=\"h-10 flex items-center justify-between border-b border-outline-variant/30 mb-8 pb-4\">\n                        <h2 id=\"Dashboard\" class=\"text-2xl font-bold\">\n<a href=\"#Dashboard\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Dashboard\n                    </a>\n</h2>\n                        <div class=\"flex gap-2\">\n                            <Button variant=\"soft\" icon=\"lucide:bell\" square />\n                            <Button variant=\"solid\" color=\"primary\" label=\"New Project\" icon=\"lucide:plus\" />\n                        </div>\n                    </header>\n                    \n                    <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                        {#each Array(3) as _, i}\n                            <div class=\"h-32 rounded-xl bg-surface dark:bg-surface-900 border border-outline-variant/40 shadow-sm p-6 flex flex-col justify-between\">\n                                <div class=\"w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center\">\n                                    <iconify-icon icon=\"lucide:activity\"></iconify-icon>\n                                </div>\n                                <div>\n                                    <div class=\"text-2xl font-bold\">{(i + 1) * 124}</div>\n                                    <div class=\"text-sm text-on-surface-variant\">Total views</div>\n                                </div>\n                            </div>\n                        {/each}\n                    </div>\n                    \n                    <div class=\"mt-6 flex-1 rounded-xl bg-surface dark:bg-surface-900 border border-outline-variant/40 shadow-sm flex items-center justify-center text-on-surface-variant\">\n                        Main content area\n                    </div>\n                </main>\n            </div>\n        </div>\n    </section>\n\n    <!-- Right Positioned (AI Chat Panel) -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Right-Positioned--Responsive\" class=\"text-xl font-semibold\">\n<a href=\"#Right-Positioned--Responsive\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Right Positioned & Responsive\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">\n            Pass <code class=\"rounded bg-surface-container px-1 text-sm\">position=\"right\"</code> to dock the sidebar on the right side. The borders and Tooltips automatically adapt! \n            <br/><br/>\n            <strong>Responsive Design:</strong> Sidebar is purely structural. To hide it on small screens, simply use Tailwind classes like <code class=\"rounded bg-surface-container px-1 text-sm\">hidden md:flex</code> on the Sidebar, and use a <code class=\"rounded bg-surface-container px-1 text-sm\">Drawer</code> component for mobile navigation.\n        </p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-4xl h-[500px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-xl relative\">\n                \n                <main class=\"flex-1 p-8 bg-surface-50 dark:bg-surface-950 flex flex-col\">\n                    <header class=\"h-10 flex items-center justify-between border-b border-outline-variant/30 mb-8 pb-4\">\n                        <h2 id=\"Workspace\" class=\"text-2xl font-bold\">\n<a href=\"#Workspace\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Workspace\n                    </a>\n</h2>\n                        <div class=\"flex gap-2\">\n                            <!-- Mobile toggle button (hidden on desktop) -->\n                            <Button variant=\"soft\" icon=\"lucide:menu\" class=\"md:hidden\" />\n                        </div>\n                    </header>\n                    <div class=\"flex-1 border-2 border-dashed border-outline-variant/30 rounded-xl flex items-center justify-center text-on-surface-variant\">\n                        Main Canvas Area\n                    </div>\n                </main>\n\n                <!-- Sidebar on the right, hidden on mobile -->\n                <Sidebar position=\"right\" collapsed={isCollapsed} class=\"hidden md:flex\">\n                    {#snippet header({ collapsed: isCol })}\n                        <div class=\"w-full flex items-center justify-between\">\n                            {#if !isCol}\n                                <span class=\"font-bold text-lg\">AI Chat</span>\n                                <Button variant=\"ghost\" icon=\"lucide:x\" size=\"sm\" square />\n                            {:else}\n                                <div class=\"w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center\">\n                                    <iconify-icon icon=\"lucide:bot\" class=\"text-xl\"></iconify-icon>\n                                </div>\n                            {/if}\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children({ collapsed: isCol })}\n                        {#if !isCol}\n                            <div class=\"flex-1 flex flex-col justify-end p-4\">\n                                <div class=\"bg-surface-container-high rounded-lg p-3 text-sm text-on-surface mb-4 self-end max-w-[85%]\">\n                                    What is Nuxt UI?\n                                </div>\n                                <div class=\"text-sm text-on-surface-variant leading-relaxed\">\n                                    Nuxt UI is a Vue component library built on Tailwind CSS... But Svelora is the Svelte equivalent with premium aesthetics!\n                                </div>\n                            </div>\n                        {:else}\n                            <div class=\"flex-1 flex flex-col gap-4 mt-4\">\n                                <NavigationMenu items={[\n                                    { label: 'Chat History', icon: 'lucide:message-square' },\n                                    { label: 'Summarize', icon: 'lucide:file-text' },\n                                    { label: 'Code Gen', icon: 'lucide:code' }\n                                ]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        {/if}\n                    {/snippet}\n                    \n                    {#snippet footer({ collapsed: isCol })}\n                        <div class=\"w-full flex gap-2\">\n                            {#if !isCol}\n                                <div class=\"flex-1 flex items-center bg-surface-container rounded-lg px-3 py-2 border border-outline-variant/50\">\n                                    <input type=\"text\" placeholder=\"Ask AI...\" class=\"bg-transparent border-none outline-none text-sm w-full\" />\n                                    <iconify-icon icon=\"lucide:arrow-up-circle\" class=\"text-primary text-xl ml-2\"></iconify-icon>\n                                </div>\n                            {:else}\n                                <Button \n                                    icon=\"lucide:chevron-left\" \n                                    variant=\"outline\" \n                                    size=\"md\" \n                                    class=\"w-10 h-10 aspect-square p-0\"\n                                    onclick={() => isCollapsed = !isCollapsed} \n                                />\n                            {/if}\n                        </div>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n</div>\n",
+    "sidebar": "<script lang=\"ts\">\n    import { Sidebar, Button, NavigationMenu, Avatar, Badge, DropdownMenu } from '$lib/index.js'\n    import type { NavigationMenuItemType } from '$lib/components/NavigationMenu/navigation-menu.types.js'\n    \n    let isCollapsed = $state(false)\n\n    const basicItems: NavigationMenuItemType[] = [\n        { label: 'Inbox', icon: 'lucide:inbox', href: '#inbox', badge: 12 },\n        { label: 'Sent', icon: 'lucide:send', href: '#sent' },\n        { label: 'Drafts', icon: 'lucide:file-text', href: '#drafts' },\n        { label: 'Trash', icon: 'lucide:trash-2', href: '#trash' }\n    ]\n\n    const groupedItems: NavigationMenuItemType[][] = [\n        [\n            { label: 'Dashboard', icon: 'lucide:home', href: '#home', active: true },\n            { label: 'Analytics', icon: 'lucide:bar-chart-2', href: '#analytics' }\n        ],\n        [\n            { label: 'Customers', icon: 'lucide:users', href: '#customers' },\n            { label: 'Orders', icon: 'lucide:shopping-cart', href: '#orders', badge: 'New', badgeColor: 'success' },\n            { label: 'Products', icon: 'lucide:package', href: '#products' }\n        ],\n        [\n            { label: 'Settings', icon: 'lucide:settings', href: '#settings' },\n            { label: 'Help', icon: 'lucide:help-circle', href: '#help' }\n        ]\n    ]\n</script>\n\n<div class=\"space-y-12 pb-20\">\n    <div class=\"space-y-2 border-b border-outline-variant/60 pb-8\">\n        <h1 class=\"text-3xl font-bold tracking-tight\">Sidebar</h1>\n        <p class=\"text-lg text-on-surface-variant max-w-3xl\">\n            A premium layout component with built-in collapsible states, perfect for application shells and dashboards. Integrates seamlessly with <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code>.\n        </p>\n    </div>\n\n    <!-- Basic Usage -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Basic\" class=\"text-xl font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">A simple sidebar with a header, navigation links, and a footer.</p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-[280px] h-[500px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-sm\">\n                <Sidebar>\n                    {#snippet header()}\n                        <div class=\"w-full flex items-center gap-3\">\n                            <div class=\"w-8 h-8 rounded-lg bg-primary text-on-primary flex items-center justify-center font-bold\">A</div>\n                            <span class=\"font-semibold text-lg\">Acme Corp</span>\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children()}\n                        <div class=\"space-y-1\">\n                            <NavigationMenu items={basicItems} orientation=\"vertical\" variant=\"ghost\" />\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet footer()}\n                        <Button variant=\"soft\" color=\"surface\" class=\"w-full justify-start text-on-surface-variant\">\n                            {#snippet children()}\n                                <div class=\"flex items-center gap-3 w-full\">\n                                    <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" />\n                                    <span class=\"font-medium text-sm truncate flex-1 text-left\">Alex Doe</span>\n                                </div>\n                            {/snippet}\n                        </Button>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n\n    <!-- Grouped Sections -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Grouped-Sections\" class=\"text-xl font-semibold\">\n<a href=\"#Grouped-Sections\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Grouped Sections\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">Pass an array of arrays to <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code> inside the sidebar to create distinct groupings.</p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-[280px] h-[600px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-sm\">\n                <Sidebar>\n                    {#snippet children()}\n                        <div class=\"space-y-6 mt-2\">\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Overview</p>\n                                <NavigationMenu items={groupedItems[0]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Business</p>\n                                <NavigationMenu items={groupedItems[1]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">System</p>\n                                <NavigationMenu items={groupedItems[2]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        </div>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n\n    <!-- Collapsible App Shell -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Collapsible-App-Shell\" class=\"text-xl font-semibold\">\n<a href=\"#Collapsible-App-Shell\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Collapsible App Shell\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">\n            Pass <code class=\"rounded bg-surface-container px-1 text-sm\">collapsed</code> to the Sidebar. When collapsed, <code class=\"rounded bg-surface-container px-1 text-sm\">NavigationMenu</code> items instantly convert to perfectly proportioned tooltips! Use the <code class=\"rounded bg-surface-container px-1 text-sm\">{\"{ collapsed }\"}</code> snippet props to conditionally render the header/footer.\n        </p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-4xl h-[600px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-xl\">\n                <Sidebar collapsed={isCollapsed}>\n                    {#snippet header({ collapsed: isCol })}\n                        <div class=\"w-full flex items-center justify-between\">\n                            {#if !isCol}\n                                <span class=\"font-bold text-lg flex items-center gap-2\">\n                                    <div class=\"w-7 h-7 rounded-lg bg-primary text-on-primary flex items-center justify-center text-sm\">S</div>\n                                    Svelora\n                                </span>\n                            {:else}\n                                <div class=\"w-8 h-8 rounded-lg bg-primary text-on-primary flex items-center justify-center text-sm font-bold\">S</div>\n                            {/if}\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children()}\n                        <div class=\"space-y-6\">\n                            <div>\n                                {#if !isCollapsed}\n                                    <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Main Menu</p>\n                                {/if}\n                                <NavigationMenu items={basicItems} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                            <div>\n                                {#if !isCollapsed}\n                                    <p class=\"px-3 mb-2 text-xs font-semibold text-on-surface-variant uppercase tracking-wider\">Settings</p>\n                                {/if}\n                                <NavigationMenu items={groupedItems[2]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet footer({ collapsed: isCol })}\n                        <div class=\"w-full flex flex-col gap-3 items-center\">\n                            <Button \n                                icon={isCol ? \"lucide:chevron-right\" : \"lucide:chevron-left\"} \n                                variant=\"outline\" \n                                color=\"surface\"\n                                size={isCol ? \"md\" : \"sm\"} \n                                class={isCol ? \"w-10 h-10 aspect-square p-0\" : \"w-full justify-center\"}\n                                onclick={() => isCollapsed = !isCollapsed} \n                            >\n                                {#if !isCol} Collapse Sidebar {/if}\n                            </Button>\n\n                            {#if !isCol}\n                                <DropdownMenu \n                                    items={[\n                                        { label: 'Profile', icon: 'lucide:user' },\n                                        { label: 'Billing', icon: 'lucide:credit-card' },\n                                        { type: 'separator' },\n                                        { label: 'Log out', icon: 'lucide:log-out' }\n                                    ]}\n                                    align=\"center\"\n                                >\n                                    {#snippet children({ props })}\n                                        <button {...props} class=\"w-full flex items-center gap-3 p-2 rounded-lg hover:bg-surface-container transition-colors text-left focus:outline-none focus-visible:ring-2 ring-primary\">\n                                            <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" />\n                                            <div class=\"flex-1 overflow-hidden\">\n                                                <div class=\"font-semibold text-sm truncate text-on-surface\">Alex Doe</div>\n                                                <div class=\"text-xs text-on-surface-variant truncate\">alex@svelora.com</div>\n                                            </div>\n                                            <div class=\"text-on-surface-variant opacity-50\">\n                                                <iconify-icon icon=\"lucide:chevron-up\" class=\"text-sm\"></iconify-icon>\n                                            </div>\n                                        </button>\n                                    {/snippet}\n                                </DropdownMenu>\n                            {:else}\n                                <Avatar src=\"https://i.pravatar.cc/150?u=a042581f4e29026704d\" alt=\"User\" size=\"sm\" class=\"cursor-pointer\" />\n                            {/if}\n                        </div>\n                    {/snippet}\n                </Sidebar>\n                \n                <main class=\"flex-1 p-8 bg-surface-50 dark:bg-surface-950 flex flex-col\">\n                    <header class=\"h-10 flex items-center justify-between border-b border-outline-variant/30 mb-8 pb-4\">\n                        <h2 id=\"Dashboard\" class=\"text-2xl font-bold\">\n<a href=\"#Dashboard\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Dashboard\n                    </a>\n</h2>\n                        <div class=\"flex gap-2\">\n                            <Button variant=\"soft\" icon=\"lucide:bell\" square />\n                            <Button variant=\"solid\" color=\"primary\" label=\"New Project\" icon=\"lucide:plus\" />\n                        </div>\n                    </header>\n                    \n                    <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n                        {#each Array(3) as _, i}\n                            <div class=\"h-32 rounded-xl bg-surface dark:bg-surface-900 border border-outline-variant/40 shadow-sm p-6 flex flex-col justify-between\">\n                                <div class=\"w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center\">\n                                    <iconify-icon icon=\"lucide:activity\"></iconify-icon>\n                                </div>\n                                <div>\n                                    <div class=\"text-2xl font-bold\">{(i + 1) * 124}</div>\n                                    <div class=\"text-sm text-on-surface-variant\">Total views</div>\n                                </div>\n                            </div>\n                        {/each}\n                    </div>\n                    \n                    <div class=\"mt-6 flex-1 rounded-xl bg-surface dark:bg-surface-900 border border-outline-variant/40 shadow-sm flex items-center justify-center text-on-surface-variant\">\n                        Main content area\n                    </div>\n                </main>\n            </div>\n        </div>\n    </section>\n\n    <!-- Right Positioned (AI Chat Panel) -->\n    <section class=\"space-y-4\">\n        <h2 id=\"Right-Positioned--Responsive\" class=\"text-xl font-semibold\">\n<a href=\"#Right-Positioned--Responsive\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Right Positioned & Responsive\n                    </a>\n</h2>\n        <p class=\"text-on-surface-variant text-sm\">\n            Pass <code class=\"rounded bg-surface-container px-1 text-sm\">position=\"right\"</code> to dock the sidebar on the right side. The borders and Tooltips automatically adapt! \n            <br/><br/>\n            <strong>Responsive Design:</strong> Sidebar is purely structural. To hide it on small screens, simply use Tailwind classes like <code class=\"rounded bg-surface-container px-1 text-sm\">hidden md:flex</code> on the Sidebar, and use a <code class=\"rounded bg-surface-container px-1 text-sm\">Drawer</code> component for mobile navigation.\n        </p>\n        <div class=\"rounded-xl bg-surface-container-high p-6 flex justify-center overflow-hidden border border-outline-variant/50\">\n            <div class=\"w-full max-w-4xl h-[500px] border border-outline-variant/50 rounded-xl flex overflow-hidden bg-surface dark:bg-surface-900 shadow-xl relative\">\n                \n                <main class=\"flex-1 p-8 bg-surface-50 dark:bg-surface-950 flex flex-col\">\n                    <header class=\"h-10 flex items-center justify-between border-b border-outline-variant/30 mb-8 pb-4\">\n                        <h2 id=\"Workspace\" class=\"text-2xl font-bold\">\n<a href=\"#Workspace\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Workspace\n                    </a>\n</h2>\n                        <div class=\"flex gap-2\">\n                            <!-- Mobile toggle button (hidden on desktop) -->\n                            <Button variant=\"soft\" icon=\"lucide:menu\" class=\"md:hidden\" />\n                        </div>\n                    </header>\n                    <div class=\"flex-1 border-2 border-dashed border-outline-variant/30 rounded-xl flex items-center justify-center text-on-surface-variant\">\n                        Main Canvas Area\n                    </div>\n                </main>\n\n                <!-- Sidebar on the right, hidden on mobile -->\n                <Sidebar position=\"right\" collapsed={isCollapsed} class=\"hidden md:flex\">\n                    {#snippet header({ collapsed: isCol })}\n                        <div class=\"w-full flex items-center justify-between\">\n                            {#if !isCol}\n                                <span class=\"font-bold text-lg\">AI Chat</span>\n                                <Button variant=\"ghost\" icon=\"lucide:x\" size=\"sm\" square />\n                            {:else}\n                                <div class=\"w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center\">\n                                    <iconify-icon icon=\"lucide:bot\" class=\"text-xl\"></iconify-icon>\n                                </div>\n                            {/if}\n                        </div>\n                    {/snippet}\n                    \n                    {#snippet children({ collapsed: isCol })}\n                        {#if !isCol}\n                            <div class=\"flex-1 flex flex-col justify-end p-4\">\n                                <div class=\"bg-surface-container-high rounded-lg p-3 text-sm text-on-surface mb-4 self-end max-w-[85%]\">\n                                    What is Nuxt UI?\n                                </div>\n                                <div class=\"text-sm text-on-surface-variant leading-relaxed\">\n                                    Nuxt UI is a Vue component library built on Tailwind CSS... But Svelora is the Svelte equivalent with premium aesthetics!\n                                </div>\n                            </div>\n                        {:else}\n                            <div class=\"flex-1 flex flex-col gap-4 mt-4\">\n                                <NavigationMenu items={[\n                                    { label: 'Chat History', icon: 'lucide:message-square' },\n                                    { label: 'Summarize', icon: 'lucide:file-text' },\n                                    { label: 'Code Gen', icon: 'lucide:code' }\n                                ]} orientation=\"vertical\" variant=\"ghost\" />\n                            </div>\n                        {/if}\n                    {/snippet}\n                    \n                    {#snippet footer({ collapsed: isCol })}\n                        <div class=\"w-full flex gap-2\">\n                            {#if !isCol}\n                                <div class=\"flex-1 flex items-center bg-surface-container rounded-lg px-3 py-2 border border-outline-variant/50\">\n                                    <input type=\"text\" placeholder=\"Ask AI...\" class=\"bg-transparent border-none outline-none text-sm w-full\" />\n                                    <iconify-icon icon=\"lucide:arrow-up-circle\" class=\"text-primary text-xl ml-2\"></iconify-icon>\n                                </div>\n                            {:else}\n                                <Button \n                                    icon=\"lucide:chevron-left\" \n                                    variant=\"outline\" \n                                    size=\"md\" \n                                    class=\"w-10 h-10 aspect-square p-0\"\n                                    onclick={() => isCollapsed = !isCollapsed} \n                                />\n                            {/if}\n                        </div>\n                    {/snippet}\n                </Sidebar>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "stepper": "<script lang=\"ts\">\n    import {\n        Stepper,\n        Badge,\n        Button,\n        Icon,\n        Separator,\n        Form,\n        FormField,\n        Input,\n        Textarea,\n        Checkbox,\n        type StepperItem,\n        type StepperApi,\n        type FormApi\n    } from '$lib/index.js'\n\n    const basicItems: StepperItem[] = [\n        { value: 'address', title: 'Address', description: 'Enter shipping address' },\n        { value: 'shipping', title: 'Shipping', description: 'Pick a carrier' },\n        { value: 'payment', title: 'Payment', description: 'Add a card' },\n        { value: 'review', title: 'Review', description: 'Confirm and place order' }\n    ]\n\n    const iconItems: StepperItem[] = [\n        { value: 'cart', title: 'Cart', icon: 'lucide:shopping-cart' },\n        { value: 'address', title: 'Address', icon: 'lucide:map-pin' },\n        { value: 'shipping', title: 'Shipping', icon: 'lucide:truck' },\n        { value: 'payment', title: 'Payment', icon: 'lucide:credit-card' },\n        { value: 'done', title: 'Done', icon: 'lucide:check' }\n    ]\n\n    const compactItems: StepperItem[] = [\n        { value: 1, title: 'Plan' },\n        { value: 2, title: 'Build' },\n        { value: 3, title: 'Ship' }\n    ]\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n\n    // Controlled with bind:value\n    let controlledValue = $state<string | number>('address')\n    let lastChange = $state('')\n\n    // Imperative API wizard\n    let apiValue = $state<string | number>('address')\n    let api = $state<StepperApi>()\n\n    // Linear vs free\n    let linearValue = $state<string | number>('address')\n    let freeValue = $state<string | number>('address')\n\n    // Custom snippet demos\n    let snippetValue = $state<string | number>('shipping')\n\n    // -----------------------------------------------------------------\n    // Form-driven wizard — each step validates before advancing.\n    // -----------------------------------------------------------------\n    type WizardData = {\n        // step 1\n        firstName: string\n        lastName: string\n        email: string\n        // step 2\n        address: string\n        city: string\n        zip: string\n        // step 3\n        notes: string\n        consent: boolean\n    }\n\n    const wizardSteps: StepperItem[] = [\n        {\n            value: 'account',\n            title: 'Account',\n            description: 'Who is ordering',\n            icon: 'lucide:user'\n        },\n        {\n            value: 'shipping',\n            title: 'Shipping',\n            description: 'Where to deliver',\n            icon: 'lucide:map-pin'\n        },\n        {\n            value: 'review',\n            title: 'Review',\n            description: 'Confirm and submit',\n            icon: 'lucide:clipboard-check'\n        }\n    ]\n\n    const wizardState = $state<WizardData>({\n        firstName: '',\n        lastName: '',\n        email: '',\n        address: '',\n        city: '',\n        zip: '',\n        notes: '',\n        consent: false\n    })\n\n    let wizardValue = $state<string | number>('account')\n    let wizardApi = $state<StepperApi>()\n    let wizardForm = $state<FormApi<unknown>>()\n    let wizardSubmitted = $state<string | null>(null)\n\n    const STEP_FIELDS: Record<string, (keyof WizardData)[]> = {\n        account: ['firstName', 'lastName', 'email'],\n        shipping: ['address', 'city', 'zip'],\n        review: ['consent']\n    }\n\n    function validateRequired(field: keyof WizardData) {\n        const value = wizardState[field]\n        if (typeof value === 'boolean') return value ? null : 'Required'\n        if (typeof value === 'string' && value.trim().length === 0) return 'Required'\n        if (field === 'email' && typeof value === 'string' && !/.+@.+\\..+/.test(value)) {\n            return 'Invalid email'\n        }\n        return null\n    }\n\n    function validateCurrentStep(): boolean {\n        const fields = STEP_FIELDS[String(wizardValue)] ?? []\n        const errors: { name: string; message: string }[] = []\n        for (const f of fields) {\n            const err = validateRequired(f)\n            if (err) errors.push({ name: String(f), message: err })\n            else wizardForm?.clear(String(f))\n        }\n        if (errors.length > 0) {\n            wizardForm?.setErrors(errors)\n            return false\n        }\n        return true\n    }\n\n    function handleWizardNext() {\n        if (!validateCurrentStep()) return\n        wizardApi?.next()\n    }\n\n    function handleWizardSubmit() {\n        if (!validateCurrentStep()) return\n        wizardSubmitted = JSON.stringify(wizardState, null, 2)\n    }\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Stepper</h1>\n        <p class=\"text-on-surface-variant\">\n            A wizard-style progress indicator for multi-step flows. Renders a sequential list of\n            steps with <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >pending</code\n            >\n            /\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">active</code> /\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">completed</code\n            >\n            states. Pure custom build — no bits-ui primitive.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Pass <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >items</code\n            >\n            and the Stepper renders progress with sensible defaults.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-6\">\n            <Stepper items={basicItems} />\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Switch between\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >horizontal</code\n            >\n            (default) and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">vertical</code> layout.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-4 text-sm font-medium\">Horizontal</p>\n                <Stepper items={basicItems} value=\"shipping\" content={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-4 text-sm font-medium\">Vertical</p>\n                <Stepper\n                    items={basicItems}\n                    orientation=\"vertical\"\n                    value=\"shipping\"\n                    content={false}\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Five sizes scale indicator and typography together.\n        </p>\n        <div class=\"space-y-4\">\n            {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}\n                <div class=\"rounded-lg bg-surface-container-high p-6\">\n                    <p class=\"mb-3 text-xs font-medium tracking-wide uppercase\">{size}</p>\n                    <Stepper items={compactItems} value={2} {size} content={false} linear={false} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            The <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code\n            >\n            prop tints the indicator, separator, and active title.\n        </p>\n        <div class=\"grid gap-4 md:grid-cols-2\">\n            {#each colors as color (color)}\n                <div class=\"rounded-lg bg-surface-container-high p-6\">\n                    <p class=\"mb-3 text-xs font-medium capitalize\">{color}</p>\n                    <Stepper\n                        items={compactItems}\n                        value={2}\n                        {color}\n                        content={false}\n                        linear={false}\n                    />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Icons -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Icons\" class=\"text-lg font-semibold\">\n<a href=\"#Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">icon</code>\n            on an item to replace the default number indicator. Completed steps automatically show a check\n            icon when no\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">icon</code> is set.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Per-item icons (horizontal)</p>\n                <Stepper items={iconItems} value=\"shipping\" content={false} linear={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Per-item icons (vertical)</p>\n                <Stepper\n                    items={iconItems}\n                    value=\"shipping\"\n                    content={false}\n                    orientation=\"vertical\"\n                    linear={false}\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Linear vs Free -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Linear-vs-Free-Navigation\" class=\"text-lg font-semibold\">\n<a href=\"#Linear-vs-Free-Navigation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Linear vs Free Navigation\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            By default Stepper is <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">linear</code\n            >: a click can only advance one step ahead. Set\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >linear={'{false}'}</code\n            >\n            to allow jumping anywhere.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">\n                    Linear (default) · Current: <Badge variant=\"soft\" label={String(linearValue)} />\n                </p>\n                <Stepper items={basicItems} bind:value={linearValue} content={false} />\n                <p class=\"mt-3 text-xs text-on-surface-variant\">\n                    Click any step — only the immediate next one (and prior ones) responds.\n                </p>\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">\n                    Free · Current: <Badge variant=\"soft\" color=\"info\" label={String(freeValue)} />\n                </p>\n                <Stepper items={basicItems} bind:value={freeValue} content={false} linear={false} />\n                <p class=\"mt-3 text-xs text-on-surface-variant\">\n                    Click any step to jump there directly.\n                </p>\n            </div>\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">All steps disabled</p>\n                <Stepper items={basicItems} disabled content={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Per-item disabled</p>\n                <Stepper\n                    items={[\n                        { value: 'a', title: 'Open', description: 'Free' },\n                        {\n                            value: 'b',\n                            title: 'Locked',\n                            description: 'Premium only',\n                            disabled: true\n                        },\n                        { value: 'c', title: 'Open', description: 'Free' }\n                    ]}\n                    linear={false}\n                    content={false}\n                />\n            </div>\n        </div>\n    </section>\n\n    <!-- Imperative API -->\n    <section class=\"space-y-3\">\n        <div class=\"flex flex-wrap items-baseline justify-between gap-2\">\n            <h2 id=\"Imperative-API--bindapi\" class=\"text-lg font-semibold\">\n<a href=\"#Imperative-API--bindapi\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Imperative API — bind:api\n                    </a>\n</h2>\n            <p class=\"text-xs text-on-surface-variant\">\n                Drive the Stepper from outside with Back / Next buttons.\n            </p>\n        </div>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-6\">\n            <Stepper items={basicItems} bind:api bind:value={apiValue}>\n                {#snippet body({ item })}\n                    <div\n                        class=\"flex items-start gap-3 rounded-lg border border-outline-variant bg-surface-container p-4\"\n                    >\n                        <Icon name=\"lucide:info\" size=\"18\" class=\"mt-0.5 shrink-0 text-primary\" />\n                        <div>\n                            <p class=\"text-sm font-medium\">{item.title}</p>\n                            <p class=\"text-sm text-on-surface-variant\">\n                                {item.description}\n                            </p>\n                        </div>\n                    </div>\n                {/snippet}\n            </Stepper>\n            <div class=\"flex flex-wrap items-center gap-2\">\n                <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    leadingIcon=\"lucide:chevron-left\"\n                    label=\"Back\"\n                    disabled={!api?.hasPrev}\n                    onclick={() => api?.prev()}\n                />\n                <Button\n                    color=\"primary\"\n                    size=\"sm\"\n                    trailingIcon=\"lucide:chevron-right\"\n                    label={api?.hasNext ? 'Next' : 'Done'}\n                    disabled={!api?.hasNext}\n                    onclick={() => api?.next()}\n                />\n                <span class=\"ms-auto text-xs text-on-surface-variant\">\n                    Step {(api?.activeIndex ?? 0) + 1} of {basicItems.length}\n                </span>\n            </div>\n        </div>\n    </section>\n\n    <!-- Controlled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Controlled--bindvalue\" class=\"text-lg font-semibold\">\n<a href=\"#Controlled--bindvalue\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Controlled — bind:value\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Two-way bind to drive Stepper from any UI; useful when navigation lives elsewhere on the\n            page.\n        </p>\n        <div class=\"space-y-4 rounded-lg bg-surface-container-high p-6\">\n            <p class=\"text-sm font-medium\">\n                Active: <Badge variant=\"soft\" color=\"info\" label={String(controlledValue)} />\n            </p>\n            <div class=\"flex flex-wrap gap-2\">\n                {#each basicItems as item (item.value)}\n                    <Button\n                        size=\"xs\"\n                        variant={controlledValue === item.value ? 'solid' : 'outline'}\n                        label={item.title}\n                        onclick={() => (controlledValue = item.value ?? '')}\n                    />\n                {/each}\n            </div>\n            <Stepper items={basicItems} bind:value={controlledValue} content={false} />\n        </div>\n    </section>\n\n    <!-- Callback -->\n    <section class=\"space-y-3\">\n        <h2 id=\"onValueChange-Callback\" class=\"text-lg font-semibold\">\n<a href=\"#onValueChange-Callback\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        onValueChange Callback\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-6\">\n            <p class=\"mb-3 text-sm\">\n                Last change:\n                <Badge\n                    variant=\"soft\"\n                    color={lastChange ? 'success' : 'surface'}\n                    label={lastChange || 'None'}\n                />\n            </p>\n            <Stepper\n                items={basicItems}\n                onValueChange={(v) => (lastChange = `Switched to: ${v}`)}\n                content={false}\n            />\n        </div>\n    </section>\n\n    <!-- Custom Snippets -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Snippets\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Snippets\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Snippets\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Override\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">indicator</code\n            >,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">titleSlot</code\n            >,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >descriptionSlot</code\n            >, or\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">body</code> for custom\n            rendering.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Custom indicator</p>\n                <Stepper items={basicItems} value=\"shipping\" content={false} linear={false}>\n                    {#snippet indicator({ number, state })}\n                        <span\n                            class=\"inline-flex size-8 items-center justify-center rounded-full text-sm font-bold {state ===\n                            'completed'\n                                ? 'bg-success text-on-success'\n                                : state === 'active'\n                                  ? 'bg-primary text-on-primary ring-4 ring-primary/20'\n                                  : 'border-2 border-dashed border-outline-variant text-on-surface-variant'}\"\n                            aria-hidden=\"true\"\n                        >\n                            {#if state === 'completed'}\n                                <Icon name=\"lucide:check\" size=\"16\" />\n                            {:else}\n                                {number}\n                            {/if}\n                        </span>\n                    {/snippet}\n                </Stepper>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Custom title with badge</p>\n                <Stepper items={basicItems} value=\"shipping\" content={false} linear={false}>\n                    {#snippet titleSlot({ item, state })}\n                        <span class=\"inline-flex items-center gap-1.5 text-sm font-medium\">\n                            {item.title}\n                            {#if state === 'active'}\n                                <Badge size=\"xs\" variant=\"soft\" color=\"primary\" label=\"Now\" />\n                            {:else if state === 'completed'}\n                                <Badge size=\"xs\" variant=\"soft\" color=\"success\" label=\"Done\" />\n                            {/if}\n                        </span>\n                    {/snippet}\n                </Stepper>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Custom body</p>\n                <Stepper items={basicItems} bind:value={snippetValue}>\n                    {#snippet body({ item, number })}\n                        <div\n                            class=\"flex items-start gap-3 rounded-lg border border-outline-variant bg-surface-container p-4\"\n                        >\n                            <div\n                                class=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary\"\n                            >\n                                <Icon name=\"lucide:sparkles\" size=\"20\" />\n                            </div>\n                            <div>\n                                <p class=\"text-sm font-semibold\">\n                                    Step {number}: {item.title}\n                                </p>\n                                <p class=\"text-sm text-on-surface-variant\">\n                                    Body snippet renders anywhere below the progress bar.\n                                </p>\n                            </div>\n                        </div>\n                    {/snippet}\n                </Stepper>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Custom description</p>\n                <Stepper items={basicItems} value=\"shipping\" content={false} linear={false}>\n                    {#snippet descriptionSlot({ item, state })}\n                        <span\n                            class=\"text-xs {state === 'pending'\n                                ? 'text-on-surface-variant/60 italic'\n                                : 'text-on-surface-variant'}\"\n                        >\n                            {state === 'completed' ? '✓ ' : ''}{item.description}\n                        </span>\n                    {/snippet}\n                </Stepper>\n            </div>\n        </div>\n    </section>\n\n    <!-- UI Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Overrides\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Override slot styles via the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">ui</code> prop,\n            or per-item via\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >items[i].ui</code\n            >.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Square indicators</p>\n                <Stepper\n                    items={compactItems}\n                    value={2}\n                    content={false}\n                    linear={false}\n                    ui={{ indicator: 'rounded-md' }}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Thicker separator</p>\n                <Stepper\n                    items={compactItems}\n                    value={2}\n                    content={false}\n                    linear={false}\n                    ui={{ separator: 'h-1' }}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Bold titles</p>\n                <Stepper\n                    items={basicItems}\n                    value=\"shipping\"\n                    content={false}\n                    linear={false}\n                    ui={{ title: 'font-bold uppercase tracking-wider' }}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-6\">\n                <p class=\"mb-3 text-sm font-medium\">Per-item override</p>\n                <Stepper\n                    items={[\n                        { value: 'a', title: 'Standard', description: 'Normal item' },\n                        {\n                            value: 'b',\n                            title: 'Spotlight',\n                            description: 'Highlighted',\n                            ui: { indicator: 'ring-4 ring-warning/40' }\n                        },\n                        { value: 'c', title: 'Standard', description: 'Normal item' }\n                    ]}\n                    value=\"b\"\n                    content={false}\n                    linear={false}\n                />\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Example: Form Wizard -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World--Form-Wizard\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World--Form-Wizard\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World — Form Wizard\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Multi-step form with per-step validation. The Next button calls a custom validator\n            before invoking\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >api.next()</code\n            >.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-6\">\n            <Stepper\n                items={wizardSteps}\n                bind:api={wizardApi}\n                bind:value={wizardValue}\n                color=\"primary\"\n            >\n                {#snippet body({ item })}\n                    <Form\n                        bind:api={wizardForm}\n                        state={wizardState}\n                        onsubmit={handleWizardSubmit}\n                        class=\"space-y-4 rounded-lg border border-outline-variant bg-surface-container p-5\"\n                    >\n                        {#if item.value === 'account'}\n                            <div class=\"space-y-4\">\n                                <h3 class=\"text-base font-semibold\">Tell us about yourself</h3>\n                                <div class=\"grid gap-3 sm:grid-cols-2\">\n                                    <FormField name=\"firstName\" label=\"First name\" required>\n                                        <Input bind:value={wizardState.firstName} />\n                                    </FormField>\n                                    <FormField name=\"lastName\" label=\"Last name\" required>\n                                        <Input bind:value={wizardState.lastName} />\n                                    </FormField>\n                                </div>\n                                <FormField name=\"email\" label=\"Email\" required>\n                                    <Input type=\"email\" bind:value={wizardState.email} />\n                                </FormField>\n                            </div>\n                        {:else if item.value === 'shipping'}\n                            <div class=\"space-y-4\">\n                                <h3 class=\"text-base font-semibold\">Shipping address</h3>\n                                <FormField name=\"address\" label=\"Street address\" required>\n                                    <Input bind:value={wizardState.address} />\n                                </FormField>\n                                <div class=\"grid gap-3 sm:grid-cols-2\">\n                                    <FormField name=\"city\" label=\"City\" required>\n                                        <Input bind:value={wizardState.city} />\n                                    </FormField>\n                                    <FormField name=\"zip\" label=\"ZIP\" required>\n                                        <Input bind:value={wizardState.zip} />\n                                    </FormField>\n                                </div>\n                                <FormField name=\"notes\" label=\"Delivery notes (optional)\">\n                                    <Textarea bind:value={wizardState.notes} rows={2} />\n                                </FormField>\n                            </div>\n                        {:else}\n                            <div class=\"space-y-4\">\n                                <h3 class=\"text-base font-semibold\">Review</h3>\n                                <div\n                                    class=\"space-y-2 rounded-lg bg-surface-container-highest p-3 text-sm\"\n                                >\n                                    <div>\n                                        <span class=\"text-on-surface-variant\">Name:</span>\n                                        <span class=\"font-medium\"\n                                            >{wizardState.firstName}\n                                            {wizardState.lastName}</span\n                                        >\n                                    </div>\n                                    <div>\n                                        <span class=\"text-on-surface-variant\">Email:</span>\n                                        <span class=\"font-medium\">{wizardState.email}</span>\n                                    </div>\n                                    <div>\n                                        <span class=\"text-on-surface-variant\">Address:</span>\n                                        <span class=\"font-medium\"\n                                            >{wizardState.address}, {wizardState.city}\n                                            {wizardState.zip}</span\n                                        >\n                                    </div>\n                                    {#if wizardState.notes}\n                                        <div>\n                                            <span class=\"text-on-surface-variant\">Notes:</span>\n                                            <span class=\"font-medium\">{wizardState.notes}</span>\n                                        </div>\n                                    {/if}\n                                </div>\n                                <FormField name=\"consent\" required>\n                                    <label class=\"flex items-start gap-2 text-sm\">\n                                        <Checkbox bind:checked={wizardState.consent} />\n                                        I confirm the details above are correct.\n                                    </label>\n                                </FormField>\n                            </div>\n                        {/if}\n\n                        <div class=\"flex flex-wrap items-center gap-2 pt-2\">\n                            <Button\n                                variant=\"outline\"\n                                size=\"sm\"\n                                leadingIcon=\"lucide:chevron-left\"\n                                label=\"Back\"\n                                disabled={!wizardApi?.hasPrev}\n                                onclick={() => wizardApi?.prev()}\n                            />\n                            {#if wizardApi?.hasNext}\n                                <Button\n                                    color=\"primary\"\n                                    size=\"sm\"\n                                    trailingIcon=\"lucide:chevron-right\"\n                                    label=\"Next\"\n                                    onclick={handleWizardNext}\n                                />\n                            {:else}\n                                <Button\n                                    color=\"success\"\n                                    size=\"sm\"\n                                    leadingIcon=\"lucide:check\"\n                                    label=\"Submit\"\n                                    type=\"submit\"\n                                />\n                            {/if}\n                            <span class=\"ms-auto text-xs text-on-surface-variant\">\n                                Step {(wizardApi?.activeIndex ?? 0) + 1} of {wizardSteps.length}\n                            </span>\n                        </div>\n                    </Form>\n                {/snippet}\n            </Stepper>\n\n            {#if wizardSubmitted}\n                <div class=\"mt-4 rounded-lg border border-success/40 bg-success/10 p-4 text-sm\">\n                    <div class=\"mb-2 flex items-center gap-2 font-semibold text-success\">\n                        <Icon name=\"lucide:party-popper\" size=\"18\" />\n                        Submitted!\n                    </div>\n                    <pre\n                        class=\"overflow-x-auto text-xs whitespace-pre-wrap text-on-surface-variant\">{wizardSubmitted}</pre>\n                </div>\n            {/if}\n        </div>\n    </section>\n\n    <!-- Real World Example: Onboarding -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Real-World--Onboarding-Checklist\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World--Onboarding-Checklist\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World — Onboarding Checklist\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Vertical Stepper with rich descriptions and inline actions per step.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-6\">\n            <Stepper\n                items={[\n                    {\n                        value: 'profile',\n                        title: 'Complete your profile',\n                        description: 'Add a photo and bio so teammates recognize you.',\n                        icon: 'lucide:user-circle'\n                    },\n                    {\n                        value: 'team',\n                        title: 'Invite your team',\n                        description: 'Bring teammates so you can collaborate from day one.',\n                        icon: 'lucide:users'\n                    },\n                    {\n                        value: 'integrate',\n                        title: 'Connect your tools',\n                        description: 'GitHub, Slack, Linear — wire everything in one click.',\n                        icon: 'lucide:plug'\n                    },\n                    {\n                        value: 'done',\n                        title: 'You are ready',\n                        description: 'Explore the dashboard or start your first project.',\n                        icon: 'lucide:rocket'\n                    }\n                ]}\n                orientation=\"vertical\"\n                value=\"team\"\n                color=\"success\"\n                linear={false}\n            >\n                {#snippet body({ item, state, active })}\n                    {#if active}\n                        <div\n                            class=\"mt-2 flex items-center gap-2 rounded-lg border border-outline-variant bg-surface-container p-3\"\n                        >\n                            <Icon name={item.icon ?? 'lucide:zap'} size=\"18\" class=\"text-primary\" />\n                            <span class=\"text-sm\">Continue with this step</span>\n                            <Button\n                                class=\"ms-auto\"\n                                size=\"xs\"\n                                color=\"primary\"\n                                label={state === 'completed' ? 'Revisit' : 'Continue'}\n                            />\n                        </div>\n                    {/if}\n                {/snippet}\n            </Stepper>\n        </div>\n    </section>\n</div>\n",
     "tabs": "<script lang=\"ts\">\n    import { Tabs, Badge, Button, Icon, Separator } from '$lib/index.js'\n    import type { TabsItem } from '$lib/index.js'\n\n    const basicItems: TabsItem[] = [\n        {\n            label: 'Account',\n            content: 'Manage your account settings and preferences.',\n            value: 'account'\n        },\n        {\n            label: 'Password',\n            content: 'Change your password and security keys.',\n            value: 'password'\n        },\n        {\n            label: 'Notifications',\n            content: 'Configure notification preferences.',\n            value: 'notifications'\n        }\n    ]\n\n    const iconItems: TabsItem[] = [\n        {\n            label: 'Profile',\n            icon: 'lucide:user',\n            content: 'Update your profile information.',\n            value: 'profile'\n        },\n        {\n            label: 'Security',\n            icon: 'lucide:shield',\n            content: 'Manage security settings.',\n            value: 'security'\n        },\n        {\n            label: 'Billing',\n            icon: 'lucide:credit-card',\n            content: 'View invoices and payments.',\n            value: 'billing'\n        },\n        {\n            label: 'Integrations',\n            icon: 'lucide:plug',\n            content: 'Connect third-party services.',\n            value: 'integrations'\n        }\n    ]\n\n    const disabledItems: TabsItem[] = [\n        { label: 'General', content: 'General settings.', value: 'general' },\n        { label: 'Advanced', content: 'Requires premium.', value: 'advanced', disabled: true },\n        { label: 'About', content: 'Version and license info.', value: 'about' }\n    ]\n\n    const colors = [\n        'primary',\n        'secondary',\n        'tertiary',\n        'success',\n        'warning',\n        'error',\n        'info',\n        'surface'\n    ] as const\n\n    let controlledValue = $state('account')\n    let lastChange = $state('')\n</script>\n\n<div class=\"space-y-8\">\n    <div class=\"space-y-2\">\n        <h1 class=\"text-2xl font-bold\">Tabs</h1>\n        <p class=\"text-on-surface-variant\">\n            A set of layered panels of content, where only one panel is visible at a time. Built on\n            bits-ui Tabs primitive.\n        </p>\n    </div>\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Tabs items={basicItems} />\n        </div>\n    </section>\n\n    <!-- Variants -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Variants\" class=\"text-lg font-semibold\">\n<a href=\"#Variants\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Variants\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >variant</code\n            >\n            to switch between pill and link styles.\n        </p>\n        <div class=\"grid gap-4 md:grid-cols-2\">\n            {#each [{ variant: 'pill' as const, label: 'Pill (default)' }, { variant: 'link' as const, label: 'Link' }] as item (item.variant)}\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <p class=\"mb-3 text-sm font-medium\">{item.label}</p>\n                    <Tabs items={basicItems} variant={item.variant} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Colors -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Colors\" class=\"text-lg font-semibold\">\n<a href=\"#Colors\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Colors\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            The <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">color</code\n            >\n            prop controls the indicator and active text color.\n        </p>\n        <div class=\"space-y-4\">\n            {#each ['pill', 'link'] as variant (variant)}\n                <div>\n                    <p class=\"mb-3 text-sm font-medium capitalize\">{variant} variant</p>\n                    <div class=\"grid gap-4 md:grid-cols-2\">\n                        {#each colors as color (color)}\n                            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                                <p class=\"mb-2 text-xs font-medium capitalize\">{color}</p>\n                                <Tabs\n                                    items={basicItems}\n                                    {color}\n                                    variant={variant as 'pill' | 'link'}\n                                    content={false}\n                                />\n                            </div>\n                        {/each}\n                    </div>\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- Sizes -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Sizes\" class=\"text-lg font-semibold\">\n<a href=\"#Sizes\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Sizes\n                    </a>\n</h2>\n        <div class=\"space-y-4\">\n            {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <p class=\"mb-2 text-xs font-medium uppercase\">{size}</p>\n                    <Tabs items={basicItems} {size} content={false} />\n                </div>\n            {/each}\n        </div>\n    </section>\n\n    <!-- With Icons -->\n    <section class=\"space-y-3\">\n        <h2 id=\"With-Icons\" class=\"text-lg font-semibold\">\n<a href=\"#With-Icons\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        With Icons\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Add leading icons via the <code\n                class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">icon</code\n            >\n            property on each item.\n        </p>\n        <div class=\"grid gap-4 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Pill</p>\n                <Tabs items={iconItems} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Link</p>\n                <Tabs items={iconItems} variant=\"link\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Orientation -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Orientation\" class=\"text-lg font-semibold\">\n<a href=\"#Orientation\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Orientation\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >orientation=\"vertical\"</code\n            >\n            for vertical layout.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Vertical - Pill</p>\n                <Tabs items={iconItems} orientation=\"vertical\" />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Vertical - Link</p>\n                <Tabs items={iconItems} orientation=\"vertical\" variant=\"link\" />\n            </div>\n        </div>\n    </section>\n\n    <!-- Disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <div class=\"grid gap-4 md:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">All disabled</p>\n                <Tabs items={basicItems} disabled />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Individual disabled</p>\n                <Tabs items={disabledItems} />\n            </div>\n        </div>\n    </section>\n\n    <!-- Content -->\n    <section class=\"space-y-3\">\n        <h2 id=\"No-Content\" class=\"text-lg font-semibold\">\n<a href=\"#No-Content\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        No Content\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Set <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >content={'{false}'}</code\n            >\n            to use tabs purely for navigation.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Tabs\n                items={[\n                    { label: 'Overview', value: 'overview' },\n                    { label: 'Tasks', value: 'tasks' },\n                    { label: 'Files', value: 'files' },\n                    { label: 'Members', value: 'members' },\n                    { label: 'Settings', value: 'settings' },\n                    { label: 'Activity', value: 'activity' }\n                ]}\n                content={false}\n            />\n        </div>\n    </section>\n\n    <!-- Controlled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Controlled\" class=\"text-lg font-semibold\">\n<a href=\"#Controlled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Controlled\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Bind <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >value</code\n            >\n            to control the active tab programmatically.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <p class=\"mb-3 text-sm font-medium\">\n                Active: <Badge variant=\"soft\" color=\"info\" label={controlledValue} />\n            </p>\n            <div class=\"mb-3 flex gap-2\">\n                {#each basicItems as item (item.value)}\n                    <Button\n                        size=\"xs\"\n                        variant={controlledValue === item.value ? 'solid' : 'outline'}\n                        label={item.label}\n                        onclick={() => (controlledValue = item.value ?? '')}\n                    />\n                {/each}\n            </div>\n            <Tabs items={basicItems} bind:value={controlledValue} />\n        </div>\n    </section>\n\n    <!-- Callback -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Value-Change-Callback\" class=\"text-lg font-semibold\">\n<a href=\"#Value-Change-Callback\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Value Change Callback\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\"\n                >onValueChange</code\n            >\n            to react to tab changes.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <p class=\"mb-3 text-sm\">\n                Last change: <Badge\n                    variant=\"soft\"\n                    color={lastChange ? 'success' : 'surface'}\n                    label={lastChange || 'None'}\n                />\n            </p>\n            <Tabs items={basicItems} onValueChange={(v) => (lastChange = `Switched to: ${v}`)} />\n        </div>\n    </section>\n\n    <!-- Custom Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Slots\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Use snippets for custom rendering:\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">leading</code>,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">label</code>,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">trailing</code\n            >,\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">body</code>.\n        </p>\n        <div class=\"grid gap-4 lg:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Custom leading</p>\n                <Tabs items={basicItems} variant=\"link\">\n                    {#snippet leading({ active })}\n                        <div\n                            class=\"flex size-6 items-center justify-center rounded-full {active\n                                ? 'bg-primary text-on-primary'\n                                : 'bg-surface-container-highest'}\"\n                        >\n                            <Icon name={active ? 'lucide:check' : 'lucide:circle'} size=\"14\" />\n                        </div>\n                    {/snippet}\n                </Tabs>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Custom label with badge</p>\n                <Tabs items={basicItems}>\n                    {#snippet label({ item })}\n                        <span class=\"flex items-center gap-1.5\">\n                            {item.label}\n                            {#if item.value === 'account'}\n                                <Badge size=\"xs\" variant=\"soft\" color=\"primary\" label=\"New\" />\n                            {/if}\n                        </span>\n                    {/snippet}\n                </Tabs>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Custom trailing</p>\n                <Tabs items={basicItems} variant=\"link\">\n                    {#snippet trailing({ item })}\n                        {#if item.value === 'notifications'}\n                            <Badge size=\"xs\" variant=\"soft\" color=\"error\" label=\"3\" />\n                        {/if}\n                    {/snippet}\n                </Tabs>\n            </div>\n\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-3 text-sm font-medium\">Custom body</p>\n                <Tabs items={basicItems}>\n                    {#snippet body({ item })}\n                        <div class=\"flex items-start gap-3 rounded-lg bg-surface-container p-4\">\n                            <Icon\n                                name=\"lucide:info\"\n                                size=\"18\"\n                                class=\"mt-0.5 shrink-0 text-primary\"\n                            />\n                            <div>\n                                <p class=\"text-sm font-medium\">{item.label}</p>\n                                <p class=\"text-sm text-on-surface-variant\">{item.content}</p>\n                            </div>\n                        </div>\n                    {/snippet}\n                </Tabs>\n            </div>\n        </div>\n    </section>\n\n    <!-- Per-Item Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Per-Item-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#Per-Item-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Per-Item Overrides\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Each item supports\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">class</code>\n            and\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">ui</code>\n            overrides.\n        </p>\n        <div class=\"rounded-lg bg-surface-container-high p-4\">\n            <Tabs\n                items={[\n                    { label: 'Normal', content: 'Standard styling.', value: 'normal' },\n                    { label: 'Bold', content: 'Custom class.', value: 'bold', class: 'font-bold' },\n                    {\n                        label: 'Italic',\n                        content: 'Custom ui.',\n                        value: 'italic',\n                        ui: { trigger: 'italic' }\n                    }\n                ]}\n                variant=\"link\"\n            />\n        </div>\n    </section>\n\n    <!-- UI Overrides -->\n    <section class=\"space-y-3\">\n        <h2 id=\"UI-Overrides\" class=\"text-lg font-semibold\">\n<a href=\"#UI-Overrides\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        UI Overrides\n                    </a>\n</h2>\n        <p class=\"text-sm text-on-surface-variant\">\n            Override slot styles via the\n            <code class=\"rounded bg-surface-container-highest px-1.5 py-0.5 text-xs\">ui</code> prop.\n        </p>\n        <div class=\"grid gap-4 sm:grid-cols-2\">\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">\n                    Custom list background\n                </p>\n                <Tabs\n                    items={basicItems}\n                    ui={{ list: 'bg-surface-container-highest rounded-xl' }}\n                    content={false}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Rounded indicator</p>\n                <Tabs items={basicItems} ui={{ indicator: 'rounded-full' }} content={false} />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Bold triggers</p>\n                <Tabs\n                    items={basicItems}\n                    ui={{ trigger: 'font-bold uppercase tracking-wide' }}\n                    content={false}\n                />\n            </div>\n            <div class=\"rounded-lg bg-surface-container-high p-4\">\n                <p class=\"mb-2 text-sm font-medium text-on-surface-variant\">Custom content</p>\n                <Tabs\n                    items={basicItems}\n                    ui={{\n                        content:\n                            'mt-3 p-4 bg-surface-container rounded-lg border border-outline-variant'\n                    }}\n                />\n            </div>\n        </div>\n    </section>\n\n    <Separator />\n\n    <!-- Real World Examples -->\n    <section class=\"space-y-6\">\n        <h2 id=\"Real-World-Examples\" class=\"text-lg font-semibold\">\n<a href=\"#Real-World-Examples\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Real World Examples\n                    </a>\n</h2>\n\n        <div class=\"space-y-4\">\n            <!-- Settings Page -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">Settings Page</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <div class=\"mb-4\">\n                        <h3 class=\"font-semibold text-on-surface\">Settings</h3>\n                        <p class=\"text-sm text-on-surface-variant\">\n                            Manage your account settings and preferences.\n                        </p>\n                    </div>\n                    <Tabs items={iconItems} variant=\"link\" color=\"primary\">\n                        {#snippet body({ item })}\n                            <div class=\"space-y-4 rounded-lg bg-surface-container p-4\">\n                                {#if item.value === 'profile'}\n                                    <div class=\"flex items-center gap-4\">\n                                        <div\n                                            class=\"flex size-16 items-center justify-center rounded-full bg-primary/10\"\n                                        >\n                                            <Icon\n                                                name=\"lucide:user\"\n                                                size=\"32\"\n                                                class=\"text-primary\"\n                                            />\n                                        </div>\n                                        <div class=\"flex-1\">\n                                            <h4 class=\"font-semibold\">John Doe</h4>\n                                            <p class=\"text-sm text-on-surface-variant\">\n                                                john.doe@example.com\n                                            </p>\n                                        </div>\n                                        <Button\n                                            size=\"sm\"\n                                            variant=\"outline\"\n                                            leadingIcon=\"lucide:pencil\"\n                                            label=\"Edit\"\n                                        />\n                                    </div>\n                                {:else if item.value === 'security'}\n                                    <div class=\"space-y-3\">\n                                        <div\n                                            class=\"flex items-center justify-between rounded-lg bg-surface-container-highest p-3\"\n                                        >\n                                            <div class=\"flex items-center gap-3\">\n                                                <Icon\n                                                    name=\"lucide:shield-check\"\n                                                    size=\"20\"\n                                                    class=\"text-success\"\n                                                />\n                                                <div>\n                                                    <p class=\"text-sm font-medium\">\n                                                        Two-Factor Authentication\n                                                    </p>\n                                                    <p class=\"text-xs text-on-surface-variant\">\n                                                        Add an extra layer of security\n                                                    </p>\n                                                </div>\n                                            </div>\n                                            <Badge\n                                                variant=\"soft\"\n                                                color=\"success\"\n                                                size=\"xs\"\n                                                label=\"Enabled\"\n                                            />\n                                        </div>\n                                        <div\n                                            class=\"flex items-center justify-between rounded-lg bg-surface-container-highest p-3\"\n                                        >\n                                            <div class=\"flex items-center gap-3\">\n                                                <Icon\n                                                    name=\"lucide:key\"\n                                                    size=\"20\"\n                                                    class=\"text-warning\"\n                                                />\n                                                <div>\n                                                    <p class=\"text-sm font-medium\">Password</p>\n                                                    <p class=\"text-xs text-on-surface-variant\">\n                                                        Last changed 30 days ago\n                                                    </p>\n                                                </div>\n                                            </div>\n                                            <Button size=\"xs\" variant=\"outline\" label=\"Change\" />\n                                        </div>\n                                    </div>\n                                {:else if item.value === 'billing'}\n                                    <div class=\"grid grid-cols-3 gap-3\">\n                                        {#each [{ value: 'Pro', label: 'Current Plan', color: 'text-primary' }, { value: '$29', label: 'Monthly', color: 'text-success' }, { value: 'Mar 15', label: 'Next Billing', color: 'text-on-surface' }] as stat (stat.label)}\n                                            <div\n                                                class=\"rounded-lg bg-surface-container-highest p-3 text-center\"\n                                            >\n                                                <p class=\"text-2xl font-bold {stat.color}\">\n                                                    {stat.value}\n                                                </p>\n                                                <p class=\"text-xs text-on-surface-variant\">\n                                                    {stat.label}\n                                                </p>\n                                            </div>\n                                        {/each}\n                                    </div>\n                                {:else}\n                                    <div class=\"space-y-2\">\n                                        {#each [{ name: 'GitHub', icon: 'lucide:github', connected: true }, { name: 'Slack', icon: 'lucide:slack', connected: false }] as svc (svc.name)}\n                                            <div\n                                                class=\"flex items-center justify-between rounded-lg bg-surface-container-highest p-3\"\n                                            >\n                                                <div class=\"flex items-center gap-3\">\n                                                    <Icon name={svc.icon} size=\"20\" />\n                                                    <span class=\"text-sm font-medium\"\n                                                        >{svc.name}</span\n                                                    >\n                                                </div>\n                                                {#if svc.connected}\n                                                    <Badge\n                                                        variant=\"soft\"\n                                                        color=\"success\"\n                                                        size=\"xs\"\n                                                        label=\"Connected\"\n                                                    />\n                                                {:else}\n                                                    <Button\n                                                        size=\"xs\"\n                                                        variant=\"outline\"\n                                                        label=\"Connect\"\n                                                    />\n                                                {/if}\n                                            </div>\n                                        {/each}\n                                    </div>\n                                {/if}\n                            </div>\n                        {/snippet}\n                    </Tabs>\n                </div>\n            </div>\n\n            <!-- Dashboard -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">Dashboard Tabs</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Tabs\n                        items={[\n                            {\n                                label: 'Overview',\n                                icon: 'lucide:layout-dashboard',\n                                value: 'overview'\n                            },\n                            { label: 'Analytics', icon: 'lucide:bar-chart-3', value: 'analytics' },\n                            { label: 'Reports', icon: 'lucide:file-text', value: 'reports' }\n                        ]}\n                        color=\"primary\"\n                    >\n                        {#snippet body({ item })}\n                            {#if item.value === 'overview'}\n                                <div class=\"grid gap-3 sm:grid-cols-3\">\n                                    {#each [{ label: 'Users', value: '12,345', change: '+12.5%', icon: 'lucide:users', iconColor: 'text-primary', changeColor: 'text-success' }, { label: 'Revenue', value: '$48,290', change: '+8.2%', icon: 'lucide:dollar-sign', iconColor: 'text-success', changeColor: 'text-success' }, { label: 'Orders', value: '1,890', change: '-3.1%', icon: 'lucide:shopping-cart', iconColor: 'text-warning', changeColor: 'text-error' }] as stat (stat.label)}\n                                        <div class=\"rounded-lg bg-surface-container p-4\">\n                                            <div class=\"flex items-center gap-2\">\n                                                <Icon\n                                                    name={stat.icon}\n                                                    size=\"18\"\n                                                    class={stat.iconColor}\n                                                />\n                                                <span class=\"text-sm text-on-surface-variant\"\n                                                    >{stat.label}</span\n                                                >\n                                            </div>\n                                            <p class=\"mt-2 text-2xl font-bold\">{stat.value}</p>\n                                            <p class=\"text-xs {stat.changeColor}\">\n                                                {stat.change} from last month\n                                            </p>\n                                        </div>\n                                    {/each}\n                                </div>\n                            {:else if item.value === 'analytics'}\n                                <div\n                                    class=\"flex flex-col items-center justify-center rounded-lg bg-surface-container p-8\"\n                                >\n                                    <Icon\n                                        name=\"lucide:bar-chart-3\"\n                                        size=\"48\"\n                                        class=\"text-on-surface-variant/30\"\n                                    />\n                                    <p class=\"mt-3 text-sm text-on-surface-variant\">\n                                        Analytics charts would be rendered here\n                                    </p>\n                                </div>\n                            {:else}\n                                <div class=\"space-y-2\">\n                                    {#each ['Monthly Revenue Report', 'User Growth Report', 'Conversion Funnel Report'] as report (report)}\n                                        <div\n                                            class=\"flex items-center justify-between rounded-lg bg-surface-container p-3\"\n                                        >\n                                            <div class=\"flex items-center gap-3\">\n                                                <Icon\n                                                    name=\"lucide:file-text\"\n                                                    size=\"18\"\n                                                    class=\"text-on-surface-variant\"\n                                                />\n                                                <span class=\"text-sm\">{report}</span>\n                                            </div>\n                                            <Button\n                                                size=\"xs\"\n                                                variant=\"ghost\"\n                                                leadingIcon=\"lucide:download\"\n                                                label=\"Download\"\n                                            />\n                                        </div>\n                                    {/each}\n                                </div>\n                            {/if}\n                        {/snippet}\n                    </Tabs>\n                </div>\n            </div>\n\n            <!-- Vertical Settings -->\n            <div class=\"space-y-2\">\n                <p class=\"text-sm font-medium\">Vertical Settings</p>\n                <div class=\"rounded-lg bg-surface-container-high p-4\">\n                    <Tabs\n                        items={[\n                            {\n                                label: 'General',\n                                icon: 'lucide:settings',\n                                value: 'general',\n                                content:\n                                    'Configure general application settings like language, timezone, and display preferences.'\n                            },\n                            {\n                                label: 'Appearance',\n                                icon: 'lucide:palette',\n                                value: 'appearance',\n                                content:\n                                    'Customize the look and feel including themes, fonts, and layout.'\n                            },\n                            {\n                                label: 'Privacy',\n                                icon: 'lucide:lock',\n                                value: 'privacy',\n                                content:\n                                    'Control your privacy settings and data sharing preferences.'\n                            },\n                            {\n                                label: 'Notifications',\n                                icon: 'lucide:bell',\n                                value: 'notifications',\n                                content: 'Manage email, push, and in-app notification preferences.'\n                            }\n                        ]}\n                        orientation=\"vertical\"\n                        color=\"primary\"\n                    />\n                </div>\n            </div>\n        </div>\n    </section>\n</div>\n",
     "collapsible": "<script lang=\"ts\">\n    import { Collapsible, Button, Icon, Badge, Separator } from '$lib/index.js'\n\n    let basicOpen = $state(false)\n    let controlledOpen = $state(true)\n</script>\n\n<div class=\"mx-auto max-w-3xl space-y-12 p-8\">\n    <div>\n        <h1 class=\"text-2xl font-bold\">Collapsible</h1>\n        <p class=\"mt-1 text-on-surface-variant\">\n            An interactive component that expands/collapses content.\n        </p>\n    </div>\n\n    <Separator />\n\n    <!-- Basic -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Basic\" class=\"text-lg font-semibold\">\n<a href=\"#Basic\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Basic\n                    </a>\n</h2>\n        <Collapsible>\n            {#snippet trigger({ open, props })}\n                <Button\n                    {...props}\n                    variant=\"subtle\"\n                    trailingIcon={open ? 'lucide:chevron-up' : 'lucide:chevron-down'}\n                >\n                    {open ? 'Hide' : 'Show'} content\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <div class=\"mt-2 rounded-lg border border-outline-variant p-4 text-sm\">\n                    <p>This is the collapsible content. It can contain any elements you need.</p>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Initially Open -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Initially-Open\" class=\"text-lg font-semibold\">\n<a href=\"#Initially-Open\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Initially Open\n                    </a>\n</h2>\n        <Collapsible open>\n            {#snippet trigger({ open, props })}\n                <Button\n                    {...props}\n                    variant=\"outline\"\n                    trailingIcon={open ? 'lucide:minus' : 'lucide:plus'}\n                >\n                    Toggle section\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <div class=\"mt-2 rounded-lg bg-surface-container p-4 text-sm\">\n                    <p>This section is open by default when the page loads.</p>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Controlled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Controlled-bindopen\" class=\"text-lg font-semibold\">\n<a href=\"#Controlled-bindopen\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Controlled (bind:open)\n                    </a>\n</h2>\n        <div class=\"flex items-center gap-2\">\n            <Badge\n                label={controlledOpen ? 'Open' : 'Closed'}\n                color={controlledOpen ? 'success' : 'error'}\n            />\n            <Button variant=\"ghost\" size=\"xs\" onclick={() => (controlledOpen = !controlledOpen)}>\n                Toggle externally\n            </Button>\n        </div>\n        <Collapsible bind:open={controlledOpen}>\n            {#snippet trigger({ open, props })}\n                <Button\n                    {...props}\n                    variant=\"soft\"\n                    color=\"primary\"\n                    trailingIcon={open ? 'lucide:chevron-up' : 'lucide:chevron-down'}\n                >\n                    Controlled collapsible\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <div\n                    class=\"mt-2 rounded-lg border border-primary/30 bg-primary-container/20 p-4 text-sm\"\n                >\n                    <p>\n                        This collapsible is controlled externally via <code\n                            class=\"rounded bg-surface-container px-1\">bind:open</code\n                        >.\n                    </p>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- onOpenChange callback -->\n    <section class=\"space-y-3\">\n        <h2 id=\"onOpenChange-Callback\" class=\"text-lg font-semibold\">\n<a href=\"#onOpenChange-Callback\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        onOpenChange Callback\n                    </a>\n</h2>\n        <!-- eslint-disable-next-line no-console -->\n        <Collapsible bind:open={basicOpen} onOpenChange={(v) => console.log('open changed:', v)}>\n            {#snippet trigger({ open, props })}\n                <Button\n                    {...props}\n                    variant=\"outline\"\n                    color=\"secondary\"\n                    trailingIcon={open ? 'lucide:eye-off' : 'lucide:eye'}\n                >\n                    {open ? 'Collapse' : 'Expand'} (check console)\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <div class=\"mt-2 rounded-lg border border-outline-variant p-4 text-sm\">\n                    <p>\n                        Open the console to see the <code class=\"rounded bg-surface-container px-1\"\n                            >onOpenChange</code\n                        > callback firing.\n                    </p>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Disabled -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Disabled\" class=\"text-lg font-semibold\">\n<a href=\"#Disabled\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Disabled\n                    </a>\n</h2>\n        <Collapsible disabled>\n            {#snippet trigger({ props })}\n                <Button {...props} variant=\"outline\" disabled trailingIcon=\"lucide:chevron-down\">\n                    Cannot toggle (disabled)\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <div class=\"mt-2 rounded-lg border border-outline-variant p-4 text-sm\">\n                    <p>You should never see this content.</p>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Custom trigger (non-Button) -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-Trigger\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-Trigger\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom Trigger\n                    </a>\n</h2>\n        <Collapsible>\n            {#snippet trigger({ open, props })}\n                <div\n                    {...props}\n                    class=\"flex cursor-pointer items-center gap-2 rounded-lg border border-outline-variant px-4 py-3 transition-colors hover:bg-surface-container\"\n                >\n                    <Icon name=\"lucide:settings\" class=\"size-5\" />\n                    <span class=\"flex-1 text-sm font-medium\">Advanced Settings</span>\n                    <Icon\n                        name=\"lucide:chevron-down\"\n                        class=\"size-4 transition-transform duration-200 {open ? 'rotate-180' : ''}\"\n                    />\n                </div>\n            {/snippet}\n            {#snippet content()}\n                <div class=\"mt-1 space-y-3 rounded-lg border border-outline-variant p-4\">\n                    <div class=\"flex items-center justify-between\">\n                        <span class=\"text-sm\">Enable notifications</span>\n                        <Badge label=\"On\" color=\"success\" variant=\"soft\" />\n                    </div>\n                    <div class=\"flex items-center justify-between\">\n                        <span class=\"text-sm\">Auto-save drafts</span>\n                        <Badge label=\"Off\" color=\"error\" variant=\"soft\" />\n                    </div>\n                    <div class=\"flex items-center justify-between\">\n                        <span class=\"text-sm\">Dark mode</span>\n                        <Badge label=\"System\" color=\"info\" variant=\"soft\" />\n                    </div>\n                </div>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Custom UI Slots -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Custom-UI-Slots\" class=\"text-lg font-semibold\">\n<a href=\"#Custom-UI-Slots\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Custom UI Slots\n                    </a>\n</h2>\n        <Collapsible\n            ui={{\n                root: 'rounded-xl border border-outline-variant p-4',\n                content: 'mt-3 border-t border-outline-variant pt-3'\n            }}\n        >\n            {#snippet trigger({ open, props })}\n                <Button\n                    {...props}\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    trailingIcon={open ? 'lucide:chevron-up' : 'lucide:chevron-down'}\n                >\n                    Styled with ui prop\n                </Button>\n            {/snippet}\n            {#snippet content()}\n                <p class=\"text-sm text-on-surface-variant\">\n                    The root has a rounded border and padding. The content has a top border\n                    separator.\n                </p>\n            {/snippet}\n        </Collapsible>\n    </section>\n\n    <Separator />\n\n    <!-- Multiple collapsibles -->\n    <section class=\"space-y-3\">\n        <h2 id=\"Multiple-Collapsibles\" class=\"text-lg font-semibold\">\n<a href=\"#Multiple-Collapsibles\" class=\"group relative inline-flex items-center no-underline hover:underline focus:outline-none focus-visible:underline w-fit\">\n                        <span class=\"absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100 text-primary/60 font-normal text-base leading-none\" aria-hidden=\"true\">#</span>\n                        Multiple Collapsibles\n                    </a>\n</h2>\n        <div class=\"divide-y divide-outline-variant rounded-lg border border-outline-variant\">\n            {#each ['Getting Started', 'Installation', 'Configuration'] as title (title)}\n                <Collapsible ui={{ root: 'px-4' }}>\n                    {#snippet trigger({ open, props })}\n                        <div\n                            {...props}\n                            class=\"flex w-full cursor-pointer items-center justify-between py-3\"\n                        >\n                            <span class=\"text-sm font-medium\">{title}</span>\n                            <Icon\n                                name=\"lucide:chevron-down\"\n                                class=\"size-4 transition-transform duration-200 {open\n                                    ? 'rotate-180'\n                                    : ''}\"\n                            />\n                        </div>\n                    {/snippet}\n                    {#snippet content()}\n                        <div class=\"pb-3 text-sm text-on-surface-variant\">\n                            Content for the \"{title}\" section. Each collapsible operates\n                            independently.\n                        </div>\n                    {/snippet}\n                </Collapsible>\n            {/each}\n        </div>\n    </section>\n</div>\n",