diff --git a/.changeset/plain-base-class-derivations.md b/.changeset/plain-base-class-derivations.md
new file mode 100644
index 00000000..2932c7a0
--- /dev/null
+++ b/.changeset/plain-base-class-derivations.md
@@ -0,0 +1,4 @@
+---
+'svforge': patch
+---
+Simplify the single-use class expressions in Base Badge, Alert, and Card components while preserving reactive variants.
diff --git a/graphify-out/graph.json b/graphify-out/graph.json
index 22d53ab5..7fc82124 100644
--- a/graphify-out/graph.json
+++ b/graphify-out/graph.json
@@ -14684,7 +14684,7 @@
       "label": "children()",
       "file_type": "code",
       "source_file": "packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte",
-      "source_location": "L37",
+      "source_location": "L36",
       "_callable": true,
       "_origin": "ast"
     },
@@ -21932,6 +21932,22 @@
       "source_location": "L19",
       "_origin": "ast"
     },
+    {
+      "id": "tests_base_derived_classes_test",
+      "label": "base-derived-classes.test.ts",
+      "file_type": "code",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L1",
+      "_origin": "ast"
+    },
+    {
+      "id": "tests_base_derived_classes_test_children",
+      "label": "children",
+      "file_type": "code",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L11",
+      "_origin": "ast"
+    },
     {
       "id": "tests_base_vitest_test",
       "label": "base-vitest.test.ts",
@@ -26363,6 +26379,15 @@
       "source_location": "L1",
       "_origin": "ast"
     },
+    {
+      "id": "changeset_plain_base_class_derivations",
+      "label": "plain-base-class-derivations.md",
+      "file_type": "document",
+      "node_kind": "page",
+      "source_file": ".changeset/plain-base-class-derivations.md",
+      "source_location": "L1",
+      "_origin": "ast"
+    },
     {
       "id": "changeset_quiet_lib_imports",
       "label": "quiet-lib-imports.md",
@@ -58825,7 +58850,7 @@
       "relation": "contains",
       "confidence": "EXTRACTED",
       "source_file": "packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte",
-      "source_location": "L37",
+      "source_location": "L36",
       "weight": 1,
       "_origin": "ast"
     },
@@ -74144,6 +74169,82 @@
       "weight": 1,
       "_origin": "ast"
     },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "ref_vitest",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L2",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "ref_testing_library_svelte",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L3",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "ref_svelte",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L4",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "packages_svforge_templates_base_src_lib_components_svforge_ui_alert",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L5",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "packages_svforge_templates_base_src_lib_components_svforge_primitives_badge",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L6",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "packages_svforge_templates_base_src_lib_components_svforge_ui_card",
+      "relation": "imports_from",
+      "context": "import",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L7",
+      "weight": 1,
+      "_origin": "ast"
+    },
+    {
+      "source": "tests_base_derived_classes_test",
+      "target": "tests_base_derived_classes_test_children",
+      "relation": "contains",
+      "confidence": "EXTRACTED",
+      "source_file": "tests/base-derived-classes.test.ts",
+      "source_location": "L11",
+      "weight": 1,
+      "_origin": "ast"
+    },
     {
       "source": "tests_base_vitest_test",
       "target": "ref_vitest",
diff --git a/graphify-out/manifest.json b/graphify-out/manifest.json
index adf3fd2f..85cdd71a 100644
--- a/graphify-out/manifest.json
+++ b/graphify-out/manifest.json
@@ -488,7 +488,7 @@
     "semantic_hash": ""
   },
   "packages/svforge/src/templates.ts": {
-    "ast_hash": "45944ccabfdddddea22cb9f895bd8399",
+    "ast_hash": "3136b546212ced01f45ec40895b95434",
     "semantic_hash": ""
   },
   "packages/svforge/src/upgrade.ts": {
@@ -572,7 +572,7 @@
     "semantic_hash": ""
   },
   "packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte": {
-    "ast_hash": "1770661d69922df5e4ecffbc64116c7b",
+    "ast_hash": "2e4c9fc1f776ce4179de9f01c2fcb8c1",
     "semantic_hash": ""
   },
   "packages/svforge/templates/base/src/lib/components/svforge/primitives/Button.svelte": {
@@ -608,11 +608,11 @@
     "semantic_hash": ""
   },
   "packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte": {
-    "ast_hash": "1ed6de77dc0081213f774263a143f432",
+    "ast_hash": "f76f5ea141808a7bbdbdf68026e0cd69",
     "semantic_hash": ""
   },
   "packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte": {
-    "ast_hash": "4254dfefc2fbc9f17dd1a41f15642544",
+    "ast_hash": "01a989ccc1b348ca5f8bc4271fce47c4",
     "semantic_hash": ""
   },
   "packages/svforge/templates/base/src/lib/components/svforge/ui/Logo.svelte": {
@@ -2102,5 +2102,13 @@
   ".changeset/quiet-lib-imports.md": {
     "ast_hash": "c5f0c8287e0323fa95e78b17fae6eff4",
     "semantic_hash": ""
+  },
+  "tests/base-derived-classes.test.ts": {
+    "ast_hash": "3d63aa4e9d6cf63788d92d839776270b",
+    "semantic_hash": ""
+  },
+  ".changeset/plain-base-class-derivations.md": {
+    "ast_hash": "7778c6938a8841c5a60545fb9b168b42",
+    "semantic_hash": ""
   }
 }
diff --git a/packages/svforge/src/templates.ts b/packages/svforge/src/templates.ts
index f1921324..58de035b 100644
--- a/packages/svforge/src/templates.ts
+++ b/packages/svforge/src/templates.ts
@@ -10,7 +10,7 @@ export const baseFiles = {
   "/lib/components/svforge/layout/Footer.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\tinterface Props extends HTMLAttributes<HTMLElement> {\n\t\tlinks?: { href: string; label: string }[];\n\t\tclass?: string;\n\t\tchildren?: Snippet;\n\t}\n\n\tlet { links = [], class: className, children, ...rest }: Props = $props();\n</script>\n\n<footer class={cn('border-t border-surface-200-800 bg-surface-100-900', className)} {...rest}>\n\t<div class=\"mx-auto max-w-7xl px-4 py-8\">\n\t\t<div class=\"flex flex-col justify-between gap-6 md:flex-row\">\n\t\t\t{#if children}\n\t\t\t\t{@render children()}\n\t\t\t{/if}\n\n\t\t\t{#if links.length}\n\t\t\t\t<div class=\"flex flex-col gap-2\">\n\t\t\t\t\t{#each links as link (link.href)}\n\t\t\t\t\t\t<a href={link.href} class=\"anchor text-sm\">\n\t\t\t\t\t\t\t{link.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t{/each}\n\t\t\t\t</div>\n\t\t\t{/if}\n\t\t</div>\n\n\t\t<div class=\"mt-8 border-t border-surface-200-800 pt-3 text-sm text-surface-700-300\">\n\t\t\t&copy; {new Date().getFullYear()} SVForge. All rights reserved.\n\t\t</div>\n\t</div>\n</footer>\n",
   "/lib/components/svforge/layout/Navbar.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\timport { Button } from '#lib/components/svforge/primitives/index.js';\n\timport ThemeToggle from '#lib/components/svforge/ui/ThemeToggle.svelte';\n\timport Logo from '#lib/components/svforge/ui/Logo.svelte';\n\timport * as m from '#lib/paraglide/messages.js';\n\timport { Menu, X } from '#lib/icons/index.js';\n\n\tinterface Props extends HTMLAttributes<HTMLElement> {\n\t\tbrand?: Snippet;\n\t\tlinks?: { href: string; label: string }[];\n\t\tclass?: string;\n\t}\n\n\tlet { brand, links = [], class: className, ...rest }: Props = $props();\n\tlet mobileOpen = $state(false);\n</script>\n\n<nav class={cn('sticky top-0 z-50 border-b border-surface-200-800 bg-surface-50-950/80 text-surface-950-50 backdrop-blur-md', className)} {...rest}>\n\t<div class=\"mx-auto flex max-w-7xl items-center justify-between px-4 py-3\">\n\t\t<!-- Brand -->\n\t\t<a href=\"/\" class=\"text-xl font-bold\">\n\t\t\t{#if brand}\n\t\t\t\t{@render brand()}\n\t\t\t{:else}\n\t\t\t\t<Logo brandName={m.common_workspace()} />\n\t\t\t{/if}\n\t\t</a>\n\n\t\t<!-- Desktop links -->\n\t\t<div class=\"hidden items-center gap-4 md:flex\">\n\t\t\t{#each links as link (link.href)}\n\t\t\t\t<a href={link.href} class=\"anchor\">\n\t\t\t\t\t{link.label}\n\t\t\t\t</a>\n\t\t\t{/each}\n\t\t\t<ThemeToggle />\n\t\t</div>\n\n\t\t<!-- Mobile toggle -->\n\t\t<Button\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tcolor=\"surface\"\n\t\t\tclass=\"size-11 p-0 md:hidden\"\n\t\t\tonclick={() => (mobileOpen = !mobileOpen)}\n\t\t\taria-label={m.nav_toggle_menu()}\n\t\t\taria-expanded={mobileOpen}\n\t\t>\n\t\t\t{#if mobileOpen}\n\t\t\t\t<X size={20} />\n\t\t\t{:else}\n\t\t\t\t<Menu size={20} />\n\t\t\t{/if}\n\t\t</Button>\n\t</div>\n\n\t<!-- Mobile menu -->\n\t{#if mobileOpen}\n\t\t<div class=\"flex flex-col gap-3 border-t border-surface-200-800 px-4 py-3 md:hidden\">\n\t\t\t{#each links as link (link.href)}\n\t\t\t\t<a href={link.href} class=\"anchor flex min-h-11 items-center\" onclick={() => (mobileOpen = false)}>\n\t\t\t\t\t{link.label}\n\t\t\t\t</a>\n\t\t\t{/each}\n\t\t\t<ThemeToggle />\n\t\t</div>\n\t{/if}\n</nav>\n",
   "/lib/components/svforge/layout/index.ts": "export { default as AuthLayout } from './AuthLayout.svelte';\nexport { default as Footer } from './Footer.svelte';\nexport { default as Navbar } from './Navbar.svelte';\n",
-  "/lib/components/svforge/primitives/Badge.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'filled' | 'outlined' | 'tonal';\n\ttype Color = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';\n\n\tinterface Props extends HTMLAttributes<HTMLSpanElement> {\n\t\tvariant?: Variant;\n\t\tcolor?: Color;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t}\n\n\tlet {\n\t\tvariant = 'filled',\n\t\tcolor = 'primary',\n\t\tclass: className = '',\n\t\tchildren,\n\t\t...rest\n\t}: Props = $props();\n\n\tconst presets = {\n\t\tfilled: {\n\t\t\tprimary: 'preset-filled-primary-400-600',\n\t\t\tsecondary: 'preset-filled-secondary-400-600',\n\t\t\ttertiary: 'preset-filled-tertiary-400-600',\n\t\t\tsuccess: 'preset-filled-success-400-600',\n\t\t\twarning: 'preset-filled-warning-400-600',\n\t\t\terror: 'preset-filled-error-400-600',\n\t\t\tsurface: 'preset-filled-surface-400-600'\n\t\t},\n\t\toutlined: {\n\t\t\tprimary: 'preset-outlined-primary-900-100',\n\t\t\tsecondary: 'preset-outlined-secondary-900-100',\n\t\t\ttertiary: 'preset-outlined-tertiary-900-100',\n\t\t\tsuccess: 'preset-outlined-success-900-100',\n\t\t\twarning: 'preset-outlined-warning-900-100',\n\t\t\terror: 'preset-outlined-error-900-100',\n\t\t\tsurface: 'preset-outlined-surface-900-100'\n\t\t},\n\t\ttonal: {\n\t\t\tprimary: 'preset-tonal-primary',\n\t\t\tsecondary: 'preset-tonal-secondary',\n\t\t\ttertiary: 'preset-tonal-tertiary',\n\t\t\tsuccess: 'preset-tonal-success',\n\t\t\twarning: 'preset-tonal-warning',\n\t\t\terror: 'preset-tonal-error',\n\t\t\tsurface: 'preset-tonal-surface'\n\t\t}\n\t} as const;\n\n\t// #317/#320: Skeleton v5 ships NO badge size utilities (only badge,\n\t// badge-dot, badge-icon) — the `badge` utility owns sizing through\n\t// --badge-size. The former size prop emitted invented per-size classes\n\t// (dead in v5, rejected by svforge check); a smaller/larger badge is a\n\t// theme change (--badge-size), not a local override.\n\tlet presetClass = $derived(presets[variant][color]);\n\n\tlet classes = $derived(cn('badge', presetClass, className));\n</script>\n\n<span class={classes} {...rest}>\n\t{@render children()}\n</span>\n",
+  "/lib/components/svforge/primitives/Badge.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'filled' | 'outlined' | 'tonal';\n\ttype Color = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';\n\n\tinterface Props extends HTMLAttributes<HTMLSpanElement> {\n\t\tvariant?: Variant;\n\t\tcolor?: Color;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t}\n\n\tlet {\n\t\tvariant = 'filled',\n\t\tcolor = 'primary',\n\t\tclass: className = '',\n\t\tchildren,\n\t\t...rest\n\t}: Props = $props();\n\n\tconst presets = {\n\t\tfilled: {\n\t\t\tprimary: 'preset-filled-primary-400-600',\n\t\t\tsecondary: 'preset-filled-secondary-400-600',\n\t\t\ttertiary: 'preset-filled-tertiary-400-600',\n\t\t\tsuccess: 'preset-filled-success-400-600',\n\t\t\twarning: 'preset-filled-warning-400-600',\n\t\t\terror: 'preset-filled-error-400-600',\n\t\t\tsurface: 'preset-filled-surface-400-600'\n\t\t},\n\t\toutlined: {\n\t\t\tprimary: 'preset-outlined-primary-900-100',\n\t\t\tsecondary: 'preset-outlined-secondary-900-100',\n\t\t\ttertiary: 'preset-outlined-tertiary-900-100',\n\t\t\tsuccess: 'preset-outlined-success-900-100',\n\t\t\twarning: 'preset-outlined-warning-900-100',\n\t\t\terror: 'preset-outlined-error-900-100',\n\t\t\tsurface: 'preset-outlined-surface-900-100'\n\t\t},\n\t\ttonal: {\n\t\t\tprimary: 'preset-tonal-primary',\n\t\t\tsecondary: 'preset-tonal-secondary',\n\t\t\ttertiary: 'preset-tonal-tertiary',\n\t\t\tsuccess: 'preset-tonal-success',\n\t\t\twarning: 'preset-tonal-warning',\n\t\t\terror: 'preset-tonal-error',\n\t\t\tsurface: 'preset-tonal-surface'\n\t\t}\n\t} as const;\n\n\t// #317/#320: Skeleton v5 ships NO badge size utilities (only badge,\n\t// badge-dot, badge-icon) — the `badge` utility owns sizing through\n\t// --badge-size. The former size prop emitted invented per-size classes\n\t// (dead in v5, rejected by svforge check); a smaller/larger badge is a\n\t// theme change (--badge-size), not a local override.\n</script>\n\n<span class={cn('badge', presets[variant][color], className)} {...rest}>\n\t{@render children()}\n</span>\n",
   "/lib/components/svforge/primitives/Button.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport * as m from '#lib/paraglide/messages.js';\n\timport type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';\n\timport type { ButtonOrAnchorProps } from './types';\n\n\tconst presets = {\n\t\tfilled: {\n\t\t\tprimary: 'preset-filled-primary-400-600',\n\t\t\tsecondary: 'preset-filled-secondary-400-600',\n\t\t\ttertiary: 'preset-filled-tertiary-400-600',\n\t\t\tsuccess: 'preset-filled-success-400-600',\n\t\t\twarning: 'preset-filled-warning-400-600',\n\t\t\terror: 'preset-filled-error-400-600',\n\t\t\tsurface: 'preset-filled-surface-400-600'\n\t\t},\n\t\toutlined: {\n\t\t\tprimary: 'preset-outlined-primary-900-100',\n\t\t\tsecondary: 'preset-outlined-secondary-900-100',\n\t\t\ttertiary: 'preset-outlined-tertiary-900-100',\n\t\t\tsuccess: 'preset-outlined-success-900-100',\n\t\t\twarning: 'preset-outlined-warning-900-100',\n\t\t\terror: 'preset-outlined-error-900-100',\n\t\t\tsurface: 'preset-outlined-surface-900-100'\n\t\t},\n\t\ttonal: {\n\t\t\tprimary: 'preset-tonal-primary',\n\t\t\tsecondary: 'preset-tonal-secondary',\n\t\t\ttertiary: 'preset-tonal-tertiary',\n\t\t\tsuccess: 'preset-tonal-success',\n\t\t\twarning: 'preset-tonal-warning',\n\t\t\terror: 'preset-tonal-error',\n\t\t\tsurface: 'preset-tonal-surface'\n\t\t},\n\t\tghost: {\n\t\t\tprimary: 'hover:preset-tonal-primary',\n\t\t\tsecondary: 'hover:preset-tonal-secondary',\n\t\t\ttertiary: 'hover:preset-tonal-tertiary',\n\t\t\tsuccess: 'hover:preset-tonal-success',\n\t\t\twarning: 'hover:preset-tonal-warning',\n\t\t\terror: 'hover:preset-tonal-error',\n\t\t\tsurface: 'hover:preset-tonal-surface'\n\t\t}\n\t} as const;\n\n\tlet {\n\t\tvariant = 'filled',\n\t\tcolor = 'primary',\n\t\tsize = 'md',\n\t\thref,\n\t\tloading = false,\n\t\tdisabled = false,\n\t\tloadingLabel = m.common_loading(),\n\t\ttype,\n\t\tclass: className = '',\n\t\tchildren,\n\t\t...rest\n\t}: ButtonOrAnchorProps = $props();\n\n\t// `href` is the authoritative discriminant: a NON-EMPTY string renders the\n\t// anchor, anything else the button. The old `href && !disabled && !loading`\n\t// check was dishonest — it silently demoted disabled/loading links (and\n\t// `href=\"\"`) to `<button>`s, contradicting the href discriminant (#321).\n\tconst isAnchor = $derived(href !== undefined && href !== '');\n\tconst inactive = $derived(disabled || loading);\n\n\t// Branch rest props never cross over (#321): the anchor spread explicitly\n\t// omits EVERY button-only attribute (name, form*, value, popovertarget*,\n\t// command*) — props smuggled in by consumers bypassing the type checker\n\t// never reach the <a>; the button spread strips anchor-only props (target,\n\t// rel, download…) symmetrically.\n\tconst anchorRest = $derived.by(() => {\n\t\tconst {\n\t\t\tonclick: _onclick, // never spread raw — wrapped by handleAnchorClick (#321)\n\t\t\ttype: _type,\n\t\t\tname: _name,\n\t\t\tform: _form,\n\t\t\tformaction: _formaction,\n\t\t\tformenctype: _formenctype,\n\t\t\tformmethod: _formmethod,\n\t\t\tformnovalidate: _formnovalidate,\n\t\t\tformtarget: _formtarget,\n\t\t\tvalue: _value,\n\t\t\tpopovertarget: _popovertarget,\n\t\t\tpopovertargetaction: _popovertargetaction,\n\t\t\tpopover: _popover,\n\t\t\tcommand: _command,\n\t\t\tcommandfor: _commandfor,\n\t\t\t...attrs\n\t\t} = rest as HTMLButtonAttributes & HTMLAnchorAttributes;\n\t\treturn attrs;\n\t});\n\tconst buttonRest = $derived.by(() => {\n\t\tconst {\n\t\t\ttarget: _target,\n\t\t\trel: _rel,\n\t\t\tdownload: _download,\n\t\t\threflang: _hreflang,\n\t\t\tmedia: _media,\n\t\t\tping: _ping,\n\t\t\treferrerpolicy: _referrerpolicy,\n\t\t\t...attrs\n\t\t} = rest as HTMLButtonAttributes & HTMLAnchorAttributes;\n\t\treturn attrs;\n\t});\n\n\t// Activation gate (#321): a disabled/loading anchor stays focusable (the\n\t// aria-disabled pattern) but must be INERT. `pointer-events-none` blocks\n\t// the mouse, yet Enter on a focused anchor still dispatches a click event\n\t// and would navigate. Gating the activation (click, whether from mouse or\n\t// keyboard) covers both paths: inactive → preventDefault() blocks the\n\t// navigation and the consumer handler is skipped; active → call through.\n\tconst handleAnchorClick: HTMLAnchorAttributes['onclick'] = (event) => {\n\t\tif (inactive) {\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\t\tconst consumer = (rest as HTMLAnchorAttributes).onclick;\n\t\tconsumer?.(event);\n\t};\n\n\t// #317/#320: Skeleton v5 sizes are btn-xs…btn-9xl — the medium size\n\t// utility is `btn-base`; there is no invented medium size (svforge check\n\t// rejects it).\n\tconst classes = $derived(\n\t\tcn(\n\t\t\t'btn focus-visible:ring-2 focus-visible:ring-primary-700-300',\n\t\t\tpresets[variant]?.[color] ?? '',\n\t\t\tsize === 'sm' ? 'btn-sm' : size === 'lg' ? 'btn-lg' : 'btn-base',\n\t\t\tinactive ? 'cursor-not-allowed' : 'cursor-pointer',\n\t\t\tclassName\n\t\t)\n\t);\n\t// Anchors lack a native disabled presentation: reduced styling + pointer\n\t// events off stand in for it, aria-disabled announces it to AT.\n\tconst anchorClasses = $derived(cn(classes, inactive && 'pointer-events-none opacity-50'));\n</script>\n\n{#snippet spinner()}\n\t<span\n\t\taria-hidden=\"true\"\n\t\tclass=\"mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-none\"\n\t></span>\n\t<span class=\"sr-only\">{loadingLabel}</span>\n{/snippet}\n\n{#if isAnchor}\n\t<!-- Anchor branch: a link styled as a button stays a link even when\n\t     visually disabled — aria-disabled + reduced styling, never a native\n\t     disabled attribute (invalid on <a>) and never a <button> fallback. -->\n\t<!-- Consumer attributes spread FIRST; href/class and the computed\n\t     aria-disabled / aria-busy land LAST so component state stays\n\t     authoritative — a consumer `aria-disabled=\"false\"` cannot mask a\n\t     disabled/loading state (#321). The consumer onclick is gated through\n\t     handleAnchorClick: a disabled/loading anchor blocks activation\n\t     (preventDefault) instead of navigating on Enter/click (#321). -->\n\t<a\n\t\t{...anchorRest}\n\t\t{href}\n\t\tclass={anchorClasses}\n\t\taria-disabled={inactive || undefined}\n\t\taria-busy={loading || undefined}\n\t\tonclick={handleAnchorClick}\n\t>\n\t\t{#if loading}\n\t\t\t{@render spinner()}\n\t\t{/if}\n\t\t{@render children()}\n\t</a>\n{:else}\n\t<!-- Same pattern as the anchor branch: consumer rest props spread\n\t     FIRST, the component's computed state (type/disabled/aria-busy)\n\t     lands LAST — a consumer `aria-busy=\"false\"` cannot mask loading\n\t     (#321). -->\n\t<button\n\t\t{...buttonRest}\n\t\tclass={classes}\n\t\ttype={type ?? 'button'}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t>\n\t\t{#if loading}\n\t\t\t{@render spinner()}\n\t\t{/if}\n\t\t{@render children()}\n\t</button>\n{/if}\n",
   "/lib/components/svforge/primitives/Checkbox.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { HTMLInputAttributes } from 'svelte/elements';\n\n\tinterface Props extends HTMLInputAttributes {\n\t\tlabel?: string;\n\t\tchecked?: boolean;\n\t\t/** Custom classes go on the checkbox control, not the wrapping label (#321). */\n\t\tclass?: string;\n\t}\n\n\tlet { label, class: className, checked = $bindable(false), ...rest }: Props = $props();\n</script>\n\n<label class=\"flex cursor-pointer items-center gap-2\">\n\t<input type=\"checkbox\" {...rest} class={cn('checkbox border border-surface-600-400 focus-within:ring-primary-700-300! focus-visible:ring-2 focus-visible:ring-primary-700-300', className)} bind:checked />\n\t{#if label}\n\t\t<span>{label}</span>\n\t{/if}\n</label>\n",
   "/lib/components/svforge/primitives/Input.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLInputAttributes } from 'svelte/elements';\n\n\tinterface Props extends HTMLInputAttributes {\n\t\tlabel?: string;\n\t\terror?: string;\n\t\ttrailing?: Snippet;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tlabel,\n\t\terror,\n\t\ttrailing,\n\t\tclass: className,\n\t\tid,\n\t\tvalue = $bindable(''),\n\t\t'aria-describedby': describedBy,\n\t\t...rest\n\t}: Props = $props();\n\n\t// SSR-stable ids: $props.id() is deterministic across server render and\n\t// client hydration. Math.random() here produced different ids on the\n\t// server and client, breaking hydration and label association (#321).\n\tconst uid = $props.id();\n\tconst inputId = $derived(id ?? uid);\n\tconst errorId = $derived(`${inputId}-error`);\n\tconst hasError = $derived(error !== undefined && error !== '');\n\t// The error element is joined to (not replacing) a consumer-provided\n\t// aria-describedby.\n\tconst describedByIds = $derived(\n\t\thasError ? [describedBy, errorId].filter(Boolean).join(' ') : describedBy\n\t);\n</script>\n\n<div class=\"w-full\">\n\t{#if label}\n\t\t<label class=\"label\" for={inputId}>\n\t\t\t{label}\n\t\t</label>\n\t{/if}\n\t<div class=\"relative\">\n\t\t<input\n\t\t\t{...rest}\n\t\t\tid={inputId}\n\t\t\tclass={cn('input min-h-11 border border-surface-600-400 focus:ring-primary-700-300! focus-visible:ring-2 focus-visible:ring-primary-700-300', trailing && 'pr-12', className)}\n\t\t\taria-invalid={hasError || undefined}\n\t\t\taria-describedby={describedByIds}\n\t\t\tbind:value\n\t\t/>\n\t\t{#if trailing}\n\t\t\t<div class=\"absolute inset-y-0 right-0 flex items-center pr-2\">\n\t\t\t\t{@render trailing()}\n\t\t\t</div>\n\t\t{/if}\n\t</div>\n\t{#if hasError}\n\t\t<p id={errorId} class=\"text-error-700-300 mt-1 text-sm\">{error}</p>\n\t{/if}\n</div>\n",
@@ -19,8 +19,8 @@ export const baseFiles = {
   "/lib/components/svforge/primitives/Toggle.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport { Switch } from '@skeletonlabs/skeleton-svelte';\n\timport type { HTMLInputAttributes } from 'svelte/elements';\n\n\tinterface CheckedChangeDetails {\n\t\tchecked: boolean;\n\t}\n\n\tinterface Props {\n\t\t/** Visible label rendered as the switch label. */\n\t\tlabel?: string;\n\t\tchecked?: boolean;\n\t\t/** Hidden-input name — carries the toggle state in native form submissions. */\n\t\tname?: string;\n\t\tdisabled?: boolean;\n\t\trequired?: boolean;\n\t\t/** Associates the switch with a `<form>` by id. */\n\t\tform?: string;\n\t\tonCheckedChange?: (details: CheckedChangeDetails) => void;\n\t\t/**\n\t\t * Typed DOM handlers, forwarded to the underlying hidden input.\n\t\t * Skeleton composes (never replaces) its internal handlers, so the\n\t\t * machine state stays in sync alongside consumer listeners.\n\t\t */\n\t\tonchange?: HTMLInputAttributes['onchange'];\n\t\tonblur?: HTMLInputAttributes['onblur'];\n\t\tonfocus?: HTMLInputAttributes['onfocus'];\n\t\tonclick?: HTMLInputAttributes['onclick'];\n\t\toninput?: HTMLInputAttributes['oninput'];\n\t\tonkeydown?: HTMLInputAttributes['onkeydown'];\n\t\tonkeyup?: HTMLInputAttributes['onkeyup'];\n\t\t/** Custom classes go on the switch track (control), not the label. */\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tlabel,\n\t\tchecked = $bindable(false),\n\t\tname,\n\t\tdisabled,\n\t\trequired,\n\t\tform,\n\t\tonCheckedChange,\n\t\tonchange,\n\t\tonblur,\n\t\tonfocus,\n\t\tonclick,\n\t\toninput,\n\t\tonkeydown,\n\t\tonkeyup,\n\t\tclass: className = ''\n\t}: Props = $props();\n\n\t// Thin composition over the official Skeleton Switch (#321): the wrapper\n\t// only adds the `label` + `bind:checked` ergonomics — markup, styling,\n\t// keyboard support, ARIA and SSR-stable ids come from @skeletonlabs/\n\t// skeleton-svelte. The hidden input keeps native form participation.\n\tfunction handleChange(details: CheckedChangeDetails) {\n\t\tchecked = details.checked;\n\t\tonCheckedChange?.(details);\n\t}\n</script>\n\n<Switch {checked} {name} {disabled} {required} {form} onCheckedChange={handleChange}>\n\t<Switch.Control class={cn('focus-visible:ring-2 focus-visible:ring-primary-700-300', className)}>\n\t\t<Switch.Thumb />\n\t</Switch.Control>\n\t{#if label}\n\t\t<Switch.Label>{label}</Switch.Label>\n\t{/if}\n\t<Switch.HiddenInput {onchange} {onblur} {onfocus} {onclick} {oninput} {onkeydown} {onkeyup} />\n</Switch>\n",
   "/lib/components/svforge/primitives/index.ts": "export { default as Badge } from './Badge.svelte';\nexport { default as Button } from './Button.svelte';\nexport { default as Checkbox } from './Checkbox.svelte';\nexport { default as Input } from './Input.svelte';\nexport { default as Select } from './Select.svelte';\nexport { default as Textarea } from './Textarea.svelte';\nexport { default as Toggle } from './Toggle.svelte';\n",
   "/lib/components/svforge/primitives/types.ts": "/**\n * Plain-TypeScript prop contracts for the primitives (#321).\n *\n * Living in a .ts module — instead of inline in the .svelte files — keeps the\n * discriminated unions and generics importable by type tests (`vitest\n * --typecheck`) and by consumers, without going through Svelte tooling.\n */\nimport type { Snippet } from 'svelte';\nimport type {\n\tHTMLAnchorAttributes,\n\tHTMLButtonAttributes,\n\tHTMLTableAttributes\n} from 'svelte/elements';\n\n// ── Button ───────────────────────────────────────────────────────────────\n\nexport type ButtonVariant = 'filled' | 'outlined' | 'tonal' | 'ghost';\nexport type ButtonColor =\n\t| 'primary'\n\t| 'secondary'\n\t| 'tertiary'\n\t| 'success'\n\t| 'warning'\n\t| 'error'\n\t| 'surface';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\n/** Visual + ergonomic props shared by both branches of the union. */\nexport interface ButtonSharedProps {\n\tvariant?: ButtonVariant;\n\tcolor?: ButtonColor;\n\tsize?: ButtonSize;\n\t/**\n\t * Visual disabled state. The button branch renders a native `disabled`\n\t * attribute; the anchor branch degrades to `aria-disabled` + reduced\n\t * styling — anchors have no native disabled semantics (#321).\n\t */\n\tdisabled?: boolean;\n\tloading?: boolean;\n\t/**\n\t * Text announced to screen readers while `loading` is active — the visual\n\t * spinner is aria-hidden. Defaults to the localized `common_loading` copy.\n\t */\n\tloadingLabel?: string;\n\tclass?: string;\n\tchildren: Snippet;\n}\n\n/**\n * Button branch — rendered when `href` is absent OR an empty string (the\n * runtime discriminant, mirrored exactly). Anchor-only attributes (`target`,\n * `rel`) are rejected here: TypeScript enforces that each branch only carries\n * its own element's attributes (#321). `href` admits `''` so a dynamically\n * computed empty href keeps full button semantics (`type`, `name`, `form`…)\n * instead of being mis-typed into the anchor branch.\n */\nexport type ButtonProps = ButtonSharedProps &\n\tOmit<HTMLButtonAttributes, keyof ButtonSharedProps> & {\n\t\thref?: '' | undefined;\n\t\ttype?: 'button' | 'submit' | 'reset';\n\t};\n\n/**\n * Anchor branch — rendered when `href` is a non-empty string. Button-only\n * semantics (`type`, `name`, `form`) are rejected: a link styled as a button\n * is still a link, and a disabled/loading one keeps anchor semantics via\n * `aria-disabled` instead of falling back to a `<button>` (#321).\n *\n * Non-emptiness is enforced at RUNTIME (an empty href falls back to the\n * button branch): TypeScript cannot express `string & not ''` cleanly, so\n * the type stays the honest plain `string`.\n */\nexport type AnchorProps = ButtonSharedProps &\n\tOmit<HTMLAnchorAttributes, keyof ButtonSharedProps | 'href' | 'type'> & {\n\t\thref: string;\n\t\ttype?: undefined;\n\t};\n\n/**\n * Discriminated union on `href`, mirroring Button.svelte's runtime rule\n * exactly: a non-empty string selects the anchor branch; absence or `''`\n * selects the button branch (#321).\n */\nexport type ButtonOrAnchorProps = ButtonProps | AnchorProps;\n\n// ── Table ────────────────────────────────────────────────────────────────\n\nexport interface TableColumn {\n\tkey: string;\n\tlabel: string;\n\tclass?: string;\n}\n\n/**\n * Stable row identity (#321): a field name on the row object, or a function\n * deriving the key. Array indices are never a valid key source — index keys\n * corrupt keyed reconciliation on insert/remove/reorder.\n */\nexport type TableRowKey<Row> = (keyof Row) & string | ((row: Row) => string | number);\n\n/** Table attributes and content — shared by every `Row` shape. */\ninterface TableBaseProps<Row> extends Omit<HTMLTableAttributes, 'children'> {\n\tcolumns: TableColumn[];\n\trows: Row[];\n\t/** Accessible table caption — plain text or a snippet for rich content. */\n\tcaption?: string | Snippet;\n\tclass?: string;\n\t/** Optional per-cell renderer for rich cells (avatar, badge, actions…). */\n\tchildren?: Snippet<[{ row: Row; col: TableColumn }]>;\n\t/** Rendered in a full-width cell when `rows` is empty. */\n\tempty?: Snippet;\n}\n\n/**\n * Structured table contract (#321): attributes land on the `<table>` element\n * (not an outer div), rows are generic, and the per-cell renderer receives the\n * typed row. Object rows REQUIRE a `rowKey`; primitive rows key on their own\n * value and must not pass one.\n */\nexport type TableProps<Row> = TableBaseProps<Row> &\n\t(Row extends object ? { rowKey: TableRowKey<Row> } : { rowKey?: undefined });\n",
-  "/lib/components/svforge/ui/Alert.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'info' | 'success' | 'warning' | 'error';\n\n\tinterface Props extends HTMLAttributes<HTMLDivElement> {\n\t\tvariant?: Variant;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t}\n\n\tlet { variant = 'info', class: className = '', children, ...rest }: Props = $props();\n\n\tconst presets: Record<Variant, string> = {\n\t// #317/#320: Skeleton v5 has no info color — the informational variant\n\t// maps to the theme's primary tonal preset: an invented info tonal preset\n\t// renders UNSTYLED in v5.\n\t\tinfo: 'preset-tonal-primary',\n\t\tsuccess: 'preset-tonal-success',\n\t\twarning: 'preset-tonal-warning',\n\t\terror: 'preset-tonal-error'\n\t};\n\n\tlet classes = $derived(cn('card p-2', presets[variant], className));\n</script>\n\n<div class={classes} {...rest}>\n\t{@render children()}\n</div>\n",
-  "/lib/components/svforge/ui/Card.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'flat' | 'elevated' | 'outlined';\n\n\tinterface Props extends HTMLAttributes<HTMLDivElement> {\n\t\tvariant?: Variant;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t\theader?: Snippet;\n\t\tfooter?: Snippet;\n\t}\n\n\tlet { variant = 'flat', class: className = '', children, header, footer, ...rest }: Props = $props();\n\n\tconst variantClasses: Record<Variant, string> = {\n\t\tflat: 'card preset-filled-surface-50-950',\n\t\televated: 'card preset-filled-surface-50-950 shadow-lg',\n\t\toutlined: 'card preset-filled-surface-50-950 preset-outlined-surface-600-400'\n\t};\n\n\t// #317: the Skeleton `card` utility owns the container radius\n\t// (border-radius: var(--radius-container)) — never reapply rounded-*.\n\t// `p-4` stays: `card` applies no padding (Tailwind owns local spacing).\n\tlet classes = $derived(cn(variantClasses[variant], 'p-4', className));\n</script>\n\n<div class={classes} {...rest}>\n\t{#if header}\n\t\t<div class=\"mb-3 border-b border-surface-200-800 pb-3\">\n\t\t\t{@render header()}\n\t\t</div>\n\t{/if}\n\n\t{@render children()}\n\n\t{#if footer}\n\t\t<div class=\"mt-3 border-t border-surface-200-800 pt-3\">\n\t\t\t{@render footer()}\n\t\t</div>\n\t{/if}\n</div>\n",
+  "/lib/components/svforge/ui/Alert.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'info' | 'success' | 'warning' | 'error';\n\n\tinterface Props extends HTMLAttributes<HTMLDivElement> {\n\t\tvariant?: Variant;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t}\n\n\tlet { variant = 'info', class: className = '', children, ...rest }: Props = $props();\n\n\tconst presets: Record<Variant, string> = {\n\t// #317/#320: Skeleton v5 has no info color — the informational variant\n\t// maps to the theme's primary tonal preset: an invented info tonal preset\n\t// renders UNSTYLED in v5.\n\t\tinfo: 'preset-tonal-primary',\n\t\tsuccess: 'preset-tonal-success',\n\t\twarning: 'preset-tonal-warning',\n\t\terror: 'preset-tonal-error'\n\t};\n</script>\n\n<div class={cn('card p-2', presets[variant], className)} {...rest}>\n\t{@render children()}\n</div>\n",
+  "/lib/components/svforge/ui/Card.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport type { Snippet } from 'svelte';\n\timport type { HTMLAttributes } from 'svelte/elements';\n\n\ttype Variant = 'flat' | 'elevated' | 'outlined';\n\n\tinterface Props extends HTMLAttributes<HTMLDivElement> {\n\t\tvariant?: Variant;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t\theader?: Snippet;\n\t\tfooter?: Snippet;\n\t}\n\n\tlet { variant = 'flat', class: className = '', children, header, footer, ...rest }: Props = $props();\n\n\tconst variantClasses: Record<Variant, string> = {\n\t\tflat: 'card preset-filled-surface-50-950',\n\t\televated: 'card preset-filled-surface-50-950 shadow-lg',\n\t\toutlined: 'card preset-filled-surface-50-950 preset-outlined-surface-600-400'\n\t};\n\n\t// #317: the Skeleton `card` utility owns the container radius\n\t// (border-radius: var(--radius-container)) — never reapply rounded-*.\n\t// `p-4` stays: `card` applies no padding (Tailwind owns local spacing).\n</script>\n\n<div class={cn(variantClasses[variant], 'p-4', className)} {...rest}>\n\t{#if header}\n\t\t<div class=\"mb-3 border-b border-surface-200-800 pb-3\">\n\t\t\t{@render header()}\n\t\t</div>\n\t{/if}\n\n\t{@render children()}\n\n\t{#if footer}\n\t\t<div class=\"mt-3 border-t border-surface-200-800 pt-3\">\n\t\t\t{@render footer()}\n\t\t</div>\n\t{/if}\n</div>\n",
   "/lib/components/svforge/ui/Logo.svelte": "<script lang=\"ts\">\n\timport { cn } from '#lib/utils/cn.js';\n\timport { SquaresFour } from '#lib/icons/index.js';\n\n\tinterface Props {\n\t\tbrandName?: string;\n\t\tclass?: string;\n\t}\n\n\tlet { brandName = '', class: className = '' }: Props = $props();\n</script>\n\n<span class={cn('inline-flex items-center gap-3 text-base font-semibold text-surface-950-50', className)}>\n\t<span class=\"flex h-9 w-9 items-center justify-center rounded-container preset-tonal-primary\" aria-hidden=\"true\">\n\t\t<SquaresFour size={20} weight=\"fill\" />\n\t</span>\n\t{#if brandName}<span>{brandName}</span>{/if}\n</span>\n",
   "/lib/components/svforge/ui/Seo.svelte": "<script lang=\"ts\">\n\timport { page } from '$app/state';\n\timport { resolveAbsoluteUrl } from '#lib/utils/web.js';\n\n\tinterface Props {\n\t\ttitle: string;\n\t\tdescription: string;\n\t\timage?: string;\n\t\turl?: string;\n\t\ttype?: string;\n\t}\n\n\tlet { title, description, image, url, type = 'website' }: Props = $props();\n\n\tconst resolvedUrl = $derived(resolveAbsoluteUrl(url, page.url.href));\n\tconst resolvedImage = $derived(image ? resolveAbsoluteUrl(image, page.url.href) : undefined);\n\tconst twitterCard = $derived(resolvedImage ? 'summary_large_image' : 'summary');\n</script>\n\n<svelte:head>\n\t<title>{title}</title>\n\t<meta name=\"description\" content={description} />\n\t<link rel=\"canonical\" href={resolvedUrl} />\n\t<meta property=\"og:title\" content={title} />\n\t<meta property=\"og:description\" content={description} />\n\t<meta property=\"og:type\" content={type} />\n\t<meta property=\"og:url\" content={resolvedUrl} />\n\t{#if resolvedImage}\n\t\t<meta property=\"og:image\" content={resolvedImage} />\n\t{/if}\n\t<meta name=\"twitter:card\" content={twitterCard} />\n\t<meta name=\"twitter:title\" content={title} />\n\t<meta name=\"twitter:description\" content={description} />\n\t{#if resolvedImage}\n\t\t<meta name=\"twitter:image\" content={resolvedImage} />\n\t{/if}\n</svelte:head>\n",
   "/lib/components/svforge/ui/Sitemap.ts": "interface SitemapEntry {\n\tpath: string;\n\tlastmod?: string;\n\tchangefreq?: string;\n\tpriority?: number;\n}\n\nconst CHANGE_FREQUENCIES = new Set(['always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never']);\nconst MAX_TEXT_LENGTH = 2_048;\n\nfunction escapeXml(value: string): string {\n\treturn value.replace(/[&<>\"']/g, (character) => ({\n\t\t'&': '&amp;',\n\t\t'<': '&lt;',\n\t\t'>': '&gt;',\n\t\t'\"': '&quot;',\n\t\t\"'\": '&apos;'\n\t})[character]!);\n}\n\nfunction boundedText(value: string | undefined): string | undefined {\n\treturn value && value.length <= MAX_TEXT_LENGTH ? value : undefined;\n}\n\nexport function generateSitemap(baseUrl: string, routes: SitemapEntry[]): string {\n\tconst safeBaseUrl = boundedText(baseUrl) ?? '';\n\tconst entries = routes\n\t\t.map((route) => {\n\t\t\tconst path = boundedText(route.path) ?? '/';\n\t\t\tconst loc = escapeXml(`${safeBaseUrl}${path}`);\n\t\t\tlet xml = `  <url>\\n    <loc>${loc}</loc>`;\n\t\t\tconst lastmod = boundedText(route.lastmod);\n\t\t\tif (lastmod) xml += `\\n    <lastmod>${escapeXml(lastmod)}</lastmod>`;\n\t\t\tif (route.changefreq && CHANGE_FREQUENCIES.has(route.changefreq)) {\n\t\t\t\txml += `\\n    <changefreq>${escapeXml(route.changefreq)}</changefreq>`;\n\t\t\t}\n\t\t\tif (typeof route.priority === 'number' && route.priority >= 0 && route.priority <= 1) {\n\t\t\t\txml += `\\n    <priority>${route.priority}</priority>`;\n\t\t\t}\n\t\t\txml += '\\n  </url>';\n\t\t\treturn xml;\n\t\t})\n\t\t.join('\\n');\n\n\treturn `<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n${entries}\n</urlset>`;\n}\n",
diff --git a/packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte b/packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte
index 03d82894..dd1612aa 100644
--- a/packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte
+++ b/packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte
@@ -56,11 +56,8 @@
 	// --badge-size. The former size prop emitted invented per-size classes
 	// (dead in v5, rejected by svforge check); a smaller/larger badge is a
 	// theme change (--badge-size), not a local override.
-	let presetClass = $derived(presets[variant][color]);
-
-	let classes = $derived(cn('badge', presetClass, className));
 </script>
 
-<span class={classes} {...rest}>
+<span class={cn('badge', presets[variant][color], className)} {...rest}>
 	{@render children()}
 </span>
diff --git a/packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte b/packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte
index 09cedf75..94c13456 100644
--- a/packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte
+++ b/packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte
@@ -22,10 +22,8 @@
 		warning: 'preset-tonal-warning',
 		error: 'preset-tonal-error'
 	};
-
-	let classes = $derived(cn('card p-2', presets[variant], className));
 </script>
 
-<div class={classes} {...rest}>
+<div class={cn('card p-2', presets[variant], className)} {...rest}>
 	{@render children()}
 </div>
diff --git a/packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte b/packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte
index 36020777..ccec54ed 100644
--- a/packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte
+++ b/packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte
@@ -24,10 +24,9 @@
 	// #317: the Skeleton `card` utility owns the container radius
 	// (border-radius: var(--radius-container)) — never reapply rounded-*.
 	// `p-4` stays: `card` applies no padding (Tailwind owns local spacing).
-	let classes = $derived(cn(variantClasses[variant], 'p-4', className));
 </script>
 
-<div class={classes} {...rest}>
+<div class={cn(variantClasses[variant], 'p-4', className)} {...rest}>
 	{#if header}
 		<div class="mb-3 border-b border-surface-200-800 pb-3">
 			{@render header()}
diff --git a/tests/base-derived-classes.test.ts b/tests/base-derived-classes.test.ts
new file mode 100644
index 00000000..82108946
--- /dev/null
+++ b/tests/base-derived-classes.test.ts
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import Alert from '../packages/svforge/templates/base/src/lib/components/svforge/ui/Alert.svelte';
+import Badge from '../packages/svforge/templates/base/src/lib/components/svforge/primitives/Badge.svelte';
+import Card from '../packages/svforge/templates/base/src/lib/components/svforge/ui/Card.svelte';
+
+afterEach(cleanup);
+
+const children = createRawSnippet(() => ({ render: () => '<span>Content</span>' }));
+
+describe('Base single-use class expressions stay reactive', () => {
+	it('updates Badge preset classes when variant and color change', async () => {
+		const { container, rerender } = render(Badge, {
+			props: { children, class: 'custom-badge' }
+		});
+		const badge = container.querySelector('span')!;
+
+		expect(badge.classList).toContain('preset-filled-primary-400-600');
+		expect(badge.classList).toContain('custom-badge');
+
+		await rerender({ children, class: 'custom-badge', variant: 'outlined', color: 'error' });
+
+		expect(badge.classList).toContain('preset-outlined-error-900-100');
+		expect(badge.classList).not.toContain('preset-filled-primary-400-600');
+		expect(badge.classList).toContain('custom-badge');
+	});
+
+	it('updates Alert preset classes while preserving consumer classes', async () => {
+		const { container, rerender } = render(Alert, {
+			props: { children, class: 'custom-alert' }
+		});
+		const alert = container.firstElementChild!;
+
+		expect(alert.classList).toContain('preset-tonal-primary');
+		expect(alert.classList).toContain('custom-alert');
+
+		await rerender({ children, class: 'custom-alert', variant: 'success' });
+
+		expect(alert.classList).toContain('preset-tonal-success');
+		expect(alert.classList).not.toContain('preset-tonal-primary');
+		expect(alert.classList).toContain('custom-alert');
+	});
+
+	it('updates Card variant classes while retaining the Skeleton surface', async () => {
+		const { container, rerender } = render(Card, {
+			props: { children, class: 'custom-card' }
+		});
+		const card = container.firstElementChild!;
+
+		expect(card.classList).toContain('preset-filled-surface-50-950');
+		expect(card.classList).not.toContain('shadow-lg');
+		expect(card.classList).toContain('custom-card');
+
+		await rerender({ children, class: 'custom-card', variant: 'elevated' });
+
+		expect(card.classList).toContain('preset-filled-surface-50-950');
+		expect(card.classList).toContain('shadow-lg');
+		expect(card.classList).toContain('custom-card');
+	});
+});