diff --git a/.gitignore b/.gitignore
index 1051fb72c..0c3a597f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,9 @@ lerna-debug.log*
 # Playwright
 /test-results/
 /playwright-report/
-/playwright/.cache/
\ No newline at end of file
+/playwright/.cache/
+
+# Test temp directories
+temp-test-components/
+temp-test-output/
+test-label-root/
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72e6a3034..75e0adc85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,230 @@
 # Changelog
 
 
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
+## v0.6.0...v2-docs-playground
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.6.0...v2-docs-playground)
+
+### 🚀 Enhancements
+
+- Init props playground ([76cf3abf](https://github.com/kunai-consulting/qwik-design-system/commit/76cf3abf))
+- Initial layout ([88d9efe7](https://github.com/kunai-consulting/qwik-design-system/commit/88d9efe7))
+- Initial automatic playground ([988ab13f](https://github.com/kunai-consulting/qwik-design-system/commit/988ab13f))
+- Add component metadata generation and debug logging to props playground ([d3c974b7](https://github.com/kunai-consulting/qwik-design-system/commit/d3c974b7))
+- Better modularity ([8491255d](https://github.com/kunai-consulting/qwik-design-system/commit/8491255d))
+- Implement piece selector and prop controls carousels ([a6dfcae0](https://github.com/kunai-consulting/qwik-design-system/commit/a6dfcae0))
+- Enhance props playground with unified carousel navigation ([991ba79e](https://github.com/kunai-consulting/qwik-design-system/commit/991ba79e))
+- Enhance component props handling and metadata extraction ([fcd5ac8d](https://github.com/kunai-consulting/qwik-design-system/commit/fcd5ac8d))
+- Enhance prop extraction and type resolution in component props handling ([f868b687](https://github.com/kunai-consulting/qwik-design-system/commit/f868b687))
+- Enhance component metadata extraction and prop handling ([64c75fa2](https://github.com/kunai-consulting/qwik-design-system/commit/64c75fa2))
+
+### 🩹 Fixes
+
+- Improve debug logging for component props parsing ([32613c20](https://github.com/kunai-consulting/qwik-design-system/commit/32613c20))
+
+### 💅 Refactors
+
+- Simplify findComponentDirs function to throw an error when no directories are found ([269e9db0](https://github.com/kunai-consulting/qwik-design-system/commit/269e9db0))
+- Improve component metadata generation and debugging ([1b3d28ad](https://github.com/kunai-consulting/qwik-design-system/commit/1b3d28ad))
+- Enhance component styling and exports in props playground ([2a4ef4b6](https://github.com/kunai-consulting/qwik-design-system/commit/2a4ef4b6))
+- Streamline debug logging and enhance prop extraction logic ([ad78d661](https://github.com/kunai-consulting/qwik-design-system/commit/ad78d661))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <jack.shelton@kunaico.com>
+
 ## v0.5.14...v2-migration
 
 [compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.5.14...v2-migration)
diff --git a/biome.json b/biome.json
index 5f08a98a0..a2b0c5761 100644
--- a/biome.json
+++ b/biome.json
@@ -9,6 +9,7 @@
       "!**/node_modules",
       "!**/server",
       "!**/docs/public/pagefind",
+      "!**/docs/public/component-metadata",
       "!**/lib-types",
       "!**/libs/components/lib/**/*",
       "!**/libs/components/node_modules",
diff --git a/docs/package.json b/docs/package.json
index 71bff3397..5835a07b5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -39,8 +39,9 @@
     "@types/node": "24.9.0",
     "ignore": "^7.0.5",
     "pagefind": "1.2.0",
+    "shiki": "^3.15.0",
     "tailwindcss": "^4.1.3",
-    "typescript": "5.4.5",
+    "typescript": "5.9.3",
     "unified": "^11.0.4",
     "vite": "^7",
     "vite-plugin-image-optimizer": "^1.1.8",
@@ -50,7 +51,8 @@
     "@stackblitz/sdk": "^1.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "rehype-pretty-code": "^0.13.2",
-    "tailwind-merge": "^2.5.0"
+    "magic-regexp": "^0.10.0",
+    "tailwind-merge": "^2.5.0",
+    "@shikijs/twoslash": "^3.15.0"
   }
 }
diff --git a/docs/public/component-metadata/calendar.json b/docs/public/component-metadata/calendar.json
new file mode 100644
index 000000000..f331be489
--- /dev/null
+++ b/docs/public/component-metadata/calendar.json
@@ -0,0 +1,115 @@
+{
+  "componentName": "calendar",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "locale",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "showWeekNumber",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "fullWeeks",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "showDaysOfWeek",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "mode",
+          "type": "union",
+          "unionValues": [
+            "inline",
+            "popover"
+          ],
+          "isBindable": false,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "date",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "The locale used for formatting dates and text"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Whether to show the days of the week header"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "props": [
+        {
+          "name": "openCalendarOnClick",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        }
+      ]
+    },
+    {
+      "name": "Grid",
+      "props": [
+        {
+          "name": "onDateChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    },
+    {
+      "name": "GridDay",
+      "props": [
+        {
+          "name": "showLeadingZeros",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "onDateChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when a date is selected"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/carousel.json b/docs/public/component-metadata/carousel.json
new file mode 100644
index 000000000..8b3efba26
--- /dev/null
+++ b/docs/public/component-metadata/carousel.json
@@ -0,0 +1,119 @@
+{
+  "componentName": "carousel",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "gap",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "itemsPerView",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "draggable",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "align",
+          "type": "union",
+          "unionValues": [
+            "start",
+            "center",
+            "end"
+          ],
+          "isBindable": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "rewind",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "autoplayInterval",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The gap between items"
+        },
+        {
+          "name": "sensitivity",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "Number of items to show at once"
+        },
+        {
+          "name": "move",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Alignment of items within the viewport"
+        },
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "horizontal",
+            "vertical"
+          ],
+          "isBindable": false,
+          "comment": "Whether the carousel should rewind"
+        },
+        {
+          "name": "mousewheel",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Time in milliseconds before the next item plays during autoplay. Defaults to 3000ms."
+        },
+        {
+          "name": "onChange",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The sensitivity of the carousel dragging"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "The sensitivity of the carousel dragging"
+        },
+        {
+          "name": "autoplay",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "The amount of items to move when hitting the next or previous button"
+        }
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "The value for this carousel item. Defaults to string index if not provided."
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/checkbox.json b/docs/public/component-metadata/checkbox.json
new file mode 100644
index 000000000..f373acb4e
--- /dev/null
+++ b/docs/public/component-metadata/checkbox.json
@@ -0,0 +1,56 @@
+{
+  "componentName": "checkbox",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "checked",
+          "type": "union",
+          "unionValues": [
+            "false",
+            "true",
+            "mixed"
+          ],
+          "isBindable": true,
+          "comment": "Event handler called when the checkbox state changes"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Name attribute for the hidden input element"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/checklist.json b/docs/public/component-metadata/checklist.json
new file mode 100644
index 000000000..984022337
--- /dev/null
+++ b/docs/public/component-metadata/checklist.json
@@ -0,0 +1,28 @@
+{
+  "componentName": "checklist",
+  "pieces": [
+    {
+      "name": "HiddenInput",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/collapsible.json b/docs/public/component-metadata/collapsible.json
new file mode 100644
index 000000000..a4cd50e18
--- /dev/null
+++ b/docs/public/component-metadata/collapsible.json
@@ -0,0 +1,64 @@
+{
+  "componentName": "collapsible",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "open",
+          "type": "union",
+          "unionValues": [
+            "false",
+            "true"
+          ],
+          "isBindable": true,
+          "comment": "If true, collapsible will be hidden instead of hidden until found"
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "If true, collapsible will be hidden instead of hidden until found"
+        },
+        {
+          "name": "collapsible",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "If true, collapsible will be hidden instead of hidden until found"
+        },
+        {
+          "name": "disableUntilFound",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "If true, collapsible will be hidden instead of hidden until found"
+        }
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        {
+          "name": "onBeforematch$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/date-input.json b/docs/public/component-metadata/date-input.json
new file mode 100644
index 000000000..d097a91f3
--- /dev/null
+++ b/docs/public/component-metadata/date-input.json
@@ -0,0 +1,63 @@
+{
+  "componentName": "date-input",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when a date is updated"
+        },
+        {
+          "name": "separator",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "Event handler called when a date is updated"
+        },
+        {
+          "name": "date",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "Event handler called when a date is updated"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Event handler called when a date is updated"
+        }
+      ]
+    },
+    {
+      "name": "Segment",
+      "props": [
+        {
+          "name": "segmentSig",
+          "type": "unknown",
+          "isBindable": false
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/field.json b/docs/public/component-metadata/field.json
new file mode 100644
index 000000000..2ef83543c
--- /dev/null
+++ b/docs/public/component-metadata/field.json
@@ -0,0 +1,71 @@
+{
+  "componentName": "field",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Value can be given from either this Root component or a child component. Also value can be given from a custom control, which gets rootValue from the field context."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Value can be given from either this Root component or a child component. Also value can be given from a custom control, which gets rootValue from the field context."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Value can be given from either this Root component or a child component. Also value can be given from a custom control, which gets rootValue from the field context."
+        },
+        {
+          "name": "value",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "Value can be given from either this Root component or a child component. Also value can be given from a custom control, which gets rootValue from the field context."
+        }
+      ]
+    },
+    {
+      "name": "Input",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": ""
+        }
+      ]
+    },
+    {
+      "name": "Textarea",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/file-upload.json b/docs/public/component-metadata/file-upload.json
new file mode 100644
index 000000000..91a3189fc
--- /dev/null
+++ b/docs/public/component-metadata/file-upload.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "file-upload",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/label.json b/docs/public/component-metadata/label.json
new file mode 100644
index 000000000..635099d0b
--- /dev/null
+++ b/docs/public/component-metadata/label.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "label",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/menu.json b/docs/public/component-metadata/menu.json
new file mode 100644
index 000000000..d9c1a5035
--- /dev/null
+++ b/docs/public/component-metadata/menu.json
@@ -0,0 +1,71 @@
+{
+  "componentName": "menu",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onOpenChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The direction to focus on when the menu is opened"
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The direction to focus on when the menu is opened"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "The function to call when an item is selected"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "The item refs of the menu"
+        }
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        {
+          "name": "onSelect$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler called when the item is selected"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Event handler called when the item is selected"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "Event handler called when the item is selected"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Event handler called when the item is selected"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/modal.json b/docs/public/component-metadata/modal.json
new file mode 100644
index 000000000..6ece0760c
--- /dev/null
+++ b/docs/public/component-metadata/modal.json
@@ -0,0 +1,22 @@
+{
+  "componentName": "modal",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "closeOnOutsideClick",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/navbar.json b/docs/public/component-metadata/navbar.json
new file mode 100644
index 000000000..cdab95896
--- /dev/null
+++ b/docs/public/component-metadata/navbar.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "navbar",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/otp.json b/docs/public/component-metadata/otp.json
new file mode 100644
index 000000000..0a2b5fc4a
--- /dev/null
+++ b/docs/public/component-metadata/otp.json
@@ -0,0 +1,55 @@
+{
+  "componentName": "otp",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onComplete$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler for when all OTP items are filled"
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler for when all OTP items are filled"
+        },
+        {
+          "name": "shiftPWManagers",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Event handler for when all OTP items are filled"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "Event handler for when all OTP items are filled"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Event handler for when all OTP items are filled"
+        }
+      ]
+    },
+    {
+      "name": "HiddenInput",
+      "props": [
+        {
+          "name": "pattern",
+          "type": "unknown",
+          "isBindable": false
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/pagination.json b/docs/public/component-metadata/pagination.json
new file mode 100644
index 000000000..2d9a9de35
--- /dev/null
+++ b/docs/public/component-metadata/pagination.json
@@ -0,0 +1,81 @@
+{
+  "componentName": "pagination",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "totalPages",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The total number of pages to display"
+        },
+        {
+          "name": "currentPage",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "The total number of pages to display"
+        },
+        {
+          "name": "onPageChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The total number of pages to display"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "The total number of pages to display"
+        },
+        {
+          "name": "pages",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The total number of pages to display"
+        },
+        {
+          "name": "ellipsis",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The initial page number to display when component loads"
+        },
+        {
+          "name": "siblingCount",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Reactive value that can be controlled via signal. Sets the current active page number"
+        }
+      ]
+    },
+    {
+      "name": "Next",
+      "props": [
+        {
+          "name": "isLast",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Next page navigation button component"
+        }
+      ]
+    },
+    {
+      "name": "Previous",
+      "props": [
+        {
+          "name": "isFirst",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "Previous page navigation button component"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/popover.json b/docs/public/component-metadata/popover.json
new file mode 100644
index 000000000..74e73a420
--- /dev/null
+++ b/docs/public/component-metadata/popover.json
@@ -0,0 +1,40 @@
+{
+  "componentName": "popover",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "hover",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0
+        },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/progress.json b/docs/public/component-metadata/progress.json
new file mode 100644
index 000000000..be56b207e
--- /dev/null
+++ b/docs/public/component-metadata/progress.json
@@ -0,0 +1,30 @@
+{
+  "componentName": "progress",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "min",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Callback to get the label for the current value."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Maximum value of the progress bar."
+        },
+        {
+          "name": "value",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "Maximum value of the progress bar."
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/qr-code.json b/docs/public/component-metadata/qr-code.json
new file mode 100644
index 000000000..f7eef6b6e
--- /dev/null
+++ b/docs/public/component-metadata/qr-code.json
@@ -0,0 +1,29 @@
+{
+  "componentName": "qr-code",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": "",
+          "comment": "The text value to encode in the QR code"
+        },
+        {
+          "name": "level",
+          "type": "union",
+          "unionValues": [
+            "L",
+            "M",
+            "Q",
+            "H"
+          ],
+          "isBindable": false,
+          "comment": "The text value to encode in the QR code"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/radio-group.json b/docs/public/component-metadata/radio-group.json
new file mode 100644
index 000000000..5d542a482
--- /dev/null
+++ b/docs/public/component-metadata/radio-group.json
@@ -0,0 +1,66 @@
+{
+  "componentName": "radio-group",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        },
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "horizontal",
+            "vertical"
+          ],
+          "isBindable": false
+        },
+        {
+          "name": "isError",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false
+        }
+      ]
+    },
+    {
+      "name": "Item",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/render.json b/docs/public/component-metadata/render.json
new file mode 100644
index 000000000..55b47b7b2
--- /dev/null
+++ b/docs/public/component-metadata/render.json
@@ -0,0 +1,34 @@
+{
+  "componentName": "render",
+  "pieces": [
+    {
+      "name": "Render",
+      "props": [
+        {
+          "name": "fallback",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The default element and types if a render prop is not provided"
+        },
+        {
+          "name": "internalRef",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The default element and types if a render prop is not provided"
+        },
+        {
+          "name": "jsxType",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The default element and types if a render prop is not provided"
+        },
+        {
+          "name": "movedProps",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "The default element and types if a render prop is not provided"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/resizable.json b/docs/public/component-metadata/resizable.json
new file mode 100644
index 000000000..464416671
--- /dev/null
+++ b/docs/public/component-metadata/resizable.json
@@ -0,0 +1,27 @@
+{
+  "componentName": "resizable",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "horizontal",
+            "vertical"
+          ],
+          "isBindable": false,
+          "comment": "Direction in which the contents can be resized"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Direction in which the contents can be resized"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/scroll-area.json b/docs/public/component-metadata/scroll-area.json
new file mode 100644
index 000000000..0e2b52d1b
--- /dev/null
+++ b/docs/public/component-metadata/scroll-area.json
@@ -0,0 +1,95 @@
+{
+  "componentName": "scroll-area",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "type",
+          "type": "union",
+          "unionValues": [
+            "hover",
+            "scroll",
+            "auto",
+            "always"
+          ],
+          "isBindable": false,
+          "comment": "Controls when the scrollbars are visible: 'hover', 'scroll', 'auto', or 'always'"
+        },
+        {
+          "name": "hideDelay",
+          "type": "number",
+          "isBindable": false,
+          "initialValue": 0,
+          "comment": "Controls when the scrollbars are visible: 'hover', 'scroll', 'auto', or 'always'"
+        }
+      ]
+    },
+    {
+      "name": "Scrollbar",
+      "props": [
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "vertical",
+            "horizontal"
+          ],
+          "isBindable": false,
+          "comment": "The orientation of the scrollbar"
+        },
+        {
+          "name": "onScroll$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "The orientation of the scrollbar"
+        }
+      ]
+    },
+    {
+      "name": "Thumb",
+      "props": [
+        {
+          "name": "ref",
+          "type": "unknown",
+          "isBindable": false,
+          "comment": "Reference to the thumb element"
+        },
+        {
+          "name": "onDragStart$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Reference to the thumb element"
+        },
+        {
+          "name": "onDragMove$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Reference to the thumb element"
+        },
+        {
+          "name": "onDragEnd$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Reference to the thumb element"
+        }
+      ]
+    },
+    {
+      "name": "ViewPort",
+      "props": [
+        {
+          "name": "onScroll$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Event handler for scroll events"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/select.json b/docs/public/component-metadata/select.json
new file mode 100644
index 000000000..eca68bd78
--- /dev/null
+++ b/docs/public/component-metadata/select.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "select",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/slider.json b/docs/public/component-metadata/slider.json
new file mode 100644
index 000000000..0b44b1d58
--- /dev/null
+++ b/docs/public/component-metadata/slider.json
@@ -0,0 +1,44 @@
+{
+  "componentName": "slider",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "value",
+          "type": "unknown",
+          "isBindable": true,
+          "comment": "Root component that provides slider context and handles core slider functionality"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Root component that provides slider context and handles core slider functionality"
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "isBindable": true,
+          "initialValue": 0,
+          "comment": "Root component that provides slider context and handles core slider functionality"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "isBindable": true,
+          "initialValue": 0,
+          "comment": "Root component that provides slider context and handles core slider functionality"
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "isBindable": true,
+          "initialValue": 0,
+          "comment": "Root component that provides slider context and handles core slider functionality"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/switch.json b/docs/public/component-metadata/switch.json
new file mode 100644
index 000000000..451ea9b59
--- /dev/null
+++ b/docs/public/component-metadata/switch.json
@@ -0,0 +1,52 @@
+{
+  "componentName": "switch",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true,
+          "comment": "Initial checked state of the switch"
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Initial checked state of the switch"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Initial checked state of the switch"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "Initial checked state of the switch"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "Initial checked state of the switch"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "Initial checked state of the switch"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/table.json b/docs/public/component-metadata/table.json
new file mode 100644
index 000000000..007cfa24a
--- /dev/null
+++ b/docs/public/component-metadata/table.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "table",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/tabs.json b/docs/public/component-metadata/tabs.json
new file mode 100644
index 000000000..514465aca
--- /dev/null
+++ b/docs/public/component-metadata/tabs.json
@@ -0,0 +1,69 @@
+{
+  "componentName": "tabs",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "selectOnFocus",
+          "type": "boolean",
+          "isBindable": false,
+          "initialValue": false,
+          "comment": "If the consumer does not pass a distinct value, then we set the value to the index as a string, to handle types and conditional logic easier"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": true,
+          "initialValue": "",
+          "comment": "If the consumer does not pass a distinct value, then we set the value to the index as a string, to handle types and conditional logic easier"
+        },
+        {
+          "name": "orientation",
+          "type": "union",
+          "unionValues": [
+            "horizontal",
+            "vertical"
+          ],
+          "isBindable": true,
+          "comment": "If the consumer does not pass a distinct value, then we set the value to the index as a string, to handle types and conditional logic easier"
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false,
+          "comment": "If the consumer does not pass a distinct value, then we set the value to the index as a string, to handle types and conditional logic easier"
+        }
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        }
+      ]
+    },
+    {
+      "name": "Trigger",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "isBindable": false,
+          "initialValue": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/toggle.json b/docs/public/component-metadata/toggle.json
new file mode 100644
index 000000000..f5df2e2d8
--- /dev/null
+++ b/docs/public/component-metadata/toggle.json
@@ -0,0 +1,38 @@
+{
+  "componentName": "toggle",
+  "pieces": [
+    {
+      "name": "Root",
+      "props": [
+        {
+          "name": "onChange$",
+          "type": "function",
+          "isBindable": false,
+          "isFunction": true
+        },
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "isBindable": true,
+          "initialValue": false
+        }
+      ]
+    },
+    {
+      "name": "Indicator",
+      "props": [
+        {
+          "name": "fallback",
+          "type": "unknown",
+          "isBindable": false
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/tree.json b/docs/public/component-metadata/tree.json
new file mode 100644
index 000000000..f0a901363
--- /dev/null
+++ b/docs/public/component-metadata/tree.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "tree",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/public/component-metadata/visually-hidden.json b/docs/public/component-metadata/visually-hidden.json
new file mode 100644
index 000000000..7455d95f8
--- /dev/null
+++ b/docs/public/component-metadata/visually-hidden.json
@@ -0,0 +1,4 @@
+{
+  "componentName": "visually-hidden",
+  "pieces": []
+}
\ No newline at end of file
diff --git a/docs/src/docs-widgets/action/action.tsx b/docs/src/docs-widgets/action/action.tsx
index 121f0d0a9..e80a17e79 100644
--- a/docs/src/docs-widgets/action/action.tsx
+++ b/docs/src/docs-widgets/action/action.tsx
@@ -2,7 +2,7 @@ import { type PropsOf, Slot, component$ } from "@qwik.dev/core";
 import { type VariantProps, cva } from "class-variance-authority";
 import { cn } from "../../utils/cn";
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   "px-2 py-2.5 border-[1.6px] text-sm leading-[142.857%] flex items-center gap-2 z-2 relative transform hover:-translate-[2px] transition-transform duration-300",
   {
     variants: {
@@ -18,7 +18,7 @@ const buttonVariants = cva(
   }
 );
 
-const shadowVariants = cva("absolute inset-0 z-1 translate-1", {
+export const shadowVariants = cva("absolute inset-0 z-1 translate-1", {
   variants: {
     variant: {
       primary: "bg-[#6C2CC4]",
diff --git a/docs/src/docs-widgets/header/header.tsx b/docs/src/docs-widgets/header/header.tsx
index 583a8d52b..cdd626077 100644
--- a/docs/src/docs-widgets/header/header.tsx
+++ b/docs/src/docs-widgets/header/header.tsx
@@ -141,7 +141,7 @@ const DesktopNav = component$(() => {
   const restOfItems = navData.slice(1);
 
   return (
-    <Navbar.Root class="hidden lg:block px-6 bg-white fixed top-6 w-full rounded-2xl border-[1.6px] border-blue-300 max-w-[650px] shadow-[6px_6px_0_0px_var(--color-blue-200)]">
+    <Navbar.Root class="hidden xl:block px-6 bg-white fixed top-6 w-full rounded-2xl border-[1.6px] border-blue-300 max-w-[600px] shadow-[6px_6px_0_0px_var(--color-blue-200)]">
       <Navbar.List class="flex items-center justify-between">
         <Navbar.Item>
           <Navbar.ItemLink href={firstItem.href} class="flex items-center gap-2">
@@ -166,7 +166,7 @@ const DesktopNav = component$(() => {
                 </Navbar.ItemTrigger>
                 <Navbar.ItemContent
                   class="open:grid gap-4 shadow-[6px_6px_0_0px_var(--color-blue-200)] rounded-2xl p-4 border-[1.6px] border-blue-300 transition-[opacity,display,overlay] transition-discrete duration-[325ms] ease-in-out open:animate-to-visible not-open:animate-from-visible opacity-0"
-                  style={{ ...getContentGridTemplate(item.label), width: "650px" }}
+                  style={{ ...getContentGridTemplate(item.label), width: "600px" }}
                   ui-mega-popover
                 >
                   {item.links?.map((link) => {
@@ -220,7 +220,7 @@ const DesktopNav = component$(() => {
 
 const MobileNav = component$(() => {
   return (
-    <div class="flex items-center justify-between w-full h-16 lg:hidden bg-white border-b-2 border-lavender-200">
+    <div class="flex items-center justify-between w-full h-16 xl:hidden bg-white border-b-2 border-lavender-200 fixed top-0">
       <a href="/" class="p-4 flex items-center gap-2" aria-label="QDS Home">
         <QwikLogo />
         <span class="font-arcade text-xl">QDS</span>
diff --git a/docs/src/docs-widgets/playground/playground.tsx b/docs/src/docs-widgets/playground/playground.tsx
index da949096d..6bc860e3f 100644
--- a/docs/src/docs-widgets/playground/playground.tsx
+++ b/docs/src/docs-widgets/playground/playground.tsx
@@ -1,31 +1,88 @@
-import { type Component, component$ } from "@qwik.dev/core";
+import { type Component, component$, useSignal, useTask$ } from "@qwik.dev/core";
+import { createHighlighter } from "shiki";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { addTwoslashAnnotations, getTwoslashTransformer } from "./two-slash";
 
-type PlaygroundConfig = {
-  controls?: string[];
+const jsEngine = createJavaScriptRegexEngine();
+
+let highlighterPromise: ReturnType<typeof createHighlighter> | null = null;
+
+const getHighlighter = async () => {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ["github-light"],
+      langs: ["javascript", "typescript", "tsx"],
+      engine: jsEngine
+    });
+  }
+  return highlighterPromise;
 };
 
+const htmlCache = new Map<string, string>();
+const MAX_CACHE_SIZE = 100;
+
+function hashString(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash.toString(36);
+}
+
+function setCache(key: string, value: string) {
+  if (htmlCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = htmlCache.keys().next().value;
+    if (firstKey) {
+      htmlCache.delete(firstKey);
+    }
+  }
+  htmlCache.set(key, value);
+}
+
 type PlaygroundProps = {
-  // biome-ignore lint/suspicious/noExplicitAny: template can have any props
   template: Component<any>;
-  config?: PlaygroundConfig;
+  source?: string;
 };
 
-export const Playground = component$<PlaygroundProps>(
-  ({ template: Template, config }) => {
-    return (
-      <div class="p-6 border-[1.6px] border-blue-500 rounded-2xl shadow-[6px_6px_0_0px_var(--color-blue-200)]">
-        <div class="mb-4">
-          <h3 class="font-semibold mb-2">Playground</h3>
-          {config?.controls && (
-            <div class="text-sm text-gray-600">
-              Controls: {config.controls.join(", ")}
-            </div>
-          )}
-        </div>
-        <div class="p-8 bg-gray-50 flex items-center justify-center">
-          <Template />
-        </div>
+export const Playground = component$<PlaygroundProps>((props) => {
+  const { template: Template, ..._rest } = props;
+  const code = useSignal(props.source || "No source provided");
+
+  useTask$(async ({ track }) => {
+    const sourceCode = track(() => props.source) || "No source provided";
+
+    const cacheKey = hashString(sourceCode);
+    const cached = htmlCache.get(cacheKey);
+    if (cached) {
+      code.value = cached;
+      return;
+    }
+
+    const shiki = await getHighlighter();
+
+    const annotatedCode = addTwoslashAnnotations(sourceCode);
+
+    const html = shiki.codeToHtml(annotatedCode, {
+      lang: "tsx",
+      theme: "github-light",
+      transformers: [getTwoslashTransformer()]
+    });
+
+    setCache(cacheKey, html);
+    code.value = html;
+  });
+
+  return (
+    <div class="border-[1.6px] border-blue-500 rounded-2xl shadow-[6px_6px_0_0px_var(--color-blue-200)]">
+      <div class="p-10 rounded-4xl bg-white flex items-center justify-center">
+        <Template />
       </div>
-    );
-  }
-);
+      <div
+        class="twoslash w-full h-full p-4 bg-white text-sm rounded-4xl"
+        dangerouslySetInnerHTML={code.value}
+      />
+    </div>
+  );
+});
diff --git a/docs/src/docs-widgets/playground/two-slash.ts b/docs/src/docs-widgets/playground/two-slash.ts
new file mode 100644
index 000000000..07948a104
--- /dev/null
+++ b/docs/src/docs-widgets/playground/two-slash.ts
@@ -0,0 +1,187 @@
+import { rendererRich, transformerTwoslash } from "@shikijs/twoslash";
+import {
+  charIn,
+  charNotIn,
+  createRegExp,
+  digit,
+  exactly,
+  letter,
+  maybe,
+  oneOrMore,
+  whitespace
+} from "magic-regexp";
+
+const REGEX_IMPORT_START_PATTERN = createRegExp(
+  whitespace.times.any().grouped().at.lineStart(),
+  exactly("import"),
+  whitespace.times.atLeast(1)
+);
+const REGEX_IMPORT_START = new RegExp(REGEX_IMPORT_START_PATTERN.source);
+
+const REGEX_NAMED_IMPORT_PATTERN = createRegExp(
+  exactly("import"),
+  whitespace.times.atLeast(1),
+  exactly("{"),
+  charNotIn("}").times.any().grouped(),
+  exactly("}")
+);
+const REGEX_NAMED_IMPORT = new RegExp(REGEX_NAMED_IMPORT_PATTERN.source);
+
+const REGEX_DEFAULT_IMPORT_PATTERN = createRegExp(
+  exactly("import"),
+  whitespace.times.atLeast(1),
+  oneOrMore(letter.or(digit).or(charIn("_"))).grouped(),
+  whitespace.times.atLeast(1),
+  exactly("from")
+);
+const REGEX_DEFAULT_IMPORT = new RegExp(REGEX_DEFAULT_IMPORT_PATTERN.source);
+
+const REGEX_VAR_DECL_PATTERN = createRegExp(
+  whitespace.times.any().grouped().at.lineStart(),
+  exactly("const").or(exactly("let")).or(exactly("var")).grouped(),
+  whitespace.times.atLeast(1),
+  oneOrMore(letter.or(digit).or(charIn("_"))).grouped(),
+  whitespace.times.any(),
+  exactly("=")
+);
+const REGEX_VAR_DECL = new RegExp(REGEX_VAR_DECL_PATTERN.source);
+
+const REGEX_FUNCTION_PATTERN = createRegExp(
+  whitespace.times.any().grouped().at.lineStart(),
+  maybe(exactly("export").and(whitespace.times.atLeast(1))),
+  maybe(exactly("async").and(whitespace.times.atLeast(1))),
+  exactly("function"),
+  whitespace.times.atLeast(1),
+  oneOrMore(letter.or(digit).or(charIn("_"))).grouped(),
+  whitespace.times.any(),
+  exactly("(")
+);
+const REGEX_FUNCTION = new RegExp(REGEX_FUNCTION_PATTERN.source);
+
+const REGEX_EXISTING_ANNOTATION_PATTERN = createRegExp(
+  exactly("//"),
+  whitespace.times.any(),
+  exactly("^?").or(exactly("@errors")).grouped()
+);
+const REGEX_EXISTING_ANNOTATION = new RegExp(REGEX_EXISTING_ANNOTATION_PATTERN.source);
+
+let twoslashTransformer: ReturnType<typeof transformerTwoslash> | null = null;
+
+export const getTwoslashTransformer = () => {
+  if (!twoslashTransformer) {
+    twoslashTransformer = transformerTwoslash({
+      renderer: rendererRich({
+        errorRendering: "hover"
+      }),
+      throws: false,
+      onTwoslashError: (error) => {
+        console.debug("Twoslash error (ignored):", error);
+      },
+      twoslashOptions: {
+        compilerOptions: {
+          jsx: 4,
+          jsxImportSource: "@qwik.dev/core",
+          target: 2,
+          module: 99,
+          lib: ["ES2023", "DOM", "DOM.Iterable"],
+          moduleResolution: 100,
+          esModuleInterop: true,
+          skipLibCheck: true,
+          strict: false
+        }
+      }
+    });
+  }
+  return twoslashTransformer;
+};
+
+export function addTwoslashAnnotations(code: string): string {
+  const errorSuppression = "// @errors: 2322\n";
+
+  const lines = code.split("\n");
+  const annotated: string[] = [];
+  annotated.length = lines.length * 2;
+  let writeIndex = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (REGEX_EXISTING_ANNOTATION.test(line)) {
+      annotated[writeIndex++] = line;
+      continue;
+    }
+
+    const importMatch = REGEX_IMPORT_START.exec(line);
+    if (importMatch && importMatch[1] !== undefined) {
+      annotated[writeIndex++] = line;
+      const indent = importMatch[1];
+      REGEX_IMPORT_START.lastIndex = 0;
+
+      const namedImportMatch = REGEX_NAMED_IMPORT.exec(line);
+      if (namedImportMatch && namedImportMatch[1] !== undefined) {
+        const firstIdentifier = namedImportMatch[1].trim().split(",")[0].trim();
+        const braceContent = namedImportMatch[1];
+        const identifierInContent = braceContent.indexOf(firstIdentifier);
+        if (identifierInContent > -1) {
+          const braceStart = line.indexOf("{") + 1;
+          const identifierStart = braceStart + identifierInContent;
+          const spaces = Math.max(0, identifierStart - indent.length);
+          annotated[writeIndex++] = `${indent}${" ".repeat(spaces)}// ^?`;
+        }
+        REGEX_NAMED_IMPORT.lastIndex = 0;
+      } else {
+        const defaultImportMatch = REGEX_DEFAULT_IMPORT.exec(line);
+        if (
+          defaultImportMatch &&
+          defaultImportMatch[1] !== undefined &&
+          defaultImportMatch.index !== undefined
+        ) {
+          const identifier = defaultImportMatch[1];
+          const matchIndex = defaultImportMatch.index;
+          const fullMatch = defaultImportMatch[0];
+          const identifierOffset = fullMatch.indexOf(identifier);
+          if (identifierOffset > -1) {
+            const identifierStart = matchIndex + identifierOffset;
+            const spaces = Math.max(0, identifierStart - indent.length);
+            annotated[writeIndex++] = `${indent}${" ".repeat(spaces)}// ^?`;
+          }
+          REGEX_DEFAULT_IMPORT.lastIndex = 0;
+        }
+      }
+      continue;
+    }
+
+    const varMatch = REGEX_VAR_DECL.exec(line);
+    if (varMatch && varMatch[1] !== undefined && varMatch[3] !== undefined) {
+      annotated[writeIndex++] = line;
+      const indent = varMatch[1];
+      const varName = varMatch[3];
+      const matchIndex = varMatch.index;
+      const varNameOffset = varMatch[0].indexOf(varName);
+      const varNameStart = matchIndex + varNameOffset;
+      const spaces = Math.max(0, varNameStart - indent.length);
+      annotated[writeIndex++] = `${indent}${" ".repeat(spaces)}// ^?`;
+      REGEX_VAR_DECL.lastIndex = 0;
+      continue;
+    }
+
+    const funcMatch = REGEX_FUNCTION.exec(line);
+    if (funcMatch && funcMatch[1] !== undefined && funcMatch[2] !== undefined) {
+      annotated[writeIndex++] = line;
+      const indent = funcMatch[1];
+      const funcName = funcMatch[2];
+      const matchIndex = funcMatch.index;
+      const funcNameOffset = funcMatch[0].indexOf(funcName);
+      const funcNameStart = matchIndex + funcNameOffset;
+      const spaces = Math.max(0, funcNameStart - indent.length);
+      annotated[writeIndex++] = `${indent}${" ".repeat(spaces)}// ^?`;
+      REGEX_FUNCTION.lastIndex = 0;
+      continue;
+    }
+
+    annotated[writeIndex++] = line;
+  }
+
+  annotated.length = writeIndex;
+  return errorSuppression + annotated.join("\n");
+}
diff --git a/docs/src/docs-widgets/props-playground/prop-controls.tsx b/docs/src/docs-widgets/props-playground/prop-controls.tsx
new file mode 100644
index 000000000..1b031c054
--- /dev/null
+++ b/docs/src/docs-widgets/props-playground/prop-controls.tsx
@@ -0,0 +1,88 @@
+import type { ComponentPiece } from "@qds.dev/tools/docs";
+import { Carousel } from "@qds.dev/ui";
+import { component$, Signal, useContext } from "@qwik.dev/core";
+import { debug, propsPlaygroundContextId } from "./props-playground";
+import { BooleanValue, StringValue, UnionValue } from "./value-components";
+
+/**
+ * Individual prop control component
+ */
+type PropControlProps = {
+  prop: ComponentPiece["props"][number];
+  value: unknown;
+};
+
+export const PropControl = component$<PropControlProps>(({ prop, value }) => {
+  const context = useContext(propsPlaygroundContextId);
+
+  debug(
+    context.debug,
+    `Rendering prop control: ${prop.name} (type: ${prop.type}, value: ${JSON.stringify(value)})`
+  );
+
+  return (
+    <>
+      {prop.type === "boolean" && (
+        <BooleanValue
+          name={prop.name}
+          value={value as boolean}
+          isBindable={prop.isBindable}
+        />
+      )}
+
+      {prop.type === "string" && (
+        <StringValue
+          name={prop.name}
+          value={value as string}
+          isBindable={prop.isBindable}
+        />
+      )}
+
+      {prop.type === "union" && prop.unionValues && (
+        <UnionValue
+          name={prop.name}
+          value={value as string}
+          unionValues={prop.unionValues}
+          isBindable={prop.isBindable}
+        />
+      )}
+    </>
+  );
+});
+
+/**
+ * Props controls carousel component
+ */
+type PropsControlsCarouselProps = {
+  propsSlides: ComponentPiece["props"][number][][];
+  currentValues: Record<string, unknown>;
+  "bind:value"?: Signal<string>;
+};
+
+export const PropsControlsCarousel = component$<PropsControlsCarouselProps>(
+  ({ propsSlides, currentValues, ...props }) => {
+    if (propsSlides.length === 0) return null;
+
+    return (
+      <div class="mt-4">
+        <Carousel.Root class="w-full" itemsPerView={1} bind:value={props["bind:value"]}>
+          <Carousel.ScrollArea>
+            {propsSlides.map((slideProps, slideIndex) => (
+              <Carousel.Item key={slideIndex} value={String(slideIndex)} class="p-4">
+                <div class="space-y-4">
+                  {slideProps.map((prop) => (
+                    <PropControl
+                      key={prop.name}
+                      prop={prop}
+                      value={currentValues[prop.name]}
+                    />
+                  ))}
+                </div>
+              </Carousel.Item>
+            ))}
+          </Carousel.ScrollArea>
+        </Carousel.Root>
+      </div>
+    );
+  }
+);
diff --git a/docs/src/docs-widgets/props-playground/props-playground.tsx b/docs/src/docs-widgets/props-playground/props-playground.tsx
new file mode 100644
index 000000000..6adc977fe
--- /dev/null
+++ b/docs/src/docs-widgets/props-playground/props-playground.tsx
@@ -0,0 +1,295 @@
+import type { ComponentMetadata, ComponentPiece } from "@qds.dev/tools/docs";
+import { Lucide } from "@qds.dev/ui";
+import {
+  $,
+  component$,
+  createContextId,
+  type QRL,
+  Signal,
+  useComputed$,
+  useContextProvider,
+  useSignal,
+  useTask$
+} from "@qwik.dev/core";
+import { useLocation } from "@qwik.dev/router";
+import { PropsControlsCarousel } from "./prop-controls";
+
+export type PropsPlaygroundProps = {
+  metadata: ComponentMetadata | null;
+  debug?: boolean;
+};
+
+/**
+ * Debug logging function that only outputs when debug mode is enabled
+ * @param message - Debug message to log
+ * @param data - Additional data to log
+ */
+export const debug = (isDebugMode: boolean, message: string, ...data: unknown[]) => {
+  if (!isDebugMode) return;
+  console.log(`[props-playground] ${message}`, ...data);
+};
+
+/**
+ * Props Playground Context
+ */
+export const propsPlaygroundContextId = createContextId<PropsPlaygroundContext>(
+  "props-playground-context"
+);
+
+export type PropsPlaygroundContext = {
+  onValueChange: QRL<(propName: string, value: unknown) => void>;
+  debug: boolean;
+  isBindProps: Signal<boolean>;
+};
+
+export const PropsPlayground = component$<PropsPlaygroundProps>(
+  ({ metadata, debug: isDebugMode = false }) => {
+    const location = useLocation();
+    const componentPieces = useSignal<ComponentPiece[]>([]);
+    const selectedPiece = useSignal<string>("Root");
+    const propValues = useSignal<Record<string, Record<string, unknown>>>({});
+
+    const isBindProps = useSignal(true);
+
+    const propsCarouselValue = useSignal("0");
+
+    const componentName = useComputed$(() => {
+      const path = location.url.pathname;
+      const match = path.match(/\/components\/([^/]+)/);
+      const name = match ? match[1] : null;
+      debug(isDebugMode, `Extracted component name from URL: ${name}`);
+      return name;
+    });
+
+    useTask$(({ track }) => {
+      const meta = track(() => metadata);
+      debug(
+        isDebugMode,
+        `Metadata updated:`,
+        meta
+          ? { componentName: meta.componentName, piecesCount: meta.pieces.length }
+          : null
+      );
+      if (meta?.pieces) {
+        componentPieces.value = meta.pieces;
+        debug(
+          isDebugMode,
+          `Set component pieces:`,
+          meta.pieces.map((p) => p.name)
+        );
+        if (meta.pieces.length > 0) {
+          selectedPiece.value = meta.pieces[0].name;
+          debug(isDebugMode, `Selected initial piece: ${meta.pieces[0].name}`);
+        }
+      } else {
+        componentPieces.value = [];
+        debug(isDebugMode, `No pieces found, cleared component pieces`);
+      }
+    });
+
+    useTask$(({ track }) => {
+      const pieces = track(() => componentPieces.value);
+      if (pieces.length === 0) {
+        debug(isDebugMode, `No pieces to initialize prop values for`);
+        return;
+      }
+
+      debug(isDebugMode, `Initializing prop values for ${pieces.length} pieces`);
+      const newValues: Record<string, Record<string, unknown>> = {};
+      for (const piece of pieces) {
+        newValues[piece.name] = {};
+        debug(
+          isDebugMode,
+          `Initializing props for piece: ${piece.name} (${piece.props.length} props)`
+        );
+        for (const prop of piece.props) {
+          if (prop.initialValue !== undefined) {
+            newValues[piece.name][prop.name] = prop.initialValue;
+            debug(
+              isDebugMode,
+              `  ${prop.name}: ${JSON.stringify(prop.initialValue)} (from initialValue)`
+            );
+          } else if (prop.type === "boolean") {
+            newValues[piece.name][prop.name] = false;
+            debug(isDebugMode, `  ${prop.name}: false (default boolean)`);
+          } else if (prop.type === "string") {
+            newValues[piece.name][prop.name] = "";
+            debug(isDebugMode, `  ${prop.name}: "" (default string)`);
+          } else if (prop.type === "number") {
+            newValues[piece.name][prop.name] = 0;
+            debug(isDebugMode, `  ${prop.name}: 0 (default number)`);
+          } else if (prop.type === "union" && prop.unionValues) {
+            newValues[piece.name][prop.name] = prop.unionValues[0];
+            debug(
+              isDebugMode,
+              `  ${prop.name}: ${prop.unionValues[0]} (first union value)`
+            );
+          }
+        }
+      }
+      propValues.value = newValues;
+      debug(isDebugMode, `Initialized all prop values:`, Object.keys(newValues));
+    });
+
+    const currentPiece = useComputed$(() => {
+      return componentPieces.value.find((p) => p.name === selectedPiece.value);
+    });
+
+    const currentValues = useComputed$(() => {
+      return propValues.value[selectedPiece.value] || {};
+    });
+
+    const propsSlides = useComputed$(() => {
+      if (!currentPiece.value) return [];
+      const props = currentPiece.value.props;
+      const slides: ComponentPiece["props"][number][][] = [];
+      const controlsPerSlide = 5;
+
+      for (let i = 0; i < props.length; i += controlsPerSlide) {
+        slides.push(props.slice(i, i + controlsPerSlide));
+      }
+
+      return slides;
+    });
+
+    const updatePropValue = $((propName: string, value: unknown) => {
+      if (!propValues.value[selectedPiece.value]) {
+        propValues.value[selectedPiece.value] = {};
+      }
+      const oldValue = propValues.value[selectedPiece.value][propName];
+      propValues.value[selectedPiece.value][propName] = value;
+      debug(
+        isDebugMode,
+        `Updated prop ${selectedPiece.value}.${propName}: ${JSON.stringify(oldValue)} -> ${JSON.stringify(value)}`
+      );
+    });
+
+    useContextProvider(propsPlaygroundContextId, {
+      onValueChange: updatePropValue,
+      debug: isDebugMode,
+      isBindProps
+    });
+
+    const handleNext = $(() => {
+      const currentPropsSlideIndex = parseInt(propsCarouselValue.value) || 0;
+      const isLastPropsSlide = currentPropsSlideIndex >= propsSlides.value.length - 1;
+
+      if (isLastPropsSlide && propsSlides.value.length > 0) {
+        const currentPieceIndex = componentPieces.value.findIndex(
+          (p) => p.name === selectedPiece.value
+        );
+        if (currentPieceIndex < componentPieces.value.length - 1) {
+          const nextPiece = componentPieces.value[currentPieceIndex + 1];
+          selectedPiece.value = nextPiece.name;
+          propsCarouselValue.value = "0"; // Reset to first props slide
+          debug(isDebugMode, `Advanced to next piece: ${nextPiece.name}`);
+        }
+      } else if (propsSlides.value.length > 0) {
+        propsCarouselValue.value = String(currentPropsSlideIndex + 1);
+        debug(isDebugMode, `Advanced to props slide: ${currentPropsSlideIndex + 1}`);
+      }
+    });
+
+    const handlePrev = $(() => {
+      const currentPropsSlideIndex = parseInt(propsCarouselValue.value) || 0;
+      const isFirstPropsSlide = currentPropsSlideIndex === 0;
+
+      if (isFirstPropsSlide) {
+        const currentPieceIndex = componentPieces.value.findIndex(
+          (p) => p.name === selectedPiece.value
+        );
+        if (currentPieceIndex > 0) {
+          const prevPiece = componentPieces.value[currentPieceIndex - 1];
+          selectedPiece.value = prevPiece.name;
+          const prevPieceProps = componentPieces.value[currentPieceIndex - 1].props;
+          const prevPieceSlides = Math.ceil(prevPieceProps.length / 5);
+          propsCarouselValue.value = String(Math.max(0, prevPieceSlides - 1));
+          debug(isDebugMode, `Moved to previous piece: ${prevPiece.name}`);
+        }
+      } else {
+        propsCarouselValue.value = String(currentPropsSlideIndex - 1);
+        debug(
+          isDebugMode,
+          `Moved to previous props slide: ${currentPropsSlideIndex - 1}`
+        );
+      }
+    });
+
+    if (!componentName.value) {
+      return (
+        <aside class="hidden lg:flex flex-col overflow-y-auto sticky top-0 h-screen text-light-950 px-4 py-6 bg-[#FCFAFE]">
+          <div class="text-sm text-light-600">No component selected</div>
+        </aside>
+      );
+    }
+
+    return (
+      <aside class="bg-[#FCFAFE]">
+        <div class="border-[1.6px] border-blue-500 rounded-2xl shadow-[6px_6px_0_0px_#18B6F6] overflow-clip mt-40">
+          {componentPieces.value.length > 0 && (
+            <>
+              {/* Global toggle for signal vs value mode */}
+              <div class="p-4 border-b-[1.6px] border-blue-500">
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-bold">State Mode</span>
+                  <div class="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick$={() => {
+                        isBindProps.value = true;
+                      }}
+                      ui-pressed={isBindProps.value}
+                      class="border-[1.6px] border-blue-500 text-blue-500 rounded px-4 py-2 text-sm font-semibold hover:bg-light-100 ui-pressed:bg-blue-200"
+                    >
+                      Signal
+                    </button>
+                    <button
+                      type="button"
+                      onClick$={() => {
+                        isBindProps.value = false;
+                      }}
+                      ui-pressed={!isBindProps.value}
+                      class="border-[1.6px] border-blue-500 text-blue-500 rounded px-4 py-2 text-sm font-semibold hover:bg-light-100 ui-pressed:bg-blue-200"
+                    >
+                      Value
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {currentPiece.value && propsSlides.value.length > 0 && (
+                <PropsControlsCarousel
+                  propsSlides={propsSlides.value}
+                  currentValues={currentValues.value}
+                  bind:value={propsCarouselValue}
+                />
+              )}
+
+              {/* Unified navigation buttons */}
+              <div class="my-4 flex justify-center gap-2">
+                <button
+                  type="button"
+                  onClick$={handlePrev}
+                  class="size-10 flex items-center justify-center text-sm bg-light-100 hover:bg-light-200 rounded-full transition-colors border border-light-300"
+                >
+                  <Lucide.ChevronLeft />
+                </button>
+                <button
+                  type="button"
+                  onClick$={handleNext}
+                  class="size-10 flex items-center justify-center text-sm bg-light-100 hover:bg-light-200 rounded-full transition-colors border border-light-300"
+                >
+                  <Lucide.ChevronRight />
+                </button>
+              </div>
+            </>
+          )}
+
+          {componentPieces.value.length === 0 && (
+            <div class="text-sm text-light-600">No component pieces found</div>
+          )}
+        </div>
+      </aside>
+    );
+  }
+);
diff --git a/docs/src/docs-widgets/props-playground/value-components.tsx b/docs/src/docs-widgets/props-playground/value-components.tsx
new file mode 100644
index 000000000..49c2b2204
--- /dev/null
+++ b/docs/src/docs-widgets/props-playground/value-components.tsx
@@ -0,0 +1,119 @@
+import { Field, Switch } from "@qds.dev/ui";
+import { component$, useContext } from "@qwik.dev/core";
+import { cn } from "../../utils/cn";
+import { buttonVariants, shadowVariants } from "../action/action";
+import { propsPlaygroundContextId } from "./props-playground";
+
+/**
+ * Boolean value component
+ */
+type BooleanValueProps = {
+  name: string;
+  value: boolean;
+  isBindable: boolean;
+};
+
+export const BooleanValue = component$<BooleanValueProps>(
+  ({ name, value, isBindable }) => {
+    const context = useContext(propsPlaygroundContextId);
+
+    return (
+      <div class="space-y-2">
+        <Switch.Root
+          checked={value}
+          onChange$={(checked) => {
+            void context.onValueChange(name, checked);
+          }}
+        >
+          <div class="flex items-center gap-2">
+            <Switch.Trigger class="w-8 h-4 bg-light-300 rounded-full">
+              <Switch.Thumb class="bg-blue-600 rounded-full size-4" />
+            </Switch.Trigger>
+            <Switch.Label class="text-sm font-medium">
+              {isBindable && context.isBindProps.value ? `bind:${name}` : name}
+            </Switch.Label>
+          </div>
+        </Switch.Root>
+      </div>
+    );
+  }
+);
+
+/**
+ * String value component
+ */
+type StringValueProps = {
+  name: string;
+  value: string;
+  isBindable: boolean;
+};
+
+export const StringValue = component$<StringValueProps>(({ name, value, isBindable }) => {
+  const context = useContext(propsPlaygroundContextId);
+
+  return (
+    <Field.Root>
+      <Field.Label class="text-sm font-medium mb-1">
+        {isBindable && context.isBindProps.value ? `bind:${name}` : name}
+      </Field.Label>
+      <div class="relative mb-1">
+        <Field.Input
+          value={value}
+          onChange$={(e) => {
+            const newValue = (e.target as HTMLInputElement).value;
+            void context.onValueChange(name, newValue);
+          }}
+          class={cn(
+            buttonVariants({ variant: "trigger" }),
+            "focus:outline-none focus:-translate-[2px]",
+            isBindable && context.isBindProps.value && "border-blue-300"
+          )}
+        />
+        <div class={shadowVariants({ variant: "trigger" })} aria-hidden="true" />
+      </div>
+    </Field.Root>
+  );
+});
+
+/**
+ * Union value select component
+ */
+type UnionValueProps = {
+  name: string;
+  value: string;
+  unionValues: string[];
+  isBindable: boolean;
+};
+
+export const UnionValue = component$<UnionValueProps>(
+  ({ name, value, unionValues, isBindable }) => {
+    const context = useContext(propsPlaygroundContextId);
+
+    return (
+      <Field.Root>
+        <Field.Label class="text-sm font-medium mb-1">
+          {isBindable && context.isBindProps.value ? `bind:${name}` : name}
+        </Field.Label>
+        <select
+          value={value}
+          onChange$={(e) => {
+            const newValue = (e.target as HTMLSelectElement).value;
+            void context.onValueChange(name, newValue);
+          }}
+          class={cn(
+            "w-full px-3 py-2 border rounded text-sm bg-white mb-1",
+            isBindable && context.isBindProps.value
+              ? "border-blue-300"
+              : "border-light-200"
+          )}
+        >
+          {unionValues.map((val: string) => (
+            <option key={val} value={val}>
+              {val}
+            </option>
+          ))}
+        </select>
+      </Field.Root>
+    );
+  }
+);
diff --git a/docs/src/docs-widgets/sidebar/sidebar.tsx b/docs/src/docs-widgets/sidebar/sidebar.tsx
index db808921d..c43e094f7 100644
--- a/docs/src/docs-widgets/sidebar/sidebar.tsx
+++ b/docs/src/docs-widgets/sidebar/sidebar.tsx
@@ -13,10 +13,9 @@ type TreeItemType = {
 export const Sidebar = component$((props: PropsOf<"nav">) => {
   const { renderTreeItem } = useSidebar();
   const commonlyUsedOpen = useSignal(true);
+  const isPanelOpen = useSignal(true);
 
   const PREFIX_COMPS = "/components";
-  const PREFIX_CONTRIB = "/contributing";
-  const PREFIX_QWIK_CORE = "/qwik-core";
 
   const componentTreeData: TreeItemType[] = [
     {
@@ -80,154 +79,127 @@ export const Sidebar = component$((props: PropsOf<"nav">) => {
     }
   ];
 
-  const treeData: TreeItemType[] = [
-    {
-      id: PREFIX_CONTRIB,
-      label: "Contributing",
-      children: [
-        { id: `${PREFIX_CONTRIB}/intro`, label: "Intro" },
-        { id: `${PREFIX_CONTRIB}/growth-mindset`, label: "Growth Mindset" },
-        { id: `${PREFIX_CONTRIB}/terminology`, label: "Terminology" },
-        { id: `${PREFIX_CONTRIB}/new-component`, label: "New Component" },
-        { id: `${PREFIX_CONTRIB}/component-structure`, label: "Component Structure" },
-        { id: `${PREFIX_CONTRIB}/composition`, label: "Composition" },
-        { id: `${PREFIX_CONTRIB}/research`, label: "Research" },
-        { id: `${PREFIX_CONTRIB}/state`, label: "State" },
-        { id: `${PREFIX_CONTRIB}/indexing`, label: "Indexing" },
-        { id: `${PREFIX_CONTRIB}/events`, label: "Events" },
-        { id: `${PREFIX_CONTRIB}/testing`, label: "Testing" },
-        { id: `${PREFIX_CONTRIB}/styling`, label: "Styling" },
-        { id: `${PREFIX_CONTRIB}/monorepo`, label: "Monorepo" },
-        { id: `${PREFIX_CONTRIB}/philosophy`, label: "Philosophy" },
-        { id: `${PREFIX_CONTRIB}/accessibility`, label: "Accessibility" },
-        { id: `${PREFIX_CONTRIB}/conventions`, label: "Conventions" },
-        { id: `${PREFIX_CONTRIB}/forms`, label: "Forms" },
-        { id: `${PREFIX_CONTRIB}/icons`, label: "Icons" },
-        { id: `${PREFIX_CONTRIB}/tradeoffs`, label: "Tradeoffs" }
-      ]
-    },
-    {
-      id: PREFIX_QWIK_CORE,
-      label: "Qwik Core",
-      children: [
-        { id: `${PREFIX_QWIK_CORE}/tasks`, label: "Tasks" },
-        { id: `${PREFIX_QWIK_CORE}/use-constant`, label: "Use Constant" }
-      ]
-    }
-  ];
-
   return (
-    <nav
-      class="fixed hidden lg:flex flex-col overflow-y-auto h-screen bg-white border-r border-[1.6px] border-light-200 text-light-950 px-4 py-6 gap-4"
-      {...props}
-    >
-      <div class="flex items-center justify-between">
-        <a href="/" class="flex items-center gap-2" aria-label="QDS Home">
-          <QwikLogo />
-          <span class="font-arcade text-2xl">QDS</span>
-        </a>
-        <button
-          type="button"
-          class="p-2 -mx-2 hover:bg-light-100 transition-colors rounded-lg"
-        >
-          <Lucide.PanelLeft class="size-6" />
-        </button>
-      </div>
-
-      <Action type="button" variant="trigger">
-        Search
-      </Action>
+    <div>
+      <button
+        type="button"
+        class="hover:bg-light-100 transition-colors rounded-lg fixed top-6 left-6 border-[1.6px] border-light-200 bg-white p-2"
+        onClick$={() => {
+          isPanelOpen.value = !isPanelOpen.value;
+        }}
+      >
+        <Lucide.PanelLeft class="size-6" />
+      </button>
+      <nav
+        class="hidden xl:flex flex-col overflow-y-auto sticky top-0 h-screen bg-white border-r border-[1.6px] border-light-200 text-light-950 px-4 py-6 gap-4 -ml-10 translate-x-[-100%] data-panel-open:translate-x-0 transition-transform duration-500 will-change-transform ease-initial max-w-[275px]"
+        data-panel-open={isPanelOpen.value}
+        inert={!isPanelOpen.value}
+        {...props}
+      >
+        <div class="flex items-center justify-between">
+          <a href="/" class="flex items-center gap-2" aria-label="QDS Home">
+            <QwikLogo />
+            <span class="font-arcade text-2xl">QDS</span>
+          </a>
+          <button
+            type="button"
+            class="p-2 -mx-2 hover:bg-light-100 transition-colors rounded-lg"
+            onClick$={() => {
+              isPanelOpen.value = !isPanelOpen.value;
+            }}
+          >
+            <Lucide.PanelLeft class="size-6" />
+          </button>
+        </div>
 
-      <div aria-hidden="true" class="w-full h-[1.6px] bg-light-100" />
+        <Action type="button" variant="trigger">
+          Search
+        </Action>
 
-      <div>
-        <div class="leading-[137.5%] font-bold p-2">Introduction</div>
-        <NavItem href="/quick-start">
-          <Lucide.BookOpen class="size-5" />
-          <span>Quick Start</span>
-        </NavItem>
+        <div aria-hidden="true" class="w-full h-[1.6px] bg-light-100" />
 
-        <NavItem href="/what-is-qds">
-          <Lucide.CircleQuestionMark class="size-5" />
-          <span>What is QDS?</span>
-        </NavItem>
+        <div>
+          <div class="leading-[137.5%] font-bold p-2">Introduction</div>
+          <NavItem href="/quick-start">
+            <Lucide.BookOpen class="size-5" />
+            <span>Quick Start</span>
+          </NavItem>
 
-        <NavItem href="/components">
-          <Lucide.Puzzle class="size-5" />
-          <span>Composition</span>
-        </NavItem>
+          <NavItem href="/what-is-qds">
+            <Lucide.CircleQuestionMark class="size-5" />
+            <span>What is QDS?</span>
+          </NavItem>
 
-        <NavItem href="/updates">
-          <Lucide.RefreshCw class="size-5" />
-          <span>Updates</span>
-        </NavItem>
+          <NavItem href="/components">
+            <Lucide.Puzzle class="size-5" />
+            <span>Composition</span>
+          </NavItem>
 
-        <NavItem href="/llms.txt">
-          <Lucide.FileText class="size-5" />
-          <span>LLMs.txt</span>
-        </NavItem>
-      </div>
+          <NavItem href="/updates">
+            <Lucide.RefreshCw class="size-5" />
+            <span>Updates</span>
+          </NavItem>
 
-      <div>
-        <div class="leading-[137.5%] font-bold p-2">Components</div>
-        <Tree.Root class="flex flex-col">
-          <Tree.Item bind:open={commonlyUsedOpen}>
-            <Tree.ItemTrigger class="group w-full cursor-pointer flex items-center gap-2 p-2 rounded-lg hover:bg-light-100 text-light-700 transition-colors justify-between">
-              <span class="flex items-center gap-2">
-                <Lucide.Star class="size-5" />
-                <span>Commonly Used</span>
-              </span>
-              <Lucide.ChevronRight
-                ui-open={commonlyUsedOpen.value}
-                class="ui-open:rotate-90 transition-transform duration-200 size-5"
-              />
-            </Tree.ItemTrigger>
-            <Tree.ItemContent class="pl-4 transition-all overflow-hidden">
-              <NavItem href="/icons">
-                <Lucide.Shapes class="size-5" />
-                <span>Icons</span>
-              </NavItem>
-              <NavItem href="/field">
-                <Lucide.TextCursor class="size-5" />
-                <span>Field</span>
-              </NavItem>
-              <NavItem href="/modal">
-                <Lucide.MessageSquare class="size-5" />
-                <span>Modal</span>
-              </NavItem>
-              <NavItem href="/checkbox">
-                <Lucide.SquareCheck class="size-5" />
-                <span>Checkbox</span>
-              </NavItem>
-              <NavItem href="/collapsible">
-                <Lucide.ChevronsUpDown class="size-5" />
-                <span>Collapsible</span>
-              </NavItem>
-              <NavItem href="/navbar">
-                <Lucide.PanelTop class="size-5" />
-                <span>Navbar</span>
-              </NavItem>
-              <NavItem href="/tabs">
-                <Lucide.Folder class="size-5" />
-                <span>Tabs</span>
-              </NavItem>
-              <NavItem href="/toggle">
-                <Lucide.CircleDot class="size-5" />
-                <span>Toggle</span>
-              </NavItem>
-            </Tree.ItemContent>
-          </Tree.Item>
-          {componentTreeData.map(async (node) => renderTreeItem(node))}
-        </Tree.Root>
-      </div>
+          <NavItem href="/llms.txt">
+            <Lucide.FileText class="size-5" />
+            <span>LLMs.txt</span>
+          </NavItem>
+        </div>
 
-      <div>
-        <div class="leading-[137.5%] font-bold p-2">Learn</div>
-        <Tree.Root class="flex flex-col">
-          {treeData.map(async (node) => renderTreeItem(node))}
-        </Tree.Root>
-      </div>
-    </nav>
+        <div>
+          <div class="leading-[137.5%] font-bold p-2">Components</div>
+          <Tree.Root class="flex flex-col">
+            <Tree.Item bind:open={commonlyUsedOpen}>
+              <Tree.ItemTrigger class="group w-full cursor-pointer flex items-center gap-2 p-2 rounded-lg hover:bg-light-100 text-light-700 transition-colors justify-between">
+                <span class="flex items-center gap-2">
+                  <Lucide.Star class="size-5" />
+                  <span>Commonly Used</span>
+                </span>
+                <Lucide.ChevronRight
+                  ui-open={commonlyUsedOpen.value}
+                  class="ui-open:rotate-90 transition-transform duration-200 size-5"
+                />
+              </Tree.ItemTrigger>
+              <Tree.ItemContent class="pl-4 transition-all overflow-hidden">
+                <NavItem href="/icons">
+                  <Lucide.Shapes class="size-5" />
+                  <span>Icons</span>
+                </NavItem>
+                <NavItem href="/field">
+                  <Lucide.TextCursor class="size-5" />
+                  <span>Field</span>
+                </NavItem>
+                <NavItem href="/modal">
+                  <Lucide.MessageSquare class="size-5" />
+                  <span>Modal</span>
+                </NavItem>
+                <NavItem href="/checkbox">
+                  <Lucide.SquareCheck class="size-5" />
+                  <span>Checkbox</span>
+                </NavItem>
+                <NavItem href="/collapsible">
+                  <Lucide.ChevronsUpDown class="size-5" />
+                  <span>Collapsible</span>
+                </NavItem>
+                <NavItem href="/navbar">
+                  <Lucide.PanelTop class="size-5" />
+                  <span>Navbar</span>
+                </NavItem>
+                <NavItem href="/tabs">
+                  <Lucide.Folder class="size-5" />
+                  <span>Tabs</span>
+                </NavItem>
+                <NavItem href="/toggle">
+                  <Lucide.CircleDot class="size-5" />
+                  <span>Toggle</span>
+                </NavItem>
+              </Tree.ItemContent>
+            </Tree.Item>
+            {componentTreeData.map(async (node) => renderTreeItem(node))}
+          </Tree.Root>
+        </div>
+      </nav>
+    </div>
   );
 });
 
diff --git a/docs/src/global.css b/docs/src/global.css
index 1bc1321cd..6793cda4a 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -2,7 +2,9 @@
 
 @import "tailwindcss";
 
-:focus-visible {
+@import "@shikijs/twoslash/style-rich.css";
+
+:focus-visible:not(input):not(textarea):not(select) {
   outline: 9px double black;
   box-shadow: 0 0 0 6px white;
 }
@@ -45,6 +47,7 @@
   --color-light-100: #f1f2f4;
   --color-light-200: #e6e8ea;
   --color-light-300: #d8dbdf;
+  --color-light-600: #9DA6AF;
   --color-light-700: #848f9a;
   --color-light-800: #6a7581;
   --color-light-950: #2e3338;
@@ -145,3 +148,61 @@ body {
   background-clip: text;
   color: transparent;
 }
+
+.twoslash-error-line,
+.twoslash-meta-line.twoslash-error-line {
+  display: none !important;
+}
+
+.twoslash .twoslash-error {
+  text-decoration: none !important;
+  border-bottom: none !important;
+  background: none !important;
+  color: inherit !important;
+}
+
+.twoslash .twoslash-query-presisted .twoslash-popup-container {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.twoslash .twoslash-query-presisted:hover .twoslash-popup-container {
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+
+/* Customize Twoslash tooltip styles to match brand */
+.twoslash {
+  --twoslash-popup-bg: #ffffff;
+  --twoslash-popup-color: #2e3338;
+  --twoslash-popup-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --twoslash-border-color: #e6e8ea;
+  --twoslash-popup-code-font-size: 0.875rem; /* text-sm */
+}
+
+.twoslash .twoslash-popup-container {
+  background-color: var(--twoslash-popup-bg) !important;
+  color: var(--twoslash-popup-color) !important;
+  box-shadow: var(--twoslash-popup-shadow) !important;
+  border: 1px solid var(--twoslash-border-color) !important;
+  border-radius: 0.5rem !important;
+  padding: 0.75rem !important;
+  font-size: 0.875rem !important; /* text-sm */
+}
+
+.twoslash .twoslash-popup-code {
+  font-size: 0.875rem !important; /* text-sm */
+  line-height: 1.5 !important;
+}
+
+.twoslash .twoslash-popup-docs {
+  font-size: 0.875rem !important; /* text-sm */
+  line-height: 1.5 !important;
+  margin-top: 0.5rem !important;
+}
+
+.twoslash .twoslash-popup-arrow {
+  border-top-color: var(--twoslash-border-color) !important;
+  border-right-color: var(--twoslash-border-color) !important;
+  background-color: var(--twoslash-popup-bg) !important;
+}
\ No newline at end of file
diff --git a/docs/src/routes/components/checkbox/index.mdx b/docs/src/routes/components/checkbox/index.mdx
index 518edbf57..32a5c7b87 100644
--- a/docs/src/routes/components/checkbox/index.mdx
+++ b/docs/src/routes/components/checkbox/index.mdx
@@ -1,11 +1,12 @@
 import api from "./code-notate/api.json";
-import Template, { config } from "./template";
+import Template from "./template";
+import templateSource from "./template.tsx?raw";
 
 # Checkbox
 
 <Subtitle>A clickable input that lets users make binary choices or select multiple options.</Subtitle>
 
-<Playground template={Template} config={config} />
+<Playground template={Template} source={templateSource} />
 
 <Features api={api} />
 
diff --git a/docs/src/routes/components/checkbox/template.tsx b/docs/src/routes/components/checkbox/template.tsx
index cbfffa8e5..2a214db0a 100644
--- a/docs/src/routes/components/checkbox/template.tsx
+++ b/docs/src/routes/components/checkbox/template.tsx
@@ -3,17 +3,15 @@ import { component$ } from "@qwik.dev/core";
 
 export default component$(() => {
   return (
-    <Checkbox.Root>
-      <Checkbox.Trigger class="size-6 bg-red-500">
+    <Checkbox.Root class="flex items-center gap-2">
+      <Checkbox.Trigger class="border-[1.6px] border-light-700 rounded ui-checked:border-blue-500 ui-checked:bg-blue-500 transition-discrete transition-colors disabled:border-light-600 not-ui-checked:disabled:bg-light-200 ui-checked:disabled:bg-light-600 ui-checked:disabled:border-transparent">
         <Checkbox.Indicator>
-          <Lucide.Check />
+          <Lucide.Check class="text-white" />
         </Checkbox.Indicator>
       </Checkbox.Trigger>
-      <Checkbox.Label>Accept terms</Checkbox.Label>
+      <Checkbox.Label class="text-sm leading-[143%]">
+        I accept the Terms and Conditions
+      </Checkbox.Label>
     </Checkbox.Root>
   );
 });
-
-export const config = {
-  controls: ["disabled", "checked"]
-};
diff --git a/docs/src/routes/components/layout.tsx b/docs/src/routes/components/layout.tsx
index 4cf28b339..04b57044e 100644
--- a/docs/src/routes/components/layout.tsx
+++ b/docs/src/routes/components/layout.tsx
@@ -1,14 +1,24 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import type { ComponentMetadata } from "@qds.dev/tools/docs";
 import {
   component$,
   createContextId,
   type Signal,
   Slot,
+  useConstant,
   useContextProvider,
   useSignal,
   useStyles$
 } from "@qwik.dev/core";
-import { type ContentHeading, type RequestHandler } from "@qwik.dev/router";
+import {
+  type ContentHeading,
+  type RequestHandler,
+  routeLoader$,
+  useLocation
+} from "@qwik.dev/router";
 import { Header } from "~/docs-widgets/header/header";
+import { PropsPlayground } from "~/docs-widgets/props-playground/props-playground";
 // import { NavFooter } from "~/docs-widgets/nav-footer/nav-footer";
 // import { SearchModal } from "~/docs-widgets/search/search";
 import { Sidebar } from "~/docs-widgets/sidebar/sidebar";
@@ -33,6 +43,55 @@ export const onGet: RequestHandler = ({ cacheControl }) => {
   });
 };
 
+export const useComponentMetadata = routeLoader$(
+  async ({ url }): Promise<ComponentMetadata | null> => {
+    const isDebugMode = url.searchParams.get("debug") !== null;
+
+    const path = url.pathname;
+    if (isDebugMode) {
+      console.log(`[route-loader] Loading metadata for path: ${path}`);
+    }
+
+    const match = path.match(/\/components\/([^/]+)/);
+    if (!match) {
+      if (isDebugMode) {
+        console.log(`[route-loader] No component match found in path`);
+      }
+      return null;
+    }
+
+    const componentName = match[1];
+    if (isDebugMode) {
+      console.log(`[route-loader] Component name: ${componentName}`);
+    }
+
+    try {
+      const metadataPath = join(
+        process.cwd(),
+        "public",
+        "component-metadata",
+        `${componentName}.json`
+      );
+      if (isDebugMode) {
+        console.log(`[route-loader] Reading metadata from: ${metadataPath}`);
+      }
+      const fileContent = await readFile(metadataPath, "utf-8");
+      const metadata = JSON.parse(fileContent) as ComponentMetadata;
+      if (isDebugMode) {
+        console.log(`[route-loader] Loaded metadata for ${componentName}:`, {
+          componentName: metadata.componentName,
+          piecesCount: metadata.pieces.length,
+          pieces: metadata.pieces.map((p) => p.name)
+        });
+      }
+      return metadata;
+    } catch (error) {
+      console.error(`[route-loader] Error loading metadata for ${componentName}:`, error);
+      return null;
+    }
+  }
+);
+
 export default component$(() => {
   useStyles$(styles);
   const allHeadingsSig = useSignal<ContentHeading[]>([]);
@@ -41,33 +100,22 @@ export default component$(() => {
     allHeadingsSig
   });
 
-  // const commentedMarkup = (
-  //   <>
-  //     <NavFooter />
-  //     <SearchModal />
-  //     <div class="svg-bg w-full h-full top-0 left-0 absolute z-[-2]" />
-  //     <div class="w-full h-full top-0 left-0 absolute bg-gradient z-[-1]" />
-  //     <div class="grid grid-cols-1 lg:grid-cols-[250px_1fr] xl:grid-cols-[300px_1fr_300px] gap-4">
-  //       <Sidebar />
-  //       <main data-pagefind-body class="w-full mx-auto max-w-screen-md">
-  //         <Slot />
-  //       </main>
-  //       <aside class="hidden w-60 xl:block">
-  //         {/* <TOC headings={headings || []} /> */}
-  //       </aside>
-  //     </div>
-  //   </>
-  // );
+  const componentMetadata = useComponentMetadata();
+  const location = useLocation();
+  const isDebugMode = useConstant(() => location.url.searchParams.get("debug") !== null);
 
   return (
     <MDXProvider components={components}>
-      <Sidebar />
-      <div class="bg-[#FCFAFE]">
-        <main class="max-w-[650px] mx-auto pb-16">
-          <Header />
-          <Slot />
-        </main>
-      </div>
+      <Header />
+      <main class="grid grid-cols-1 xl:grid-cols-[300px_1fr_300px] bg-[#FCFAFE] xl:px-10">
+        <Sidebar />
+        <div class="xl:px-10">
+          <div class="max-w-[650px] mx-auto pb-16">
+            <Slot />
+          </div>
+        </div>
+        <PropsPlayground metadata={componentMetadata.value} debug={isDebugMode} />
+      </main>
     </MDXProvider>
   );
 });
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index d53831d6b..79e82596e 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -25,5 +25,9 @@
     }
   },
   "include": ["src", "./*.d.ts", "./*.config.ts", "docs-widgets", "mdx", "**/api.json"],
-  "references": [{ "path": "../libs/components" }, { "path": "../libs/utils" }]
+  "references": [
+    { "path": "../libs/components" },
+    { "path": "../libs/utils" },
+    { "path": "../libs/tools" }
+  ]
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index 974414d4d..0687d8a51 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,4 +1,5 @@
 import { resolve } from "node:path";
+import { componentProps } from "@qds.dev/tools/docs";
 import { qdsTransformPlugin } from "@qds.dev/tools/rolldown";
 import { asChild, icons } from "@qds.dev/tools/vite";
 import { qwikVite } from "@qwik.dev/core/optimizer";
@@ -36,6 +37,11 @@ export default defineConfig((): UserConfig => {
     plugins: [
       asChild(),
       icons(),
+      componentProps({
+        componentsDir: resolve(__dirname, "../libs/components/src"),
+        outputDir: resolve(__dirname, "public/component-metadata"),
+        debug: true
+      }),
       // This plugin handles transforms for our lib author DX. We add it here so it runs in the docs dev mode as well.
       qdsTransformPlugin(),
       tailwindcss(),
@@ -90,6 +96,9 @@ export default defineConfig((): UserConfig => {
         "@qds.dev/ui": resolve(__dirname, "../libs/components/src"),
         "@qds.dev/utils": resolve(__dirname, "../libs/utils/src"),
         "@qds.dev/tools": resolve(__dirname, "../libs/tools/src"),
+        "@qds.dev/tools/docs": resolve(__dirname, "../libs/tools/docs"),
+        "@qds.dev/tools/vite": resolve(__dirname, "../libs/tools/vite"),
+        "@qds.dev/tools/rolldown": resolve(__dirname, "../libs/tools/rolldown"),
         "~": resolve(__dirname, "src")
       },
       dedupe: ["@qwik.dev/core", "@qwik.dev/router"]
diff --git a/libs/components/package.json b/libs/components/package.json
index 11e9bf04e..8a78b820a 100644
--- a/libs/components/package.json
+++ b/libs/components/package.json
@@ -34,7 +34,7 @@
     "@qds.dev/tools": "workspace:*",
     "@types/node": "24.9.0",
     "rolldown": "1.0.0-beta.45",
-    "typescript": "5.4.5",
+    "typescript": "5.9.3",
     "uqr": "^0.1.2",
     "vitest-browser-qwik": "0.0.12"
   },
diff --git a/libs/components/src/popover/popover-content.tsx b/libs/components/src/popover/popover-content.tsx
index 29c320dbe..fa4283f17 100644
--- a/libs/components/src/popover/popover-content.tsx
+++ b/libs/components/src/popover/popover-content.tsx
@@ -1,5 +1,4 @@
 import { $, type PropsOf, Slot, component$, useContext } from "@qwik.dev/core";
-import type { CorrectedToggleEvent } from "@qwik.dev/core/internal";
 import { Render } from "../render/render";
 import { popoverContextId } from "./popover-root";
 
@@ -7,7 +6,7 @@ export const PopoverContent = component$((props: PropsOf<"div">) => {
   const context = useContext(popoverContextId);
   const panelId = `${context.localId}-panel`;
 
-  const handleToggle$ = $((e: CorrectedToggleEvent) => {
+  const handleToggle$ = $((e: ToggleEvent) => {
     // prevent InvalidStateError: browser already toggled, skip useTask$ re-execution
     context.canExternallyChange.value = false;
     context.isOpen.value = e.newState === "open";
diff --git a/libs/components/src/switch/switch-context.tsx b/libs/components/src/switch/switch-context.tsx
index b8520c25b..532eac7b5 100644
--- a/libs/components/src/switch/switch-context.tsx
+++ b/libs/components/src/switch/switch-context.tsx
@@ -1,15 +1,14 @@
-import { type Signal, createContextId } from "@qwik.dev/core";
+import { createContextId, type Signal } from "@qwik.dev/core";
 
 export interface SwitchContext {
-  checked: Signal<boolean>;
-  disabled: Signal<boolean>;
-  required: Signal<boolean>;
+  isChecked: Signal<boolean>;
+  isDisabled: Signal<boolean>;
+  isRequired: Signal<boolean>;
   name?: Signal<string | undefined>;
-  value?: Signal<string | undefined>;
+  formValue?: Signal<string | undefined>;
   onChange$?: (checked: boolean) => void;
   localId: string;
-  hasError?: boolean;
-  hasErrorMessage: Signal<boolean>;
+  describedByIds: Signal<string | undefined>;
 }
 
 export const switchContextId = createContextId<SwitchContext>("switch-context");
diff --git a/libs/components/src/switch/switch-description.tsx b/libs/components/src/switch/switch-description.tsx
index 26deb8f79..e800a1e9a 100644
--- a/libs/components/src/switch/switch-description.tsx
+++ b/libs/components/src/switch/switch-description.tsx
@@ -1,4 +1,5 @@
-import { type PropsOf, Slot, component$, useContext } from "@qwik.dev/core";
+import { appendId, removeId, useMountTask$ } from "@qds.dev/utils";
+import { component$, type PropsOf, Slot, useContext, useSignal } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { switchContextId } from "./switch-context";
 
@@ -7,18 +8,27 @@ export const SwitchDescription = component$<PropsOf<"div">>((props) => {
   const { ...restProps } = props;
   const context = useContext(switchContextId);
   const descriptionId = `${context.localId}-description`;
+  const descriptionRef = useSignal<HTMLDivElement>();
+
+  useMountTask$(({ cleanup }) => {
+    context.describedByIds.value = appendId(context.describedByIds.value, descriptionId);
+
+    cleanup(() => {
+      context.describedByIds.value = removeId(
+        context.describedByIds.value,
+        descriptionId
+      );
+    });
+  }, descriptionRef);
 
   return (
     <Render
       {...restProps}
+      internalRef={descriptionRef}
       fallback="div"
       id={descriptionId}
       // The identifier for the switch description element
       ui-qds-switch-description
-      // Indicates whether the switch is currently checked
-      ui-checked={context.checked.value}
-      // Indicates whether the switch is currently disabled
-      ui-disabled={context.disabled.value}
     >
       <Slot />
     </Render>
diff --git a/libs/components/src/switch/switch-error.tsx b/libs/components/src/switch/switch-error.tsx
index bcbcdf1bf..b7946c2d9 100644
--- a/libs/components/src/switch/switch-error.tsx
+++ b/libs/components/src/switch/switch-error.tsx
@@ -1,4 +1,5 @@
-import { type PropsOf, Slot, component$, useContext, useTask$ } from "@qwik.dev/core";
+import { appendId, removeId, useMountTask$ } from "@qds.dev/utils";
+import { component$, type PropsOf, Slot, useContext, useSignal } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { switchContextId } from "./switch-context";
 
@@ -6,33 +7,24 @@ import { switchContextId } from "./switch-context";
 export const SwitchError = component$<PropsOf<"div">>((props) => {
   const { ...restProps } = props;
   const context = useContext(switchContextId);
-
   const errorId = `${context.localId}-error`;
+  const errorRef = useSignal<HTMLDivElement>();
+
+  useMountTask$(({ cleanup }) => {
+    context.describedByIds.value = appendId(context.describedByIds.value, errorId);
 
-  /**
-   *  So this doesn't work
-   *  Please watch: https://www.youtube.com/watch?v=DKYpBIjDgHQ
-   *
-   * As a result, you can set aria-errormessage to the errorId without the conditional for now. The tradeoff being it may be a broken reference, but better than nothing.
-   */
-  useTask$(() => {
-    context.hasErrorMessage.value = true;
-    return () => {
-      context.hasErrorMessage.value = false;
-    };
-  });
+    cleanup(() => {
+      context.describedByIds.value = removeId(context.describedByIds.value, errorId);
+    });
+  }, errorRef);
 
   return (
     <Render
       {...restProps}
+      internalRef={errorRef}
       fallback="div"
       id={errorId}
-      role="alert"
-      // The identifier for the switch error message element
       ui-qds-switch-error
-      // Controls the visibility of the error message
-      ui-visible={context.hasError}
-      aria-hidden={!context.hasError}
     >
       <Slot />
     </Render>
diff --git a/libs/components/src/switch/switch-hidden-input.tsx b/libs/components/src/switch/switch-hidden-input.tsx
index 35b4517fb..ae458bf29 100644
--- a/libs/components/src/switch/switch-hidden-input.tsx
+++ b/libs/components/src/switch/switch-hidden-input.tsx
@@ -1,5 +1,4 @@
-// no-as-child
-import { $, type PropsOf, component$, useContext } from "@qwik.dev/core";
+import { component$, type PropsOf, useContext } from "@qwik.dev/core";
 import { VisuallyHidden } from "../visually-hidden/visually-hidden";
 import { switchContextId } from "./switch-context";
 
@@ -14,13 +13,7 @@ type PublicHiddenInputProps = Omit<
  */
 export const SwitchHiddenInput = component$((props: PublicHiddenInputProps) => {
   const context = useContext(switchContextId);
-  const { onChange$, required, ...restProps } = props;
-
-  const handleChange$ = $(() => {
-    if (!context.disabled.value) {
-      context.checked.value = !context.checked.value;
-    }
-  });
+  const { required, value, name, disabled, ...restProps } = props;
 
   return (
     <VisuallyHidden>
@@ -28,13 +21,13 @@ export const SwitchHiddenInput = component$((props: PublicHiddenInputProps) => {
         {...restProps}
         type="checkbox"
         tabIndex={-1}
-        checked={context.checked.value}
+        checked={context.isChecked.value}
+        aria-checked={context.isChecked.value}
         ui-qds-switch-hidden-input
-        required={context.required.value ?? required ?? undefined}
-        value={context.value?.value ?? ""}
-        name={context.name?.value}
-        disabled={context.disabled.value}
-        onChange$={[handleChange$, onChange$]}
+        required={context.isRequired.value ?? required ?? undefined}
+        value={context.formValue?.value ?? value ?? undefined}
+        name={context.name?.value ?? name ?? undefined}
+        disabled={context.isDisabled.value ?? disabled ?? undefined}
       />
     </VisuallyHidden>
   );
diff --git a/libs/components/src/switch/switch-root.tsx b/libs/components/src/switch/switch-root.tsx
index 6b7c17e01..8dd866c08 100644
--- a/libs/components/src/switch/switch-root.tsx
+++ b/libs/components/src/switch/switch-root.tsx
@@ -11,7 +11,19 @@ import {
 } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import styles from "./switch.css?inline";
-import { type SwitchContext, switchContextId } from "./switch-context";
+
+export interface SwitchContext {
+  isChecked: Signal<boolean>;
+  isDisabled: Signal<boolean>;
+  isRequired: Signal<boolean>;
+  name?: Signal<string | undefined>;
+  formValue?: Signal<string | undefined>;
+  onChange$?: (checked: boolean) => void;
+  localId: string;
+  describedByIds: Signal<string | undefined>;
+}
+
+export const switchContextId = createContextId<SwitchContext>("switch-context");
 
 type SwitchBinds = {
   /** Initial checked state of the switch */
@@ -29,35 +41,41 @@ type SwitchBinds = {
 type PublicRootProps = Omit<PropsOf<"div">, "onChange$"> & {
   /** Callback when the switch state changes */
   onChange$?: (checked: boolean) => void;
-  /** Whether the switch is in an error state */
-  hasError?: boolean;
 } & BindableProps<SwitchBinds>;
 
+import { createContextId, type Signal } from "@qwik.dev/core";
+
 /** Root component that manages the switch state and context */
 export const SwitchRoot = component$<PublicRootProps>((props) => {
   useStyles$(styles);
-  const { onChange$, hasError, ...restProps } = props;
-  const isInitialLoadSig = useSignal(true);
-  const hasErrorMessageSig = useSignal(false);
+  const { onChange$, ...restProps } = props;
+  const isInitialLoad = useSignal(true);
+  const isError = useSignal(false);
+  const describedByIds = useSignal<string | undefined>(undefined);
 
-  const { checkedSig, disabledSig, requiredSig, nameSig, valueSig } =
-    useBindings<SwitchBinds>(props, {
-      checked: false,
-      disabled: false,
-      required: false,
-      name: "",
-      value: ""
-    });
+  const {
+    checkedSig: isChecked,
+    disabledSig: isDisabled,
+    requiredSig: isRequired,
+    nameSig: name,
+    valueSig: formValue
+  } = useBindings<SwitchBinds>(props, {
+    checked: false,
+    disabled: false,
+    required: false,
+    name: "",
+    value: ""
+  });
 
   useTask$(function handleChange({ track, cleanup }) {
-    const checked = track(() => checkedSig.value);
+    track(isChecked);
 
-    if (!isInitialLoadSig.value && onChange$ && !disabledSig.value) {
-      onChange$(checked);
+    if (!isInitialLoad.value && onChange$) {
+      onChange$(isChecked.value);
     }
 
     cleanup(() => {
-      isInitialLoadSig.value = false;
+      isInitialLoad.value = false;
     });
   });
 
@@ -67,15 +85,14 @@ export const SwitchRoot = component$<PublicRootProps>((props) => {
   const errorId = `${localId}-error`;
 
   const context: SwitchContext = {
-    checked: checkedSig,
-    disabled: disabledSig,
-    required: requiredSig,
-    name: nameSig,
-    value: valueSig,
+    isChecked,
+    isDisabled,
+    isRequired,
+    name,
+    formValue,
     onChange$,
     localId,
-    hasErrorMessage: hasErrorMessageSig,
-    hasError
+    describedByIds
   };
 
   useContextProvider(switchContextId, context);
@@ -85,19 +102,18 @@ export const SwitchRoot = component$<PublicRootProps>((props) => {
       {...restProps}
       fallback="div"
       role="switch"
-      aria-checked={checkedSig.value}
-      aria-disabled={disabledSig.value}
-      aria-required={requiredSig.value}
+      aria-checked={isChecked.value}
+      aria-disabled={isDisabled.value}
+      aria-required={isRequired.value}
       aria-labelledby={labelId}
       aria-describedby={descriptionId}
-      aria-errormessage={hasErrorMessageSig.value ? errorId : undefined}
+      aria-errormessage={isError.value ? errorId : undefined}
       ui-qds-switch-root
+      ui-qds-scope
       // Indicates whether the switch is currently checked
-      ui-checked={checkedSig.value}
+      ui-checked={isChecked.value}
       // Indicates whether the switch is currently disabled
-      ui-disabled={disabledSig.value}
-      // Indicates whether the switch is in an error state
-      ui-error={hasError ? "" : undefined}
+      ui-disabled={isDisabled.value}
     >
       <Slot />
     </Render>
diff --git a/libs/components/src/switch/switch-thumb.tsx b/libs/components/src/switch/switch-thumb.tsx
index f3ffa05ca..74bf8c113 100644
--- a/libs/components/src/switch/switch-thumb.tsx
+++ b/libs/components/src/switch/switch-thumb.tsx
@@ -1,4 +1,4 @@
-import { type PropsOf, component$, useContext } from "@qwik.dev/core";
+import { component$, type PropsOf, useContext } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { switchContextId } from "./switch-context";
 
@@ -13,9 +13,9 @@ export const SwitchThumb = component$<PropsOf<"span">>((props) => {
       fallback="span"
       ui-qds-switch-thumb
       // Indicates whether the switch is currently checked
-      ui-checked={context.checked.value}
+      ui-checked={context.isChecked.value}
       // Indicates whether the switch is currently disabled
-      ui-disabled={context.disabled.value}
+      ui-disabled={context.isDisabled.value}
     />
   );
 });
diff --git a/libs/components/src/switch/switch-trigger.tsx b/libs/components/src/switch/switch-trigger.tsx
index fbc9d44b4..72b72ab92 100644
--- a/libs/components/src/switch/switch-trigger.tsx
+++ b/libs/components/src/switch/switch-trigger.tsx
@@ -1,4 +1,13 @@
-import { $, type PropsOf, Slot, component$, useContext, useSignal } from "@qwik.dev/core";
+import { hasIdInList } from "@qds.dev/utils";
+import {
+  $,
+  component$,
+  type PropsOf,
+  Slot,
+  useComputed$,
+  useContext,
+  useSignal
+} from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { switchContextId } from "./switch-context";
 
@@ -8,13 +17,17 @@ export const SwitchTrigger = component$<PropsOf<"button">>((props) => {
   const context = useContext(switchContextId);
   const triggerRef = useSignal<HTMLButtonElement>();
   const labelId = `${context.localId}-label`;
-  const descriptionId = `${context.localId}-description`;
   const triggerId = `${context.localId}-trigger`;
+  const errorId = `${context.localId}-error`;
 
   const handleToggle$ = $(() => {
-    if (context.disabled.value) return;
+    if (context.isDisabled.value) return;
 
-    context.checked.value = !context.checked.value;
+    context.isChecked.value = !context.isChecked.value;
+  });
+
+  const isError = useComputed$(() => {
+    return hasIdInList(context.describedByIds.value, errorId);
   });
 
   return (
@@ -24,16 +37,16 @@ export const SwitchTrigger = component$<PropsOf<"button">>((props) => {
       internalRef={triggerRef}
       id={triggerId}
       type="button"
-      disabled={context.disabled.value}
+      disabled={context.isDisabled.value}
       ui-qds-switch-trigger
       // Indicates whether the switch is currently checked
-      ui-checked={context.checked.value}
+      ui-checked={context.isChecked.value}
       // Indicates whether the switch is currently disabled
-      ui-disabled={context.disabled.value ? "" : undefined}
+      ui-disabled={context.isDisabled.value ? "" : undefined}
       onClick$={[handleToggle$, props.onClick$]}
       aria-labelledby={labelId}
-      aria-describedby={descriptionId}
-      aria-invalid={context.hasErrorMessage.value}
+      aria-describedby={context.describedByIds.value}
+      aria-invalid={isError.value ? "true" : undefined}
     >
       <Slot />
     </Render>
diff --git a/libs/components/src/switch/switch.browser.tsx b/libs/components/src/switch/switch.browser.tsx
index c289f1e30..1f8d622d1 100644
--- a/libs/components/src/switch/switch.browser.tsx
+++ b/libs/components/src/switch/switch.browser.tsx
@@ -87,7 +87,6 @@ const FormWithValidation = component$((props: PropsOf<typeof Switch.Root>) => {
         name="notifications"
         value="enabled"
         bind:checked={isChecked}
-        hasError={isError.value}
         data-testid="root"
       >
         <Switch.Label data-testid="label">Enable notifications</Switch.Label>
diff --git a/libs/components/window.d.ts b/libs/components/window.d.ts
index ce56e7751..2c49fc71b 100644
--- a/libs/components/window.d.ts
+++ b/libs/components/window.d.ts
@@ -19,3 +19,7 @@ declare global {
     ): void;
   }
 }
+
+
+
+
diff --git a/libs/tools/docs/component-props.ts b/libs/tools/docs/component-props.ts
new file mode 100644
index 000000000..2ed7bd1e3
--- /dev/null
+++ b/libs/tools/docs/component-props.ts
@@ -0,0 +1,945 @@
+import { existsSync, statSync } from "node:fs";
+import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, join, relative } from "node:path";
+import type {
+  Node,
+  Program,
+  TSPropertySignature,
+  TSType,
+  TSTypeLiteral
+} from "@oxc-project/types";
+import {
+  charIn,
+  charNotIn,
+  createRegExp,
+  exactly,
+  maybe,
+  oneOrMore,
+  whitespace
+} from "magic-regexp";
+import { parseSync } from "oxc-parser";
+import { walk } from "oxc-walker";
+import type { Plugin as VitePlugin } from "vite";
+
+const JSDOC_LINE_PATTERN = createRegExp(
+  maybe(whitespace.times.any()),
+  exactly("*"),
+  maybe(whitespace)
+);
+const JSDOC_START_PATTERN = createRegExp(exactly("/**"));
+const JSDOC_END_PATTERN = createRegExp(exactly("*/"));
+const JSDOC_PATTERN = createRegExp(
+  exactly("/**"),
+  charNotIn("*")
+    .or(exactly("*").notAfter(exactly("/")))
+    .times.any(),
+  exactly("*/")
+);
+
+export type PropType = {
+  name: string;
+  type: "boolean" | "string" | "number" | "union" | "function" | "unknown";
+  unionValues?: string[];
+  isBindable: boolean;
+  isFunction?: boolean;
+  initialValue?: unknown;
+  comment?: string;
+};
+
+export type ComponentPiece = {
+  name: string;
+  props: PropType[];
+};
+
+export type ComponentMetadata = {
+  componentName: string;
+  pieces: ComponentPiece[];
+};
+
+export type ComponentPropsPluginOptions = {
+  componentsDir: string;
+  outputDir: string;
+  debug?: boolean;
+};
+
+export const componentProps = (options: ComponentPropsPluginOptions): VitePlugin => {
+  const { componentsDir, outputDir, debug: isDebugMode = false } = options;
+
+  const debug = (message: string, ...data: unknown[]) => {
+    if (!isDebugMode) return;
+    console.log(`[component-props] ${message}`, ...data);
+  };
+
+  return {
+    name: "vite-plugin-qds-component-props",
+    enforce: "pre",
+
+    configResolved() {
+      debug("Component props plugin initialized");
+      generateAllComponentMetadata(componentsDir, outputDir, debug).catch((error) => {
+        console.error("[component-props] Error generating metadata:", error);
+      });
+    },
+
+    async handleHotUpdate(ctx) {
+      if (!ctx.file.includes(componentsDir) || !ctx.file.endsWith(".tsx")) {
+        return undefined;
+      }
+
+      const componentName = extractComponentName(ctx.file, componentsDir);
+      if (!componentName) {
+        return undefined;
+      }
+
+      await generateComponentMetadata(componentName, componentsDir, outputDir, debug);
+      return undefined;
+    }
+  };
+};
+
+async function generateAllComponentMetadata(
+  componentsDir: string,
+  outputDir: string,
+  debug: (message: string, ...data: unknown[]) => void
+): Promise<void> {
+  const componentDirs = await findComponentDirs(componentsDir);
+
+  await Promise.all(
+    componentDirs.map(async (componentName) =>
+      generateComponentMetadata(componentName, componentsDir, outputDir, debug)
+    )
+  );
+}
+
+export async function generateComponentMetadata(
+  componentName: string,
+  componentsDir: string,
+  outputDir: string,
+  debug: (message: string, ...data: unknown[]) => void
+): Promise<void> {
+  try {
+    debug(`Generating metadata for component: ${componentName}`);
+
+    const pieces = await parseComponentPieces(componentName, componentsDir, debug);
+    debug(
+      `Found ${pieces.length} pieces for ${componentName}:`,
+      pieces.map((p) => p.name)
+    );
+
+    const metadata: ComponentMetadata = {
+      componentName,
+      pieces
+    };
+
+    const outputPath = join(outputDir, `${componentName}.json`);
+    await mkdir(dirname(outputPath), { recursive: true });
+    await writeFile(outputPath, JSON.stringify(metadata, null, 2), "utf-8");
+
+    debug(`Wrote metadata to ${outputPath}`);
+  } catch (error) {
+    debug(`Error generating metadata for ${componentName}:`, error);
+    console.error(
+      `[component-props] Error generating metadata for ${componentName}:`,
+      error
+    );
+  }
+}
+
+async function parseComponentPieces(
+  componentName: string,
+  componentsDir: string,
+  debug: (message: string, ...data: unknown[]) => void
+): Promise<ComponentPiece[]> {
+  const componentPath = join(componentsDir, componentName);
+  debug(`Parsing pieces for ${componentName}`);
+
+  if (!existsSync(componentPath)) {
+    debug(`Component path does not exist: ${componentPath}`);
+    return [];
+  }
+
+  const files = await readdir(componentPath);
+  debug(`Found ${files.length} files in directory:`, files);
+
+  const pieceFiles = files.filter((file) => isPieceFile(file, debug));
+  debug(`Filtered to ${pieceFiles.length} piece files:`, pieceFiles);
+
+  const piecePromises = pieceFiles.map(async (file) => {
+    const filePath = join(componentPath, file);
+    if (!statSync(filePath).isFile()) {
+      debug(`Skipping ${filePath} (not a file)`);
+      return null;
+    }
+
+    const pieceName = extractPieceName(file, componentName);
+    debug(`Parsing piece file: ${file} -> piece name: ${pieceName}`);
+
+    const props = await parseComponentFile(filePath, pieceName, debug);
+    if (props.length === 0) {
+      debug(`Skipping ${pieceName} (no props)`);
+      return null;
+    }
+
+    debug(`Found ${props.length} props in ${pieceName}`);
+    return { name: pieceName, props } as ComponentPiece;
+  });
+
+  const pieces = (await Promise.all(piecePromises)).filter(
+    (piece): piece is ComponentPiece => piece !== null
+  );
+
+  pieces.sort((a, b) => {
+    if (a.name === "Root") return -1;
+    if (b.name === "Root") return 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  debug(
+    `Final pieces for ${componentName}:`,
+    pieces.map((p) => p.name)
+  );
+  return pieces;
+}
+
+function isPieceFile(
+  file: string,
+  debug: (message: string, ...data: unknown[]) => void
+): boolean {
+  if (!file.endsWith(".tsx")) {
+    debug(`Skipping ${file} (not .tsx)`);
+    return false;
+  }
+  if (file.endsWith("-context.tsx")) {
+    debug(`Skipping ${file} (is -context.tsx)`);
+    return false;
+  }
+  if (file.includes(".browser.")) {
+    debug(`Skipping ${file} (contains .browser.)`);
+    return false;
+  }
+  debug(`Including ${file} as piece file`);
+  return true;
+}
+
+function extractPieceName(file: string, componentName: string): string {
+  const baseName = file.replace(`${componentName}-`, "").replace(".tsx", "");
+  return baseName
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+async function parseComponentFile(
+  filePath: string,
+  pieceName: string,
+  debug: (message: string, ...data: unknown[]) => void
+): Promise<PropType[]> {
+  debug(`parseComponentFile: ${filePath} (piece: ${pieceName})`);
+
+  const source = await readFile(filePath, "utf-8");
+  const ast = parseSync(filePath, source);
+
+  if (ast.errors.length > 0) {
+    debug(`Parse errors in ${filePath}:`, ast.errors);
+    return [];
+  }
+
+  const typeAliasCache = buildTypeAliasCache(ast.program);
+
+  const analysisResult = analyzeProgram(ast.program, debug, typeAliasCache);
+
+  if (!analysisResult.propsType) {
+    debug(`No props type found in ${filePath}`);
+    return [];
+  }
+
+  debug(`Bindable props:`, Array.from(analysisResult.bindableProps));
+
+  const typeLiterals = new Set<TSTypeLiteral>();
+  const bindableInlineTypes = new Set<TSTypeLiteral>();
+
+  collectTypeLiterals(analysisResult.propsType, typeAliasCache, typeLiterals);
+  collectBindableInlineTypes(analysisResult.propsType, bindableInlineTypes);
+
+  for (const bindableType of bindableInlineTypes) {
+    typeLiterals.add(bindableType);
+  }
+
+  for (const bindableType of analysisResult.aliasBindableTypes) {
+    bindableInlineTypes.add(bindableType);
+    typeLiterals.add(bindableType);
+  }
+
+  const propsMap = new Map<string, PropType>();
+  for (const typeLiteral of typeLiterals) {
+    const isFromBindable = bindableInlineTypes.has(typeLiteral);
+    extractPropsFromType(
+      typeLiteral,
+      source,
+      analysisResult.bindableProps,
+      propsMap,
+      typeAliasCache,
+      isFromBindable
+    );
+  }
+
+  if (analysisResult.bindableTypeName) {
+    const bindableTypeAlias = typeAliasCache.get(analysisResult.bindableTypeName);
+    if (bindableTypeAlias) {
+      const typeAnnotation =
+        "typeAnnotation" in bindableTypeAlias ? bindableTypeAlias.typeAnnotation : null;
+      if (typeAnnotation?.type === "TSTypeLiteral") {
+        extractPropsFromType(
+          typeAnnotation,
+          source,
+          analysisResult.bindableProps,
+          propsMap,
+          typeAliasCache,
+          true
+        );
+      } else if (typeAnnotation?.type === "TSTypeReference") {
+        const resolvedType = resolveTypeAliasCached(typeAnnotation, typeAliasCache);
+        if (resolvedType?.type === "TSTypeLiteral") {
+          extractPropsFromType(
+            resolvedType,
+            source,
+            analysisResult.bindableProps,
+            propsMap,
+            typeAliasCache,
+            true
+          );
+        }
+      }
+    }
+  }
+
+  const finalProps = Array.from(propsMap.values());
+  debug(`Extracted ${finalProps.length} props from ${filePath}`);
+  return finalProps;
+}
+
+function buildTypeAliasCache(program: Program): Map<string, Node> {
+  const cache = new Map<string, Node>();
+  walk(program, {
+    enter(node: Node) {
+      if (node.type === "TSTypeAliasDeclaration") {
+        const typeName = getTypeName(node);
+        if (typeName) {
+          cache.set(typeName, node);
+        }
+      }
+    }
+  });
+  return cache;
+}
+
+function analyzeProgram(
+  program: Program,
+  debug: (message: string, ...data: unknown[]) => void,
+  typeAliasCache: Map<string, Node>
+): {
+  propsType: TSType | null;
+  bindableProps: Set<string>;
+  bindableTypeName: string | null;
+  aliasBindableTypes: TSTypeLiteral[];
+} {
+  let propsType: TSType | null = null;
+  const bindableProps = new Set<string>();
+  let bindableTypeName: string | null = null;
+  const aliasBindableTypes: TSTypeLiteral[] = [];
+  let foundComponentCall = false;
+
+  walk(program, {
+    enter(node: Node) {
+      if (!foundComponentCall && node.type === "CallExpression") {
+        const callee = "callee" in node ? node.callee : null;
+        if (callee) {
+          const isComponentCall =
+            (callee.type === "Identifier" &&
+              "name" in callee &&
+              callee.name === "component$") ||
+            (callee.type === "MemberExpression" &&
+              "property" in callee &&
+              callee.property &&
+              typeof callee.property === "object" &&
+              "name" in callee.property &&
+              callee.property.name === "component$");
+
+          if (isComponentCall) {
+            foundComponentCall = true;
+            const args = "arguments" in node ? node.arguments : [];
+            const firstArg = args[0];
+            if (
+              firstArg &&
+              typeof firstArg === "object" &&
+              firstArg.type === "ArrowFunctionExpression"
+            ) {
+              if ("typeArguments" in node && node.typeArguments) {
+                const typeArgs = node.typeArguments as { params?: unknown[] };
+                if (Array.isArray(typeArgs.params) && typeArgs.params.length > 0) {
+                  const firstTypeArg = typeArgs.params[0];
+                  if (
+                    firstTypeArg &&
+                    typeof firstTypeArg === "object" &&
+                    "type" in firstTypeArg
+                  ) {
+                    debug(`Found component$ call with generic type parameter`);
+                    propsType = firstTypeArg as TSType;
+                    return;
+                  }
+                }
+              }
+
+              const params = "params" in firstArg ? firstArg.params : [];
+              const firstParam = params[0];
+              if (firstParam && typeof firstParam === "object") {
+                const typeAnnotation =
+                  "typeAnnotation" in firstParam ? firstParam.typeAnnotation : null;
+                if (typeAnnotation && typeof typeAnnotation === "object") {
+                  const paramType =
+                    "typeAnnotation" in typeAnnotation
+                      ? typeAnnotation.typeAnnotation
+                      : null;
+                  if (paramType && typeof paramType === "object") {
+                    debug(`Found component$ call with props type`);
+                    propsType = paramType;
+                    return;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      if (node.type === "TSTypeAliasDeclaration") {
+        const typeName = getTypeName(node);
+        if (!typeName) return;
+
+        const typeAnnotation = "typeAnnotation" in node ? node.typeAnnotation : null;
+        if (!typeAnnotation) return;
+
+        if (!propsType && typeName.endsWith("Props")) {
+          debug(`Found *Props type: ${typeName}`);
+          if ("type" in typeAnnotation) {
+            propsType = typeAnnotation;
+          }
+        }
+
+        if (typeName.endsWith("Props") && typeAnnotation.type === "TSIntersectionType") {
+          const types = "types" in typeAnnotation ? typeAnnotation.types : [];
+          for (const type of types) {
+            if (type.type !== "TSTypeReference") continue;
+
+            const typeNameNode = "typeName" in type ? type.typeName : null;
+            if (
+              !typeNameNode ||
+              !("name" in typeNameNode) ||
+              typeNameNode.name !== "BindableProps"
+            ) {
+              continue;
+            }
+
+            const typeParams = getTypeParameters(type);
+            const firstParam = typeParams[0];
+            if (
+              firstParam &&
+              typeof firstParam === "object" &&
+              firstParam !== null &&
+              "type" in firstParam
+            ) {
+              if (firstParam.type === "TSTypeReference") {
+                const refTypeName = (firstParam as { typeName?: { name?: string } })
+                  .typeName?.name;
+                if (typeof refTypeName === "string") {
+                  bindableTypeName = refTypeName;
+                }
+              } else if (firstParam.type === "TSTypeLiteral") {
+                aliasBindableTypes.push(firstParam as TSTypeLiteral);
+              }
+            }
+          }
+        }
+
+        if (bindableTypeName && typeName === bindableTypeName) {
+          if (typeAnnotation.type === "TSTypeLiteral") {
+            extractPropNames(typeAnnotation, bindableProps);
+          } else if (typeAnnotation.type === "TSTypeReference") {
+            const resolvedType = resolveTypeAliasCached(typeAnnotation, typeAliasCache);
+            if (resolvedType?.type === "TSTypeLiteral") {
+              extractPropNames(resolvedType, bindableProps);
+            }
+          }
+        }
+      }
+    }
+  });
+
+  return {
+    propsType,
+    bindableProps,
+    bindableTypeName,
+    aliasBindableTypes
+  };
+}
+
+function resolveTypeAliasCached(
+  type: TSType,
+  typeAliasCache: Map<string, Node>
+): TSType | null {
+  if (type.type !== "TSTypeReference") return null;
+
+  const typeName = getTypeReferenceName(type);
+  if (!typeName) return null;
+
+  const aliasNode = typeAliasCache.get(typeName);
+  if (!aliasNode) return null;
+
+  const typeAnnotation = "typeAnnotation" in aliasNode ? aliasNode.typeAnnotation : null;
+  if (
+    typeAnnotation &&
+    "type" in typeAnnotation &&
+    typeAnnotation.type !== "TSTypeAnnotation"
+  ) {
+    return typeAnnotation;
+  }
+
+  return null;
+}
+
+function collectTypeLiterals(
+  type: TSType | null,
+  typeAliasCache: Map<string, Node>,
+  collected: Set<TSTypeLiteral>
+): void {
+  if (!type) return;
+
+  if (type.type === "TSTypeLiteral") {
+    collected.add(type);
+    return;
+  }
+
+  if (type.type === "TSIntersectionType" && "types" in type) {
+    for (const intersectionType of type.types) {
+      collectTypeLiterals(intersectionType, typeAliasCache, collected);
+    }
+    return;
+  }
+
+  if (type.type === "TSTypeReference") {
+    const resolved = resolveTypeAliasCached(type, typeAliasCache);
+    if (resolved) {
+      collectTypeLiterals(resolved, typeAliasCache, collected);
+    }
+  }
+}
+
+function collectBindableInlineTypes(
+  type: TSType | null,
+  collected: Set<TSTypeLiteral>
+): void {
+  if (!type) return;
+
+  if (type.type === "TSIntersectionType" && "types" in type) {
+    for (const intersectionType of type.types) {
+      if (intersectionType.type === "TSTypeReference") {
+        const typeName = getTypeReferenceName(intersectionType);
+        if (typeName === "BindableProps") {
+          const typeParams = getTypeParameters(intersectionType);
+          const firstParam = typeParams[0];
+          if (
+            firstParam &&
+            typeof firstParam === "object" &&
+            firstParam !== null &&
+            "type" in firstParam &&
+            firstParam.type === "TSTypeLiteral"
+          ) {
+            collected.add(firstParam as TSTypeLiteral);
+          }
+        }
+      }
+      collectBindableInlineTypes(intersectionType, collected);
+    }
+  }
+}
+
+function getTypeName(node: Node): string {
+  if (node.type !== "TSTypeAliasDeclaration") return "";
+  if (!("id" in node) || !("name" in node.id)) return "";
+  return node.id.name;
+}
+
+function getTypeReferenceName(type: TSType): string {
+  if (type.type !== "TSTypeReference") return "";
+  if (!("typeName" in type)) return "";
+  const typeName = type.typeName;
+  if (!typeName || !("name" in typeName) || typeof typeName.name !== "string") return "";
+  return typeName.name;
+}
+
+function getTypeParameters(type: Node): unknown[] {
+  if (type.type === "TSTypeReference") {
+    if ("typeArguments" in type && type.typeArguments) {
+      const typeArgs = type.typeArguments as { params?: unknown[] };
+      if (Array.isArray(typeArgs.params)) {
+        return typeArgs.params;
+      }
+    }
+    return [];
+  }
+
+  if (
+    !("typeParameters" in type) ||
+    !type.typeParameters ||
+    typeof type.typeParameters !== "object" ||
+    !("params" in type.typeParameters) ||
+    !Array.isArray(type.typeParameters.params)
+  ) {
+    return [];
+  }
+
+  return type.typeParameters.params;
+}
+
+function extractPropNames(typeLiteral: TSTypeLiteral, props: Set<string>): void {
+  if (!("members" in typeLiteral)) return;
+
+  for (const member of typeLiteral.members) {
+    if (member.type !== "TSPropertySignature") continue;
+
+    const key = getPropertyKey(member);
+    if (key) {
+      props.add(key);
+    }
+  }
+}
+
+function extractPropsFromType(
+  typeLiteral: TSTypeLiteral,
+  source: string,
+  bindableProps: Set<string>,
+  propsMap: Map<string, PropType>,
+  typeAliasCache: Map<string, Node>,
+  forceBindable = false
+): void {
+  if (!("members" in typeLiteral)) return;
+
+  for (const member of typeLiteral.members) {
+    if (member.type !== "TSPropertySignature") continue;
+
+    const prop = extractPropFromSignature(
+      member,
+      source,
+      bindableProps,
+      typeAliasCache,
+      forceBindable
+    );
+    if (prop) {
+      const existing = propsMap.get(prop.name);
+      if (existing) {
+        if (prop.isBindable) {
+          existing.isBindable = true;
+        }
+        if (prop.comment && !existing.comment) {
+          existing.comment = prop.comment;
+        }
+        if (prop.type !== "unknown" && existing.type === "unknown") {
+          existing.type = prop.type;
+          existing.unionValues = prop.unionValues;
+          existing.isFunction = prop.isFunction;
+          existing.initialValue = prop.initialValue;
+        }
+      } else {
+        propsMap.set(prop.name, prop);
+      }
+    }
+  }
+}
+
+function extractPropFromSignature(
+  signature: TSPropertySignature,
+  source: string,
+  bindableProps: Set<string>,
+  typeAliasCache: Map<string, Node>,
+  forceBindable = false
+): PropType | null {
+  const key = getPropertyKey(signature);
+  if (!key || key.startsWith("_")) return null;
+
+  const typeAnnotation = "typeAnnotation" in signature ? signature.typeAnnotation : null;
+  if (!typeAnnotation) return null;
+
+  const type = typeAnnotation.typeAnnotation;
+  const comment = extractComment(signature, source, key);
+  const propType = parseType(type, source, typeAliasCache);
+
+  return {
+    name: key,
+    type: propType.type,
+    unionValues: propType.unionValues,
+    isBindable: forceBindable || bindableProps.has(key),
+    isFunction: propType.isFunction,
+    initialValue: propType.initialValue,
+    comment: comment || undefined
+  };
+}
+
+function getPropertyKey(signature: TSPropertySignature): string | null {
+  const keyNode = "key" in signature ? signature.key : null;
+  if (!keyNode || !("name" in keyNode)) return null;
+
+  if (typeof keyNode.name === "string") {
+    return keyNode.name;
+  }
+
+  return keyNode.name.name;
+}
+
+function extractComment(node: Node, source: string, propName?: string): string | null {
+  if (
+    "leadingComments" in node &&
+    node.leadingComments &&
+    Array.isArray(node.leadingComments)
+  ) {
+    for (const comment of node.leadingComments) {
+      if (
+        typeof comment !== "object" ||
+        comment === null ||
+        !("type" in comment) ||
+        !("value" in comment)
+      ) {
+        continue;
+      }
+
+      const commentTyped = comment as { type: string; value: unknown };
+      if (commentTyped.type !== "CommentBlock") continue;
+
+      const commentValue = commentTyped.value;
+      if (typeof commentValue !== "string" || !commentValue.startsWith("*")) {
+        continue;
+      }
+
+      const lines = commentValue
+        .split("\n")
+        .map((line: string) => line.replace(JSDOC_LINE_PATTERN, "").trim())
+        .filter((line: string) => line && !line.startsWith("@"));
+      const result = lines.join(" ").trim();
+      return result || null;
+    }
+  }
+
+  if (!propName) return null;
+
+  const propPattern = createRegExp(
+    maybe(whitespace),
+    exactly(propName),
+    maybe(whitespace.times.any()),
+    charIn("?:")
+  );
+  const propPatternGlobal = new RegExp(propPattern.source, "g");
+
+  let match;
+  while ((match = propPatternGlobal.exec(source)) !== null) {
+    const propStart = match.index;
+    const beforeProp = source.slice(Math.max(0, propStart - 500), propStart);
+    const jsdocMatch = beforeProp.match(JSDOC_PATTERN);
+    if (jsdocMatch && jsdocMatch[0]) {
+      const commentValue = jsdocMatch[0];
+      const lines = commentValue
+        .replace(JSDOC_START_PATTERN, "")
+        .replace(JSDOC_END_PATTERN, "")
+        .split("\n")
+        .map((line: string) => line.replace(JSDOC_LINE_PATTERN, "").trim())
+        .filter((line: string) => line && !line.startsWith("@"));
+      const result = lines.join(" ").trim();
+      return result || null;
+    }
+  }
+
+  return null;
+}
+
+function parseType(
+  type: TSType,
+  _source: string,
+  typeAliasCache: Map<string, Node>
+): {
+  type: PropType["type"];
+  unionValues?: string[];
+  initialValue?: unknown;
+  isFunction?: boolean;
+} {
+  if (type.type === "TSUnionType") {
+    return parseUnionType(type, typeAliasCache);
+  }
+
+  if (type.type === "TSBooleanKeyword") {
+    return { type: "boolean", initialValue: false };
+  }
+
+  if (type.type === "TSStringKeyword") {
+    return { type: "string", initialValue: "" };
+  }
+
+  if (type.type === "TSNumberKeyword") {
+    return { type: "number", initialValue: 0 };
+  }
+
+  if (type.type === "TSLiteralType") {
+    return parseLiteralType(type);
+  }
+
+  if (type.type === "TSFunctionType") {
+    return { type: "function", isFunction: true };
+  }
+
+  if (type.type === "TSTypeReference") {
+    const typeName = getTypeReferenceName(type);
+    if (typeName === "QRL") {
+      return { type: "function", isFunction: true };
+    }
+
+    const resolvedType = resolveTypeAliasCached(type, typeAliasCache);
+    if (resolvedType) {
+      return parseType(resolvedType, _source, typeAliasCache);
+    }
+  }
+
+  return { type: "unknown" };
+}
+
+function parseUnionType(
+  type: TSType,
+  typeAliasCache: Map<string, Node>
+): {
+  type: PropType["type"];
+  unionValues?: string[];
+} {
+  if (type.type !== "TSUnionType" || !("types" in type)) {
+    return { type: "unknown" };
+  }
+
+  const unionTypes = type.types;
+  const stringLiterals: string[] = [];
+
+  for (let i = 0; i < unionTypes.length; i++) {
+    let unionType = unionTypes[i];
+
+    if (unionType.type === "TSTypeReference") {
+      const resolvedType = resolveTypeAliasCached(unionType, typeAliasCache);
+      if (resolvedType) {
+        if (resolvedType.type === "TSUnionType") {
+          const nestedResult = parseUnionType(resolvedType, typeAliasCache);
+          if (nestedResult.type === "union" && nestedResult.unionValues) {
+            stringLiterals.push(...nestedResult.unionValues);
+          }
+          continue;
+        }
+        unionType = resolvedType;
+      }
+    }
+
+    if (unionType.type === "TSLiteralType" && "literal" in unionType) {
+      const literal = unionType.literal;
+      if (
+        literal &&
+        typeof literal === "object" &&
+        "type" in literal &&
+        "value" in literal
+      ) {
+        const literalValue = literal.value;
+        if (typeof literalValue === "string") {
+          stringLiterals.push(literalValue);
+        }
+      }
+    }
+  }
+
+  const hasBoolean = unionTypes.some((t) => {
+    if (t.type === "TSBooleanKeyword") {
+      return true;
+    }
+    if (t.type === "TSLiteralType" && "literal" in t) {
+      const literal = t.literal;
+      if (literal && typeof literal === "object" && "value" in literal) {
+        return typeof literal.value === "boolean";
+      }
+    }
+    return false;
+  });
+
+  const unionValues: string[] = [];
+  if (hasBoolean) {
+    unionValues.push("false", "true");
+  }
+  if (stringLiterals.length > 0) {
+    unionValues.push(...stringLiterals);
+  }
+
+  if (unionValues.length > 0) {
+    return {
+      type: "union",
+      unionValues
+    };
+  }
+
+  return { type: "unknown" };
+}
+
+function parseLiteralType(type: TSType): {
+  type: PropType["type"];
+  unionValues?: string[];
+  initialValue?: unknown;
+} {
+  if (type.type !== "TSLiteralType" || !("literal" in type)) {
+    return { type: "unknown" };
+  }
+
+  const literal = type.literal;
+  if (
+    !literal ||
+    typeof literal !== "object" ||
+    !("type" in literal) ||
+    !("value" in literal)
+  ) {
+    return { type: "unknown" };
+  }
+
+  const literalValue = literal.value;
+
+  if (typeof literalValue === "string") {
+    return {
+      type: "union",
+      unionValues: [literalValue]
+    };
+  }
+
+  if (typeof literalValue === "boolean") {
+    return { type: "boolean", initialValue: literalValue };
+  }
+
+  return { type: "unknown" };
+}
+
+function extractComponentName(filePath: string, componentsDir: string): string | null {
+  const relativePath = relative(componentsDir, filePath);
+  const componentNamePattern = createRegExp(
+    oneOrMore(charNotIn("/")).groupedAs("componentName"),
+    exactly("/")
+  );
+  const match = relativePath.match(componentNamePattern);
+  return match?.groups?.componentName ?? null;
+}
+
+async function findComponentDirs(componentsDir: string): Promise<string[]> {
+  const entries = await readdir(componentsDir, { withFileTypes: true });
+  const components = entries
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name);
+
+  if (components.length === 0) {
+    throw new Error(`No component directories found in ${componentsDir}`);
+  }
+
+  return components;
+}
diff --git a/libs/tools/docs/component-props.unit.ts b/libs/tools/docs/component-props.unit.ts
new file mode 100644
index 000000000..284caf522
--- /dev/null
+++ b/libs/tools/docs/component-props.unit.ts
@@ -0,0 +1,1315 @@
+import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { type ComponentMetadata, generateComponentMetadata } from "./component-props";
+
+describe("component-props plugin", () => {
+  const tempDir = join(tmpdir(), `qds-test-components-${process.pid}`);
+  const tempOutputDir = join(tmpdir(), `qds-test-output-${process.pid}`);
+
+  beforeAll(() => {
+    mkdirSync(tempDir, { recursive: true });
+    mkdirSync(tempOutputDir, { recursive: true });
+  });
+
+  afterAll(() => {
+    try {
+      if (existsSync(tempDir)) {
+        rmSync(tempDir, { recursive: true, force: true });
+      }
+      if (existsSync(tempOutputDir)) {
+        rmSync(tempOutputDir, { recursive: true, force: true });
+      }
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  async function generateMetadata(componentName: string, componentCode: string) {
+    const componentDir = join(tempDir, componentName);
+    mkdirSync(componentDir, { recursive: true });
+
+    writeFileSync(
+      join(componentDir, `${componentName}-root.tsx`),
+      componentCode,
+      "utf-8"
+    );
+
+    // Directly call the generation function and await it
+    await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+    const outputFile = join(tempOutputDir, `${componentName}.json`);
+    if (!existsSync(outputFile)) {
+      return null;
+    }
+
+    return JSON.parse(await readFile(outputFile, "utf-8")) as ComponentMetadata;
+  }
+
+  describe("basic prop extraction", () => {
+    it("should extract boolean props", async () => {
+      const metadata = await generateMetadata(
+        "test-button",
+        `
+export type PublicRootProps = {
+  /** Whether the button is disabled */
+  disabled?: boolean;
+};
+
+export const ButtonRoot = component$((props: PublicRootProps) => {
+  return <div>Button</div>;
+});
+`
+      );
+
+      expect(metadata).toBeTruthy();
+      expect(metadata?.pieces).toHaveLength(1);
+      expect(metadata?.pieces[0].props).toHaveLength(1);
+
+      const disabledProp = metadata?.pieces[0].props[0];
+      expect(disabledProp?.name).toBe("disabled");
+      expect(disabledProp?.type).toBe("boolean");
+      expect(disabledProp?.isBindable).toBe(false);
+      expect(disabledProp?.initialValue).toBe(false);
+      expect(disabledProp?.comment).toBe("Whether the button is disabled");
+    });
+
+    it("should extract string props", async () => {
+      const metadata = await generateMetadata(
+        "test-label",
+        `
+export type PublicRootProps = {
+  label?: string;
+};
+
+export const LabelRoot = component$((props: PublicRootProps) => {
+  return <div>{props.label}</div>;
+});
+`
+      );
+
+      const labelProp = metadata?.pieces[0].props.find((p) => p.name === "label");
+      expect(labelProp?.type).toBe("string");
+      expect(labelProp?.initialValue).toBe("");
+    });
+
+    it("should extract number props", async () => {
+      const metadata = await generateMetadata(
+        "test-slider",
+        `
+export type PublicRootProps = {
+  min?: number;
+};
+
+export const SliderRoot = component$((props: PublicRootProps) => {
+  return <div>{props.min}</div>;
+});
+`
+      );
+
+      const minProp = metadata?.pieces[0].props.find((p) => p.name === "min");
+      expect(minProp?.type).toBe("number");
+      expect(minProp?.initialValue).toBe(0);
+    });
+
+    it("should extract union type props", async () => {
+      const metadata = await generateMetadata(
+        "test-select",
+        `
+export type PublicRootProps = {
+  align?: "start" | "center" | "end";
+};
+
+export const SelectRoot = component$((props: PublicRootProps) => {
+  return <div>{props.align}</div>;
+});
+`
+      );
+
+      const alignProp = metadata?.pieces[0].props.find((p) => p.name === "align");
+      expect(alignProp?.type).toBe("union");
+      expect(alignProp?.unionValues).toEqual(["start", "center", "end"]);
+    });
+  });
+
+  describe("bindable props", () => {
+    it("should mark props from BindableProps as bindable", async () => {
+      const metadata = await generateMetadata(
+        "test-field",
+        `
+import type { BindableProps } from "@qds.dev/utils";
+
+type FieldBinds = {
+  disabled: boolean;
+  value: string;
+};
+
+export type PublicRootProps = {
+  label?: string;
+} & BindableProps<FieldBinds>;
+
+export const FieldRoot = component$((props: PublicRootProps) => {
+  return <div>{props.label}</div>;
+});
+`
+      );
+
+      const labelProp = metadata?.pieces[0].props.find((p) => p.name === "label");
+      expect(labelProp?.isBindable).toBe(false);
+
+      const disabledProp = metadata?.pieces[0].props.find((p) => p.name === "disabled");
+      expect(disabledProp).toBeDefined();
+      expect(disabledProp?.isBindable).toBe(true);
+      expect(disabledProp?.type).toBe("boolean");
+
+      const valueProp = metadata?.pieces[0].props.find((p) => p.name === "value");
+      expect(valueProp).toBeDefined();
+      expect(valueProp?.isBindable).toBe(true);
+      expect(valueProp?.type).toBe("string");
+    });
+
+    it("should extract bindable props from inline BindableProps type", async () => {
+      const metadata = await generateMetadata(
+        "test-toggle",
+        `
+import type { BindableProps } from "@qds.dev/utils";
+
+export type PublicRootProps = {
+  label?: string;
+} & BindableProps<{
+  checked: boolean;
+  value: number;
+}>;
+
+export const ToggleRoot = component$((props: PublicRootProps) => {
+  return <div>{props.label}</div>;
+});
+`
+      );
+
+      const checkedProp = metadata?.pieces[0].props.find((p) => p.name === "checked");
+      expect(checkedProp?.isBindable).toBe(true);
+      expect(checkedProp?.type).toBe("boolean");
+
+      const valueProp = metadata?.pieces[0].props.find((p) => p.name === "value");
+      expect(valueProp?.isBindable).toBe(true);
+      expect(valueProp?.type).toBe("number");
+    });
+  });
+
+  describe("prop exclusion", () => {
+    // TODO: Figure out how to handle function props (props ending with $)
+    // For now, we include them but they may need special handling in the future
+
+    it("should include props ending with $", async () => {
+      const metadata = await generateMetadata(
+        "test-component",
+        `
+export type PublicRootProps = {
+  visible?: boolean;
+  onChange$?: (value: string) => void;
+  onClick$$?: () => void;
+};
+
+export const ComponentRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const propNames = metadata?.pieces[0].props.map((p) => p.name) || [];
+      expect(propNames).toContain("visible");
+      expect(propNames).toContain("onChange$");
+      expect(propNames).toContain("onClick$$");
+    });
+
+    it("should exclude props starting with _", async () => {
+      const metadata = await generateMetadata(
+        "test-component",
+        `
+export type PublicRootProps = {
+  visible?: boolean;
+  _index?: number;
+  _internal?: string;
+};
+
+export const ComponentRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const propNames = metadata?.pieces[0].props.map((p) => p.name) || [];
+      expect(propNames).toContain("visible");
+      expect(propNames).not.toContain("_index");
+      expect(propNames).not.toContain("_internal");
+    });
+  });
+
+  describe("intersection types", () => {
+    it("should extract props from intersection with PropsOf", async () => {
+      const metadata = await generateMetadata(
+        "test-complex",
+        `
+import type { PropsOf } from "@qwik.dev/core";
+
+export type PublicRootProps = PropsOf<"div"> & {
+  custom?: boolean;
+};
+
+export const ComplexRoot = component$((props: PublicRootProps) => {
+  return <div>{props.custom}</div>;
+});
+`
+      );
+
+      const customProp = metadata?.pieces[0].props.find((p) => p.name === "custom");
+      expect(customProp).toBeDefined();
+      expect(customProp?.type).toBe("boolean");
+    });
+  });
+
+  describe("multiple component pieces", () => {
+    it("should extract props from multiple piece files", async () => {
+      const componentName = "test-menu";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  open?: boolean;
+};
+
+export const MenuRoot = component$((props: PublicRootProps) => {
+  return <div>{props.open}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      writeFileSync(
+        join(componentDir, `${componentName}-item.tsx`),
+        `
+export type PublicItemProps = {
+  value?: string;
+};
+
+export const MenuItem = component$((props: PublicItemProps) => {
+  return <div>{props.value}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(2);
+      expect(metadata.pieces[0].name).toBe("Root");
+      expect(metadata.pieces[1].name).toBe("Item");
+    });
+
+    it("should sort pieces with Root first", async () => {
+      const componentName = "test-sort";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-item.tsx`),
+        `
+export type PublicItemProps = {
+  value?: string;
+};
+
+export const Item = component$((props: PublicItemProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  open?: boolean;
+};
+
+export const Root = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      writeFileSync(
+        join(componentDir, `${componentName}-trigger.tsx`),
+        `
+export type PublicTriggerProps = {
+  disabled?: boolean;
+};
+
+export const Trigger = component$((props: PublicTriggerProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(3);
+      expect(metadata.pieces[0].name).toBe("Root");
+      expect(metadata.pieces[1].name).toBe("Item");
+      expect(metadata.pieces[2].name).toBe("Trigger");
+    });
+  });
+
+  describe("file filtering", () => {
+    it("should skip -context.tsx files", async () => {
+      const componentName = "test-component";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  prop?: boolean;
+};
+
+export const ComponentRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      writeFileSync(
+        join(componentDir, `${componentName}-context.tsx`),
+        `
+export type PublicContextProps = {
+  shouldNotAppear?: boolean;
+};
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata2 = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata2.pieces).toHaveLength(1);
+      expect(metadata2.pieces[0].name).toBe("Root");
+    });
+
+    it("should skip .browser.tsx files", async () => {
+      const componentName = "test-component";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  prop?: boolean;
+};
+
+export const ComponentRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      writeFileSync(
+        join(componentDir, `${componentName}.browser.tsx`),
+        `
+export type PublicBrowserProps = {
+  shouldNotAppear?: boolean;
+};
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+      expect(metadata.pieces[0].name).toBe("Root");
+    });
+  });
+
+  describe("configResolved hook", () => {
+    it("should generate metadata on dev server startup and build", async () => {
+      const componentName = "test-config-resolved";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  initial?: boolean;
+};
+
+export const ConfigResolvedRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      // configResolved runs on every dev server startup and build
+      // In tests, we directly call the generation function
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      expect(existsSync(outputFile)).toBe(true);
+
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+      expect(metadata.componentName).toBe(componentName);
+      expect(metadata.pieces).toHaveLength(1);
+    });
+  });
+
+  describe("error handling", () => {
+    it("should handle files with parse errors gracefully", async () => {
+      const componentName = "test-parse-error";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+export type PublicRootProps = {
+  // This is invalid syntax
+  prop?: 
+};
+
+export const ParseErrorRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`,
+        "utf-8"
+      );
+
+      // Should not throw even with parse errors
+      await expect(
+        generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {})
+      ).resolves.not.toThrow();
+    });
+  });
+
+  describe("union types with boolean", () => {
+    it("should handle union type with boolean and string literals", async () => {
+      const metadata = await generateMetadata(
+        "test-toggle",
+        `
+export type PublicRootProps = {
+  checked?: boolean | "mixed";
+};
+
+export const ToggleRoot = component$((props: PublicRootProps) => {
+  return <div>{props.checked}</div>;
+});
+`
+      );
+
+      const checkedProp = metadata?.pieces[0].props.find((p) => p.name === "checked");
+      expect(checkedProp?.type).toBe("union");
+      // Should include both boolean values and string literal
+      expect(checkedProp?.unionValues).toContain("false");
+      expect(checkedProp?.unionValues).toContain("true");
+      expect(checkedProp?.unionValues).toContain("mixed");
+    });
+  });
+
+  describe("JSDoc comments", () => {
+    it("should extract JSDoc comments from props", async () => {
+      const metadata = await generateMetadata(
+        "test-comment",
+        `
+export type PublicRootProps = {
+  /**
+   * This is a multi-line comment
+   * that describes the prop
+   */
+  description?: string;
+};
+
+export const CommentRoot = component$((props: PublicRootProps) => {
+  return <div>{props.description}</div>;
+});
+`
+      );
+
+      const descriptionProp = metadata?.pieces[0].props.find(
+        (p) => p.name === "description"
+      );
+      expect(descriptionProp?.comment).toBeTruthy();
+      expect(descriptionProp?.comment).toContain("multi-line comment");
+      expect(descriptionProp?.comment).toContain("describes the prop");
+    });
+  });
+
+  describe("function and QRL types", () => {
+    it("should recognize function types and mark them as isFunction", async () => {
+      const metadata = await generateMetadata(
+        "test-functions",
+        `
+export type PublicRootProps = {
+  onClick?: () => void;
+  onChange?: (value: string) => void;
+  onSubmit?: (event: Event) => boolean;
+};
+
+export const FunctionRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const onClickProp = metadata?.pieces[0].props.find((p) => p.name === "onClick");
+      expect(onClickProp).toBeDefined();
+      expect(onClickProp?.type).toBe("function");
+      expect(onClickProp?.isFunction).toBe(true);
+
+      const onChangeProp = metadata?.pieces[0].props.find((p) => p.name === "onChange");
+      expect(onChangeProp).toBeDefined();
+      expect(onChangeProp?.type).toBe("function");
+      expect(onChangeProp?.isFunction).toBe(true);
+
+      const onSubmitProp = metadata?.pieces[0].props.find((p) => p.name === "onSubmit");
+      expect(onSubmitProp).toBeDefined();
+      expect(onSubmitProp?.type).toBe("function");
+      expect(onSubmitProp?.isFunction).toBe(true);
+    });
+
+    it("should recognize QRL types and mark them as isFunction", async () => {
+      const metadata = await generateMetadata(
+        "test-qrl",
+        `
+import type { QRL } from "@qwik.dev/core";
+
+export type PublicRootProps = {
+  onClick$?: QRL<() => void>;
+  onChange$?: QRL<(value: string) => void>;
+};
+
+export const QrlRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const onClickProp = metadata?.pieces[0].props.find((p) => p.name === "onClick$");
+      expect(onClickProp).toBeDefined();
+      expect(onClickProp?.type).toBe("function");
+      expect(onClickProp?.isFunction).toBe(true);
+
+      const onChangeProp = metadata?.pieces[0].props.find((p) => p.name === "onChange$");
+      expect(onChangeProp).toBeDefined();
+      expect(onChangeProp?.type).toBe("function");
+      expect(onChangeProp?.isFunction).toBe(true);
+    });
+  });
+
+  describe("type alias resolution", () => {
+    it("should resolve union type aliases", async () => {
+      const metadata = await generateMetadata(
+        "test-type-alias",
+        `
+type Alignment = "start" | "center" | "end";
+
+export type PublicRootProps = {
+  align?: Alignment;
+};
+
+export const TypeAliasRoot = component$((props: PublicRootProps) => {
+  return <div>{props.align}</div>;
+});
+`
+      );
+
+      const alignProp = metadata?.pieces[0].props.find((p) => p.name === "align");
+      expect(alignProp).toBeDefined();
+      expect(alignProp?.type).toBe("union");
+      expect(alignProp?.unionValues).toEqual(["start", "center", "end"]);
+    });
+
+    it("should resolve type aliases with boolean unions", async () => {
+      const metadata = await generateMetadata(
+        "test-boolean-alias",
+        `
+type Visibility = "hover" | "scroll" | "auto" | "always";
+
+export type PublicRootProps = {
+  type?: Visibility;
+};
+
+export const VisibilityRoot = component$((props: PublicRootProps) => {
+  return <div>{props.type}</div>;
+});
+`
+      );
+
+      const typeProp = metadata?.pieces[0].props.find((p) => p.name === "type");
+      expect(typeProp).toBeDefined();
+      expect(typeProp?.type).toBe("union");
+      expect(typeProp?.unionValues).toEqual(["hover", "scroll", "auto", "always"]);
+    });
+
+    it("should handle nested type aliases", async () => {
+      const metadata = await generateMetadata(
+        "test-nested-alias",
+        `
+type Level = "L" | "M" | "Q" | "H";
+type ErrorLevel = Level;
+
+export type PublicRootProps = {
+  level?: ErrorLevel;
+};
+
+export const NestedAliasRoot = component$((props: PublicRootProps) => {
+  return <div>{props.level}</div>;
+});
+`
+      );
+
+      const levelProp = metadata?.pieces[0].props.find((p) => p.name === "level");
+      expect(levelProp).toBeDefined();
+      expect(levelProp?.type).toBe("union");
+      expect(levelProp?.unionValues).toEqual(["L", "M", "Q", "H"]);
+    });
+  });
+
+  describe("object type extraction", () => {
+    it("should extract nested object types", async () => {
+      const metadata = await generateMetadata(
+        "test-object",
+        `
+export type PublicRootProps = {
+  sensitivity?: {
+    mouse?: number;
+    touch?: number;
+  };
+};
+
+export const ObjectRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const sensitivityProp = metadata?.pieces[0].props.find(
+        (p) => p.name === "sensitivity"
+      );
+      expect(sensitivityProp).toBeDefined();
+      // For now, object types might show as "unknown" until we implement object extraction
+      // This test documents the expected behavior
+      expect(sensitivityProp?.type).toBeDefined();
+    });
+
+    it("should extract object types with optional properties", async () => {
+      const metadata = await generateMetadata(
+        "test-object-optional",
+        `
+export type PublicRootProps = {
+  config?: {
+    enabled?: boolean;
+    timeout?: number;
+    label?: string;
+  };
+};
+
+export const ObjectOptionalRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const configProp = metadata?.pieces[0].props.find((p) => p.name === "config");
+      expect(configProp).toBeDefined();
+      expect(configProp?.type).toBeDefined();
+    });
+  });
+
+  describe("array type support", () => {
+    it("should recognize array types", async () => {
+      const metadata = await generateMetadata(
+        "test-array",
+        `
+export type PublicRootProps = {
+  items?: string[];
+  numbers?: number[];
+  values?: (string | number)[];
+};
+
+export const ArrayRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const itemsProp = metadata?.pieces[0].props.find((p) => p.name === "items");
+      expect(itemsProp).toBeDefined();
+      // Array types might show as "unknown" until we implement array extraction
+      // This test documents the expected behavior
+      expect(itemsProp?.type).toBeDefined();
+
+      const numbersProp = metadata?.pieces[0].props.find((p) => p.name === "numbers");
+      expect(numbersProp).toBeDefined();
+      expect(numbersProp?.type).toBeDefined();
+    });
+
+    it("should handle readonly arrays", async () => {
+      const metadata = await generateMetadata(
+        "test-readonly-array",
+        `
+export type PublicRootProps = {
+  readonly items?: readonly string[];
+};
+
+export const ReadonlyArrayRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const itemsProp = metadata?.pieces[0].props.find((p) => p.name === "items");
+      expect(itemsProp).toBeDefined();
+      expect(itemsProp?.type).toBeDefined();
+    });
+  });
+
+  describe("number type extraction", () => {
+    it("should extract number props with proper initial values", async () => {
+      const metadata = await generateMetadata(
+        "test-numbers",
+        `
+export type PublicRootProps = {
+  gap?: number;
+  itemsPerView?: number;
+  autoplayInterval?: number;
+  min?: number;
+  max?: number;
+};
+
+export const NumbersRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const gapProp = metadata?.pieces[0].props.find((p) => p.name === "gap");
+      expect(gapProp).toBeDefined();
+      expect(gapProp?.type).toBe("number");
+      expect(gapProp?.initialValue).toBe(0);
+
+      const itemsPerViewProp = metadata?.pieces[0].props.find(
+        (p) => p.name === "itemsPerView"
+      );
+      expect(itemsPerViewProp).toBeDefined();
+      expect(itemsPerViewProp?.type).toBe("number");
+      expect(itemsPerViewProp?.initialValue).toBe(0);
+    });
+  });
+
+  describe("function type detection", () => {
+    it("should detect function types without QRL wrapper", async () => {
+      const metadata = await generateMetadata(
+        "test-function-types",
+        `
+export type PublicRootProps = {
+  onClick?: () => void;
+  onChange?: (value: string) => void;
+  onSubmit?: (event: Event) => boolean;
+  onFocus?: () => Promise<void>;
+};
+
+export const FunctionTypesRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const onClickProp = metadata?.pieces[0].props.find((p) => p.name === "onClick");
+      expect(onClickProp).toBeDefined();
+      expect(onClickProp?.type).toBe("function");
+      expect(onClickProp?.isFunction).toBe(true);
+
+      const onChangeProp = metadata?.pieces[0].props.find((p) => p.name === "onChange");
+      expect(onChangeProp).toBeDefined();
+      expect(onChangeProp?.type).toBe("function");
+      expect(onChangeProp?.isFunction).toBe(true);
+    });
+
+    it("should detect function types in union with other types", async () => {
+      const metadata = await generateMetadata(
+        "test-function-union",
+        `
+export type PublicRootProps = {
+  handler?: (() => void) | string;
+  callback?: number | (() => void);
+};
+
+export const FunctionUnionRoot = component$((props: PublicRootProps) => {
+  return <div></div>;
+});
+`
+      );
+
+      const handlerProp = metadata?.pieces[0].props.find((p) => p.name === "handler");
+      expect(handlerProp).toBeDefined();
+      // Union types with functions might need special handling
+      expect(handlerProp?.type).toBeDefined();
+    });
+  });
+
+  describe("component naming conventions", () => {
+    it("should only extract Public*Props types", async () => {
+      const componentName = "test-naming";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+type FieldRootProps = {
+  name?: string;
+  value?: string;
+};
+
+type PublicRootProps = {
+  label?: string;
+};
+
+export const NamingRoot = component$((props: PublicRootProps) => {
+  return <div>{props.label}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      // Should only extract PublicRootProps, not FieldRootProps
+      const labelProp = metadata.pieces[0]?.props.find((p) => p.name === "label");
+      expect(labelProp).toBeDefined();
+
+      const nameProp = metadata.pieces[0]?.props.find((p) => p.name === "name");
+      expect(nameProp).toBeUndefined();
+    });
+  });
+
+  describe("component type extraction from any referenced type", () => {
+    it("should extract props from any type alias used in component$ parameter", async () => {
+      const componentName = "test-field-like";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+type FieldRootProps = {
+  name?: string;
+  value?: string;
+  disabled?: boolean;
+};
+
+export const FieldRoot = component$((props: FieldRootProps) => {
+  return <div>{props.name}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+      expect(metadata.pieces[0].name).toBe("Root");
+
+      // Should extract props from FieldRootProps, not just Public*Props
+      const nameProp = metadata.pieces[0]?.props.find((p) => p.name === "name");
+      expect(nameProp).toBeDefined();
+      expect(nameProp?.type).toBe("string");
+
+      const valueProp = metadata.pieces[0]?.props.find((p) => p.name === "value");
+      expect(valueProp).toBeDefined();
+      expect(valueProp?.type).toBe("string");
+
+      const disabledProp = metadata.pieces[0]?.props.find((p) => p.name === "disabled");
+      expect(disabledProp).toBeDefined();
+      expect(disabledProp?.type).toBe("boolean");
+    });
+
+    it("should extract props from generic type parameter in component$", async () => {
+      const componentName = "test-generic-type";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+type CustomRootProps = {
+  label?: string;
+  count?: number;
+};
+
+export const GenericRoot = component$<CustomRootProps>((props) => {
+  return <div>{props.label}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+
+      const labelProp = metadata.pieces[0]?.props.find((p) => p.name === "label");
+      expect(labelProp).toBeDefined();
+      expect(labelProp?.type).toBe("string");
+
+      const countProp = metadata.pieces[0]?.props.find((p) => p.name === "count");
+      expect(countProp).toBeDefined();
+      expect(countProp?.type).toBe("number");
+    });
+
+    it("should extract props from type alias that resolves to intersection with TSTypeLiteral", async () => {
+      const componentName = "test-type-alias-intersection";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+type FieldRootProps = {
+  name?: string;
+  onChange$?: (value: unknown) => void;
+} & {
+  disabled?: boolean;
+  required?: boolean;
+};
+
+export const FieldRoot = component$((props: FieldRootProps) => {
+  return <div>{props.name}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+      expect(metadata.pieces[0].name).toBe("Root");
+
+      // Should extract props from the TSTypeLiteral in the intersection
+      const nameProp = metadata.pieces[0]?.props.find((p) => p.name === "name");
+      expect(nameProp).toBeDefined();
+      expect(nameProp?.type).toBe("string");
+
+      const disabledProp = metadata.pieces[0]?.props.find((p) => p.name === "disabled");
+      expect(disabledProp).toBeDefined();
+      expect(disabledProp?.type).toBe("boolean");
+    });
+
+    it("should extract props from intersection types in component$ parameter", async () => {
+      const componentName = "test-intersection-param";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-input.tsx`),
+        `
+import type { PropsOf } from "@qwik.dev/core";
+import type { BindableProps } from "@qds.dev/utils";
+
+export const FieldInput = component$(
+  (props: PropsOf<"input"> & BindableProps<{ value: string }>) => {
+    return <input />;
+  }
+);
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+      expect(metadata.pieces[0].name).toBe("Input");
+
+      // Should extract value prop from BindableProps
+      const valueProp = metadata.pieces[0]?.props.find((p) => p.name === "value");
+      expect(valueProp).toBeDefined();
+      expect(valueProp?.type).toBe("string");
+      expect(valueProp?.isBindable).toBe(true);
+    });
+
+    it("should exclude props starting with underscore", async () => {
+      const componentName = "test-exclude-underscore";
+      const componentDir = join(tempDir, componentName);
+      mkdirSync(componentDir, { recursive: true });
+
+      writeFileSync(
+        join(componentDir, `${componentName}-root.tsx`),
+        `
+type RootProps = {
+  name?: string;
+  _internal?: boolean;
+  value?: string;
+};
+
+export const Root = component$((props: RootProps) => {
+  return <div>{props.name}</div>;
+});
+`,
+        "utf-8"
+      );
+
+      await generateComponentMetadata(componentName, tempDir, tempOutputDir, () => {});
+
+      const outputFile = join(tempOutputDir, `${componentName}.json`);
+      const metadata = JSON.parse(
+        await readFile(outputFile, "utf-8")
+      ) as ComponentMetadata;
+
+      expect(metadata.pieces).toHaveLength(1);
+
+      const nameProp = metadata.pieces[0]?.props.find((p) => p.name === "name");
+      expect(nameProp).toBeDefined();
+
+      const valueProp = metadata.pieces[0]?.props.find((p) => p.name === "value");
+      expect(valueProp).toBeDefined();
+
+      // Should exclude _internal prop
+      const internalProp = metadata.pieces[0]?.props.find((p) => p.name === "_internal");
+      expect(internalProp).toBeUndefined();
+    });
+  });
+
+  describe("complex type scenarios", () => {
+    it("should handle PropsOf intersection types", async () => {
+      const metadata = await generateMetadata(
+        "test-props-of",
+        `
+import type { PropsOf } from "@qwik.dev/core";
+
+export type PublicRootProps = PropsOf<"div"> & {
+  customProp?: boolean;
+};
+
+export const PropsOfRoot = component$((props: PublicRootProps) => {
+  return <div>{props.customProp}</div>;
+});
+`
+      );
+
+      const customProp = metadata?.pieces[0].props.find((p) => p.name === "customProp");
+      expect(customProp).toBeDefined();
+      expect(customProp?.type).toBe("boolean");
+    });
+
+    it("should handle Omit utility types", async () => {
+      const metadata = await generateMetadata(
+        "test-omit",
+        `
+import type { PropsOf } from "@qwik.dev/core";
+
+export type PublicRootProps = Omit<PropsOf<"div">, "onChange$"> & {
+  customProp?: string;
+};
+
+export const OmitRoot = component$((props: PublicRootProps) => {
+  return <div>{props.customProp}</div>;
+});
+`
+      );
+
+      const customProp = metadata?.pieces[0].props.find((p) => p.name === "customProp");
+      expect(customProp).toBeDefined();
+      expect(customProp?.type).toBe("string");
+    });
+
+    it("should handle multiple intersections with BindableProps", async () => {
+      const metadata = await generateMetadata(
+        "test-complex-intersection",
+        `
+import type { BindableProps } from "@qds.dev/utils";
+import type { PropsOf } from "@qwik.dev/core";
+
+export type PublicRootProps = Omit<PropsOf<"div">, "onChange$"> & {
+  label?: string;
+  disabled?: boolean;
+} & BindableProps<{
+  value: string;
+  checked: boolean;
+}>;
+
+export const ComplexIntersectionRoot = component$((props: PublicRootProps) => {
+  return <div>{props.label}</div>;
+});
+`
+      );
+
+      const labelProp = metadata?.pieces[0].props.find((p) => p.name === "label");
+      expect(labelProp).toBeDefined();
+      expect(labelProp?.type).toBe("string");
+      expect(labelProp?.isBindable).toBe(false);
+
+      const valueProp = metadata?.pieces[0].props.find((p) => p.name === "value");
+      expect(valueProp).toBeDefined();
+      expect(valueProp?.isBindable).toBe(true);
+
+      const checkedProp = metadata?.pieces[0].props.find((p) => p.name === "checked");
+      expect(checkedProp).toBeDefined();
+      expect(checkedProp?.isBindable).toBe(true);
+    });
+  });
+
+  describe("deduplication", () => {
+    it("should not duplicate props in date-input component (REAL FILE TEST)", async () => {
+      // Read the ACTUAL generated file from docs/public/component-metadata
+      const actualFile = join(
+        process.cwd(),
+        "docs/public/component-metadata/date-input.json"
+      );
+
+      // Always regenerate with logging to see where duplicates come from
+      const componentsDir = join(process.cwd(), "libs/components/src");
+      const outputDir = join(process.cwd(), "docs/public/component-metadata");
+      await generateComponentMetadata(
+        "date-input",
+        componentsDir,
+        outputDir,
+        (msg, ...args) => {
+          console.log(`[DEBUG] ${msg}`, ...args);
+        }
+      );
+
+      const metadata = JSON.parse(
+        await readFile(actualFile, "utf-8")
+      ) as ComponentMetadata;
+
+      // Check each piece for duplicates - FAIL if ANY piece has duplicate prop names
+      for (const piece of metadata.pieces) {
+        const propNames = piece.props.map((p) => p.name);
+        const seen = new Set<string>();
+        const duplicates: string[] = [];
+
+        for (const propName of propNames) {
+          if (seen.has(propName)) {
+            duplicates.push(propName);
+          } else {
+            seen.add(propName);
+          }
+        }
+
+        if (duplicates.length > 0) {
+          const uniqueDuplicates = Array.from(new Set(duplicates));
+          throw new Error(
+            `DUPLICATE PROPS FOUND in piece "${piece.name}": ${uniqueDuplicates.join(", ")}\n` +
+              `Total props: ${propNames.length}, Unique props: ${seen.size}\n` +
+              `All prop names: ${JSON.stringify(propNames, null, 2)}\n` +
+              `Full piece: ${JSON.stringify(piece, null, 2)}`
+          );
+        }
+
+        expect(duplicates).toHaveLength(0);
+        expect(propNames.length).toBe(seen.size);
+      }
+    });
+
+    it("should not have duplicate props in date-input.json file", async () => {
+      // Read the ACTUAL file from disk without regenerating
+      const actualFile = join(
+        process.cwd(),
+        "docs/public/component-metadata/date-input.json"
+      );
+
+      if (!existsSync(actualFile)) {
+        throw new Error(`File does not exist: ${actualFile}`);
+      }
+
+      const metadata = JSON.parse(
+        await readFile(actualFile, "utf-8")
+      ) as ComponentMetadata;
+
+      // Check each piece for duplicates - FAIL if ANY piece has duplicate prop names
+      for (const piece of metadata.pieces) {
+        const propNames = piece.props.map((p) => p.name);
+        const seen = new Set<string>();
+        const duplicates: string[] = [];
+
+        for (const propName of propNames) {
+          if (seen.has(propName)) {
+            duplicates.push(propName);
+          } else {
+            seen.add(propName);
+          }
+        }
+
+        if (duplicates.length > 0) {
+          const uniqueDuplicates = Array.from(new Set(duplicates));
+          throw new Error(
+            `DUPLICATE PROPS FOUND in piece "${piece.name}": ${uniqueDuplicates.join(", ")}\n` +
+              `Total props: ${propNames.length}, Unique props: ${seen.size}\n` +
+              `All prop names: ${JSON.stringify(propNames, null, 2)}\n` +
+              `Full piece: ${JSON.stringify(piece, null, 2)}`
+          );
+        }
+
+        expect(duplicates).toHaveLength(0);
+        expect(propNames.length).toBe(seen.size);
+      }
+    });
+  });
+});
diff --git a/libs/tools/docs/index.ts b/libs/tools/docs/index.ts
new file mode 100644
index 000000000..074a5ae04
--- /dev/null
+++ b/libs/tools/docs/index.ts
@@ -0,0 +1,7 @@
+export * from "./component-props";
+
+export type { ComponentMetadata, ComponentPiece, PropType } from "./component-props";
+
+
+
+
diff --git a/libs/tools/package.json b/libs/tools/package.json
index 8f66762ee..3485074b3 100644
--- a/libs/tools/package.json
+++ b/libs/tools/package.json
@@ -10,24 +10,28 @@
   ],
   "main": "./lib/src/index.qwik.mjs",
   "qwik": "./lib/src/index.qwik.mjs",
-  "types": "./lib-types/tools/src/index.d.ts",
+  "types": "./lib-types/src/index.d.ts",
   "exports": {
     ".": {
       "import": "./lib/src/index.qwik.mjs",
-      "types": "./lib-types/tools/src/index.d.ts"
+      "types": "./lib-types/src/index.d.ts"
     },
     "./package.json": "./package.json",
     "./vite": {
       "import": "./lib/vite/index.qwik.mjs",
-      "types": "./lib-types/tools/vite/index.d.ts"
+      "types": "./lib-types/vite/index.d.ts"
     },
     "./utils": {
       "import": "./lib/utils/index.qwik.mjs",
-      "types": "./lib-types/tools/utils/index.d.ts"
+      "types": "./lib-types/utils/index.d.ts"
     },
     "./rolldown": {
       "import": "./lib/rolldown/index.qwik.mjs",
-      "types": "./lib-types/tools/rolldown/index.d.ts"
+      "types": "./lib-types/rolldown/index.d.ts"
+    },
+    "./docs": {
+      "import": "./lib/docs/index.qwik.mjs",
+      "types": "./lib-types/docs/index.d.ts"
     }
   },
   "scripts": {
@@ -40,13 +44,14 @@
     "@iconify/types": "^2",
     "magic-string": "^0.30.17",
     "rolldown": "1.0.0-beta.45",
-    "vite": "^7.0.6",
-    "typescript": "5.4.5"
+    "typescript": "5.9.3",
+    "vite": "^7.0.6"
   },
   "dependencies": {
-    "@iconify/utils": "^3.0.1",
     "@iconify/json": "^2.2.382",
+    "@iconify/utils": "^3.0.1",
     "@oxc-project/types": "^0.87.0",
+    "magic-regexp": "^0.10.0",
     "oxc-parser": "^0.94.0",
     "oxc-walker": "^0.5.2",
     "remark": "^15.0.1",
diff --git a/libs/tools/rolldown.config.ts b/libs/tools/rolldown.config.ts
index 06f755648..ccecaf9e6 100644
--- a/libs/tools/rolldown.config.ts
+++ b/libs/tools/rolldown.config.ts
@@ -9,7 +9,13 @@ const makeRegex = (dep: string) => new RegExp(`^${dep}(/.*)?$`);
 const excludeAll = (obj: Record<string, string>) => Object.keys(obj).map(makeRegex);
 
 export default defineConfig({
-  input: ["./src/index.ts", "./vite/index.ts", "./utils/index.ts", "./rolldown/index.ts"],
+  input: [
+    "./src/index.ts",
+    "./vite/index.ts",
+    "./utils/index.ts",
+    "./rolldown/index.ts",
+    "./docs/index.ts"
+  ],
   output: {
     format: "esm",
     dir: "./lib",
diff --git a/libs/tools/rolldown/inline-css.ts b/libs/tools/rolldown/inline-css.ts
index 8ea7f03e7..f685b3391 100644
--- a/libs/tools/rolldown/inline-css.ts
+++ b/libs/tools/rolldown/inline-css.ts
@@ -1,4 +1,5 @@
 import { readFileSync } from "node:fs";
+import { createRegExp, exactly } from "magic-regexp";
 
 /**
  * Rolldown plugin to handle CSS imports with ?inline query parameter
@@ -13,11 +14,14 @@ export function inlineCssPlugin() {
     name: "rolldown-plugin-inline-css",
 
     resolveId(source: string, _importer?: string, _options?: unknown) {
-      // Check if this is a CSS file with ?inline query
+      const cssFilePattern = createRegExp(
+        exactly(".css"),
+        exactly("?").or(exactly("").at.lineEnd())
+      );
       if (
         typeof source === "string" &&
         source.includes("?inline") &&
-        /\.css(\?|$)/.test(source)
+        cssFilePattern.test(source)
       ) {
         // Let Rolldown resolve the file path normally
         // We'll handle the transformation in the load hook
@@ -27,9 +31,11 @@ export function inlineCssPlugin() {
     },
 
     load(this: PluginContext, id: string) {
-      // Check if this is a CSS file with ?inline query
-      if (typeof id === "string" && id.includes("?inline") && /\.css(\?|$)/.test(id)) {
-        // Remove query parameters to get the actual file path
+      const cssFilePattern = createRegExp(
+        exactly(".css"),
+        exactly("?").or(exactly("").at.lineEnd())
+      );
+      if (typeof id === "string" && id.includes("?inline") && cssFilePattern.test(id)) {
         const parts = id.split("?");
         const filePath = parts[0];
 
@@ -38,11 +44,8 @@ export function inlineCssPlugin() {
         }
 
         try {
-          // Read the CSS file content
           const cssContent = readFileSync(filePath, "utf-8");
 
-          // Return as a JavaScript module that exports the CSS string
-          // This is what Vite does - it returns the raw CSS as a string
           return {
             code: `export default ${JSON.stringify(cssContent)};`,
             map: null
diff --git a/libs/tools/rolldown/qds-transform.ts b/libs/tools/rolldown/qds-transform.ts
index 408026feb..3bd897c45 100644
--- a/libs/tools/rolldown/qds-transform.ts
+++ b/libs/tools/rolldown/qds-transform.ts
@@ -1,4 +1,5 @@
 import type { CallExpression, ImportDeclaration, Node } from "@oxc-project/types";
+import { charIn, createRegExp, exactly, maybe } from "magic-regexp";
 import MagicString from "magic-string";
 import { parseSync } from "oxc-parser";
 import { walk } from "oxc-walker";
@@ -12,7 +13,14 @@ export function qdsTransformPlugin() {
     enforce: "pre" as const,
 
     transform(code: string, id: string) {
-      const isJsxFile = /\.[jt]sx?$/.test(id);
+      const jsxFilePattern = createRegExp(
+        exactly("."),
+        charIn("jt"),
+        exactly("s"),
+        maybe(exactly("x")),
+        exactly("").at.lineEnd()
+      );
+      const isJsxFile = jsxFilePattern.test(id);
       if (!isJsxFile) return null;
 
       let ast: ReturnType<typeof parseSync>;
diff --git a/libs/tools/src/vite.ts b/libs/tools/src/vite.ts
new file mode 100644
index 000000000..3bbd77de1
--- /dev/null
+++ b/libs/tools/src/vite.ts
@@ -0,0 +1 @@
+export type { AsChildTypes } from "../vite";
diff --git a/libs/tools/tsconfig.json b/libs/tools/tsconfig.json
index ec2e01e0a..571fee97b 100644
--- a/libs/tools/tsconfig.json
+++ b/libs/tools/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     "module": "esnext",
     "target": "esnext",
     "lib": ["esnext", "DOM"],
@@ -17,5 +18,13 @@
     "emitDeclarationOnly": true,
     "types": ["node"]
   },
-  "include": ["vite/**/*", "src/**/*", "utils/**/*", "rolldown/**/*", "linter/**/*"]
+  "include": [
+    "vite/**/*",
+    "src/**/*",
+    "utils/**/*",
+    "rolldown/**/*",
+    "linter/**/*",
+    "docs/**/*"
+  ],
+  "exclude": ["src/**/*.unit.ts"]
 }
diff --git a/libs/tools/utils/icons/naming.ts b/libs/tools/utils/icons/naming.ts
index 5527c05fc..2982806aa 100644
--- a/libs/tools/utils/icons/naming.ts
+++ b/libs/tools/utils/icons/naming.ts
@@ -1,6 +1,7 @@
 import { readdirSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname } from "node:path";
+import { charIn, createRegExp, digit, letter } from "magic-regexp";
 
 /**
  * Convert PascalCase to kebab-case
@@ -8,9 +9,21 @@ import { dirname } from "node:path";
  * @returns kebab-case string
  */
 export function toKebabCase(str: string): string {
+  const upperBeforeUpperLowerPattern = createRegExp(
+    letter.uppercase.grouped().before(letter.uppercase.and(letter.lowercase))
+  );
+  const lowerUpperPattern = createRegExp(
+    letter.lowercase.or(digit).grouped(),
+    letter.uppercase.grouped()
+  );
+  const upperBeforeUpperLowerGlobal = new RegExp(
+    upperBeforeUpperLowerPattern.source,
+    "g"
+  );
+  const lowerUpperGlobal = new RegExp(lowerUpperPattern.source, "g");
   return str
-    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .replace(upperBeforeUpperLowerGlobal, "$1-")
+    .replace(lowerUpperGlobal, "$1-$2")
     .toLowerCase();
 }
 
@@ -20,8 +33,10 @@ export function toKebabCase(str: string): string {
  * @returns PascalCase string
  */
 export function toPascalCase(str: string): string {
+  const dashUnderscorePattern = createRegExp(charIn("-_"));
+  const globalPattern = new RegExp(dashUnderscorePattern.source, "g");
   return str
-    .replace(/[-_]/g, " ")
+    .replace(globalPattern, " ")
     .split(" ")
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
     .join("");
@@ -42,7 +57,8 @@ export function sanitizeIconName(
   if (customSanitizer) {
     return customSanitizer(name);
   }
-  return /^\d/.test(name) ? `Icon${name}` : name;
+  const startsWithDigitPattern = createRegExp(digit.at.lineStart());
+  return startsWithDigitPattern.test(name) ? `Icon${name}` : name;
 }
 
 /**
@@ -122,7 +138,11 @@ export function discoverAllIconifyCollections(): Record<
       const collectionName = toPascalCase(prefix);
 
       // Skip if collection name is not valid (contains special chars, etc.)
-      if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(collectionName)) {
+      const validIdentifierPattern = createRegExp(
+        letter.at.lineStart(),
+        charIn("a-zA-Z0-9").times.any()
+      );
+      if (!validIdentifierPattern.test(collectionName)) {
         console.log(
           `[icons] Skipping invalid collection name: ${collectionName} (from ${prefix})`
         );
diff --git a/libs/tools/utils/transform-dts.ts b/libs/tools/utils/transform-dts.ts
index ae3897e52..965728c2c 100644
--- a/libs/tools/utils/transform-dts.ts
+++ b/libs/tools/utils/transform-dts.ts
@@ -2,6 +2,7 @@
 import { readFile, stat, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
 import type { ImportDeclaration, Node } from "@oxc-project/types";
+import { charNotIn, createRegExp, exactly, oneOrMore } from "magic-regexp";
 import MagicString from "magic-string";
 import { parseSync } from "oxc-parser";
 import { walk } from "oxc-walker";
@@ -46,10 +47,15 @@ function injectAsChildTypesIntoComponent(
     const typeStr = content.slice(typeNode.start, typeNode.end);
     if (!typeStr.includes("Component<")) continue;
 
-    const match = typeStr.match(/Component<([^>]+)>/);
+    const componentPattern = createRegExp(
+      exactly("Component<"),
+      oneOrMore(charNotIn(">")).groupedAs("propsType"),
+      exactly(">")
+    );
+    const match = typeStr.match(componentPattern);
     if (!match) continue;
 
-    const propsType = match[1];
+    const propsType = match.groups?.propsType ?? "";
     if (propsType.includes("AsChildTypes")) continue;
 
     const componentTypeEnd = typeNode.start + typeStr.lastIndexOf(">");
diff --git a/libs/utils/package.json b/libs/utils/package.json
index a331b8c07..e43078291 100644
--- a/libs/utils/package.json
+++ b/libs/utils/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@types/node": "24.9.0",
-    "typescript": "5.4.5",
+    "typescript": "5.9.3",
     "rolldown": "1.0.0-beta.45",
     "@qwik.dev/core": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12be2c298..86c4eedfb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,6 +76,9 @@ importers:
 
   docs:
     dependencies:
+      '@shikijs/twoslash':
+        specifier: ^3.15.0
+        version: 3.15.0(typescript@5.9.3)
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
@@ -85,9 +88,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      rehype-pretty-code:
-        specifier: ^0.13.2
-        version: 0.13.2(shiki@1.29.2)
+      magic-regexp:
+        specifier: ^0.10.0
+        version: 0.10.0
       tailwind-merge:
         specifier: ^2.5.0
         version: 2.6.0
@@ -112,7 +115,7 @@ importers:
         version: https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@3.2.4)
       '@qwik.dev/router':
         specifier: https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144
-        version: https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144(@qwik.dev/core@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.5)(typescript@5.4.5)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
+        version: https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144(@qwik.dev/core@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
       '@qwikest/icons':
         specifier: ^0.0.13
         version: 0.0.13(@builder.io/qwik@1.16.1(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)))
@@ -131,12 +134,15 @@ importers:
       pagefind:
         specifier: 1.2.0
         version: 1.2.0
+      shiki:
+        specifier: ^3.15.0
+        version: 3.15.0
       tailwindcss:
         specifier: ^4.1.3
         version: 4.1.14
       typescript:
-        specifier: 5.4.5
-        version: 5.4.5
+        specifier: 5.9.3
+        version: 5.9.3
       unified:
         specifier: ^11.0.4
         version: 11.0.5
@@ -148,7 +154,7 @@ importers:
         version: 1.1.9(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
       vite-tsconfig-paths:
         specifier: ^4.2.1
-        version: 4.3.2(typescript@5.4.5)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
+        version: 4.3.2(typescript@5.9.3)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
 
   libs/components:
     dependencies:
@@ -175,8 +181,8 @@ importers:
         specifier: 1.0.0-beta.45
         version: 1.0.0-beta.45
       typescript:
-        specifier: 5.4.5
-        version: 5.4.5
+        specifier: 5.9.3
+        version: 5.9.3
       uqr:
         specifier: ^0.1.2
         version: 0.1.2
@@ -195,6 +201,9 @@ importers:
       '@oxc-project/types':
         specifier: ^0.87.0
         version: 0.87.0
+      magic-regexp:
+        specifier: ^0.10.0
+        version: 0.10.0
       oxc-parser:
         specifier: ^0.94.0
         version: 0.94.0
@@ -218,8 +227,8 @@ importers:
         specifier: 1.0.0-beta.45
         version: 1.0.0-beta.45
       typescript:
-        specifier: 5.4.5
-        version: 5.4.5
+        specifier: 5.9.3
+        version: 5.9.3
       vite:
         specifier: ^7.0.6
         version: 7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
@@ -236,8 +245,8 @@ importers:
         specifier: 1.0.0-beta.45
         version: 1.0.0-beta.45
       typescript:
-        specifier: 5.4.5
-        version: 5.4.5
+        specifier: 5.9.3
+        version: 5.9.3
 
 packages:
 
@@ -1613,23 +1622,28 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@1.29.2':
-    resolution: {integrity: sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==}
+  '@shikijs/core@3.15.0':
+    resolution: {integrity: sha512-8TOG6yG557q+fMsSVa8nkEDOZNTSxjbbR8l6lF2gyr6Np+jrPlslqDxQkN6rMXCECQ3isNPZAGszAfYoJOPGlg==}
 
-  '@shikijs/engine-javascript@1.29.2':
-    resolution: {integrity: sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==}
+  '@shikijs/engine-javascript@3.15.0':
+    resolution: {integrity: sha512-ZedbOFpopibdLmvTz2sJPJgns8Xvyabe2QbmqMTz07kt1pTzfEvKZc5IqPVO/XFiEbbNyaOpjPBkkr1vlwS+qg==}
 
-  '@shikijs/engine-oniguruma@1.29.2':
-    resolution: {integrity: sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==}
+  '@shikijs/engine-oniguruma@3.15.0':
+    resolution: {integrity: sha512-HnqFsV11skAHvOArMZdLBZZApRSYS4LSztk2K3016Y9VCyZISnlYUYsL2hzlS7tPqKHvNqmI5JSUJZprXloMvA==}
 
-  '@shikijs/langs@1.29.2':
-    resolution: {integrity: sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==}
+  '@shikijs/langs@3.15.0':
+    resolution: {integrity: sha512-WpRvEFvkVvO65uKYW4Rzxs+IG0gToyM8SARQMtGGsH4GDMNZrr60qdggXrFOsdfOVssG/QQGEl3FnJ3EZ+8w8A==}
 
-  '@shikijs/themes@1.29.2':
-    resolution: {integrity: sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==}
+  '@shikijs/themes@3.15.0':
+    resolution: {integrity: sha512-8ow2zWb1IDvCKjYb0KiLNrK4offFdkfNVPXb1OZykpLCzRU6j+efkY+Y7VQjNlNFXonSw+4AOdGYtmqykDbRiQ==}
 
-  '@shikijs/types@1.29.2':
-    resolution: {integrity: sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==}
+  '@shikijs/twoslash@3.15.0':
+    resolution: {integrity: sha512-3GoJvYMm2oj4Mq+yJyXt9vmMFfih34FBlLMYLRAIXNmBrj3/6jsuHKakGHMVza5jui6TmmjbS5bmJI29UHftQQ==}
+    peerDependencies:
+      typescript: '>=5.5.0'
+
+  '@shikijs/types@3.15.0':
+    resolution: {integrity: sha512-BnP+y/EQnhihgHy4oIAN+6FFtmfTekwOLsQbRw9hOKwqgNy8Bdsjq8B05oAt/ZgvIWWFrshV71ytOrlPfYjIJw==}
 
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -1804,6 +1818,11 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@typescript/vfs@1.6.2':
+    resolution: {integrity: sha512-hoBwJwcbKHmvd2QVebiytN1aELvpk9B74B4L1mFm/XT1Q/VOYAWl2vQ9AWRFtQq8zmz6enTpfTV8WRc4ATjW/g==}
+    peerDependencies:
+      typescript: '*'
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -2254,9 +2273,6 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  emoji-regex-xs@1.0.0:
-    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
-
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
@@ -2275,10 +2291,6 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
   env-paths@3.0.0:
     resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2498,12 +2510,6 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-html@2.0.3:
-    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
-
-  hast-util-from-parse5@8.0.3:
-    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
-
   hast-util-heading-rank@2.1.1:
     resolution: {integrity: sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==}
 
@@ -2516,9 +2522,6 @@ packages:
   hast-util-parse-selector@3.1.1:
     resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
 
-  hast-util-parse-selector@4.0.0:
-    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
-
   hast-util-to-estree@3.1.3:
     resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
@@ -2531,18 +2534,12 @@ packages:
   hast-util-to-string@2.0.0:
     resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
 
-  hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
-
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
   hastscript@7.2.0:
     resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
 
-  hastscript@9.0.1:
-    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
-
   hosted-git-info@7.0.2:
     resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3210,8 +3207,11 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  oniguruma-to-es@2.3.0:
-    resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
 
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
@@ -3285,12 +3285,6 @@ packages:
     resolution: {integrity: sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==}
     engines: {node: '>= 18'}
 
-  parse-numeric-range@1.3.0:
-    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
-
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
-
   path-exists@5.0.0:
     resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3395,14 +3389,14 @@ packages:
   refractor@4.9.0:
     resolution: {integrity: sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og==}
 
-  regex-recursion@5.1.1:
-    resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
 
   regex-utilities@2.3.0:
     resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
-  regex@5.1.1:
-    resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
   regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
@@ -3411,15 +3405,6 @@ packages:
   rehype-autolink-headings@7.1.0:
     resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
 
-  rehype-parse@9.0.1:
-    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
-
-  rehype-pretty-code@0.13.2:
-    resolution: {integrity: sha512-F+PaFMscfJOcSHcR2b//+hk/0jT56hmGDqXcVD6VC9j0CUSGiqv8YxaWUyhR7qEIRRSbzAVxx+0uxzk+akXs+w==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      shiki: ^1.3.0
-
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
@@ -3509,8 +3494,8 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
-  shiki@1.29.2:
-    resolution: {integrity: sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==}
+  shiki@3.15.0:
+    resolution: {integrity: sha512-kLdkY6iV3dYbtPwS9KXU7mjfmDm25f5m0IPNFnaXO7TBPcvbUOY72PYXSuSqDzwp+vlH/d7MXpHlKO/x+QoLXw==}
 
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
@@ -3661,6 +3646,14 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  twoslash-protocol@0.3.4:
+    resolution: {integrity: sha512-HHd7lzZNLUvjPzG/IE6js502gEzLC1x7HaO1up/f72d8G8ScWAs9Yfa97igelQRDl5h9tGcdFsRp+lNVre1EeQ==}
+
+  twoslash@0.3.4:
+    resolution: {integrity: sha512-RtJURJlGRxrkJmTcZMjpr7jdYly1rfgpujJr1sBM9ch7SKVht/SjFk23IOAyvwT1NLCk+SJiMrvW4rIAUM2Wug==}
+    peerDependencies:
+      typescript: ^5.5.0
+
   type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
@@ -3672,8 +3665,8 @@ packages:
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
-  typescript@5.4.5:
-    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -3747,9 +3740,6 @@ packages:
     resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  vfile-location@5.0.3:
-    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -3888,9 +3878,6 @@ packages:
       jsdom:
         optional: true
 
-  web-namespaces@2.0.1:
-    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
-
   web-streams-polyfill@4.0.0-beta.3:
     resolution: {integrity: sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==}
     engines: {node: '>= 14'}
@@ -4802,7 +4789,7 @@ snapshots:
     optionalDependencies:
       vitest: 4.0.3(@types/debug@4.1.12)(@types/node@24.9.0)(@vitest/browser-playwright@4.0.3)(@vitest/ui@4.0.3)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
 
-  '@qwik.dev/router@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144(@qwik.dev/core@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.5)(typescript@5.4.5)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))':
+  '@qwik.dev/router@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144(@qwik.dev/core@https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))':
     dependencies:
       '@azure/functions': 3.5.1
       '@mdx-js/mdx': 3.1.1
@@ -4825,7 +4812,7 @@ snapshots:
       svgo: 3.3.2
       unified: 11.0.5
       unist-util-visit: 5.0.0
-      valibot: 1.1.0(typescript@5.4.5)
+      valibot: 1.1.0(typescript@5.9.3)
       vfile: 6.0.3
       vite: 7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
       vite-imagetools: 9.0.0(rollup@4.52.5)
@@ -5023,35 +5010,42 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
-  '@shikijs/core@1.29.2':
+  '@shikijs/core@3.15.0':
     dependencies:
-      '@shikijs/engine-javascript': 1.29.2
-      '@shikijs/engine-oniguruma': 1.29.2
-      '@shikijs/types': 1.29.2
+      '@shikijs/types': 3.15.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@1.29.2':
+  '@shikijs/engine-javascript@3.15.0':
     dependencies:
-      '@shikijs/types': 1.29.2
+      '@shikijs/types': 3.15.0
       '@shikijs/vscode-textmate': 10.0.2
-      oniguruma-to-es: 2.3.0
+      oniguruma-to-es: 4.3.3
 
-  '@shikijs/engine-oniguruma@1.29.2':
+  '@shikijs/engine-oniguruma@3.15.0':
     dependencies:
-      '@shikijs/types': 1.29.2
+      '@shikijs/types': 3.15.0
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@1.29.2':
+  '@shikijs/langs@3.15.0':
+    dependencies:
+      '@shikijs/types': 3.15.0
+
+  '@shikijs/themes@3.15.0':
     dependencies:
-      '@shikijs/types': 1.29.2
+      '@shikijs/types': 3.15.0
 
-  '@shikijs/themes@1.29.2':
+  '@shikijs/twoslash@3.15.0(typescript@5.9.3)':
     dependencies:
-      '@shikijs/types': 1.29.2
+      '@shikijs/core': 3.15.0
+      '@shikijs/types': 3.15.0
+      twoslash: 0.3.4(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
 
-  '@shikijs/types@1.29.2':
+  '@shikijs/types@3.15.0':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -5215,6 +5209,13 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
+  '@typescript/vfs@1.6.2(typescript@5.9.3)':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@vitest/browser-playwright@4.0.3(playwright@1.56.0)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))(vitest@4.0.3)':
@@ -5731,8 +5732,6 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  emoji-regex-xs@1.0.0: {}
-
   emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
@@ -5746,8 +5745,6 @@ snapshots:
 
   entities@4.5.0: {}
 
-  entities@6.0.1: {}
-
   env-paths@3.0.0: {}
 
   es-define-property@1.0.1: {}
@@ -6017,26 +6014,6 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-html@2.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      devlop: 1.1.0
-      hast-util-from-parse5: 8.0.3
-      parse5: 7.3.0
-      vfile: 6.0.3
-      vfile-message: 4.0.3
-
-  hast-util-from-parse5@8.0.3:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      devlop: 1.1.0
-      hastscript: 9.0.1
-      property-information: 7.1.0
-      vfile: 6.0.3
-      vfile-location: 5.0.3
-      web-namespaces: 2.0.1
-
   hast-util-heading-rank@2.1.1:
     dependencies:
       '@types/hast': 2.3.10
@@ -6053,10 +6030,6 @@ snapshots:
     dependencies:
       '@types/hast': 2.3.10
 
-  hast-util-parse-selector@4.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-to-estree@3.1.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -6116,10 +6089,6 @@ snapshots:
     dependencies:
       '@types/hast': 2.3.10
 
-  hast-util-to-string@3.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -6132,14 +6101,6 @@ snapshots:
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
-  hastscript@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 4.0.0
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-
   hosted-git-info@7.0.2:
     dependencies:
       lru-cache: 10.4.3
@@ -6365,7 +6326,7 @@ snapshots:
   magic-regexp@0.10.0:
     dependencies:
       estree-walker: 3.0.3
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       mlly: 1.8.0
       regexp-tree: 0.1.27
       type-level-regexp: 0.1.17
@@ -6379,7 +6340,6 @@ snapshots:
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-    optional: true
 
   markdown-extensions@2.0.0: {}
 
@@ -6930,11 +6890,13 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  oniguruma-to-es@2.3.0:
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.3:
     dependencies:
-      emoji-regex-xs: 1.0.0
-      regex: 5.1.1
-      regex-recursion: 5.1.1
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
 
   open@10.2.0:
     dependencies:
@@ -7078,12 +7040,6 @@ snapshots:
       es-module-lexer: 1.7.0
       slashes: 3.0.12
 
-  parse-numeric-range@1.3.0: {}
-
-  parse5@7.3.0:
-    dependencies:
-      entities: 6.0.1
-
   path-exists@5.0.0: {}
 
   path-key@3.1.1: {}
@@ -7196,14 +7152,13 @@ snapshots:
       hastscript: 7.2.0
       parse-entities: 4.0.2
 
-  regex-recursion@5.1.1:
+  regex-recursion@6.0.2:
     dependencies:
-      regex: 5.1.1
       regex-utilities: 2.3.0
 
   regex-utilities@2.3.0: {}
 
-  regex@5.1.1:
+  regex@6.0.1:
     dependencies:
       regex-utilities: 2.3.0
 
@@ -7218,22 +7173,6 @@ snapshots:
       unified: 11.0.5
       unist-util-visit: 5.0.0
 
-  rehype-parse@9.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-from-html: 2.0.3
-      unified: 11.0.5
-
-  rehype-pretty-code@0.13.2(shiki@1.29.2):
-    dependencies:
-      '@types/hast': 3.0.4
-      hast-util-to-string: 3.0.1
-      parse-numeric-range: 1.3.0
-      rehype-parse: 9.0.1
-      shiki: 1.29.2
-      unified: 11.0.5
-      unist-util-visit: 5.0.0
-
   rehype-recma@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -7432,14 +7371,14 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
-  shiki@1.29.2:
+  shiki@3.15.0:
     dependencies:
-      '@shikijs/core': 1.29.2
-      '@shikijs/engine-javascript': 1.29.2
-      '@shikijs/engine-oniguruma': 1.29.2
-      '@shikijs/langs': 1.29.2
-      '@shikijs/themes': 1.29.2
-      '@shikijs/types': 1.29.2
+      '@shikijs/core': 3.15.0
+      '@shikijs/engine-javascript': 3.15.0
+      '@shikijs/engine-oniguruma': 3.15.0
+      '@shikijs/langs': 3.15.0
+      '@shikijs/themes': 3.15.0
+      '@shikijs/types': 3.15.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
@@ -7563,9 +7502,9 @@ snapshots:
 
   trough@2.2.0: {}
 
-  tsconfck@3.1.6(typescript@5.4.5):
+  tsconfck@3.1.6(typescript@5.9.3):
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.9.3
 
   tslib@2.8.1: {}
 
@@ -7577,13 +7516,23 @@ snapshots:
       fsevents: 2.3.3
     optional: true
 
+  twoslash-protocol@0.3.4: {}
+
+  twoslash@0.3.4(typescript@5.9.3):
+    dependencies:
+      '@typescript/vfs': 1.6.2(typescript@5.9.3)
+      twoslash-protocol: 0.3.4
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   type-fest@0.21.3: {}
 
   type-fest@4.41.0: {}
 
   type-level-regexp@0.1.17: {}
 
-  typescript@5.4.5: {}
+  typescript@5.9.3: {}
 
   ufo@1.6.1: {}
 
@@ -7649,17 +7598,12 @@ snapshots:
 
   uuid@8.3.2: {}
 
-  valibot@1.1.0(typescript@5.4.5):
+  valibot@1.1.0(typescript@5.9.3):
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.9.3
 
   validate-npm-package-name@5.0.1: {}
 
-  vfile-location@5.0.3:
-    dependencies:
-      '@types/unist': 3.0.3
-      vfile: 6.0.3
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -7706,11 +7650,11 @@ snapshots:
       pathe: 1.1.2
       vite: 7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
 
-  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)):
+  vite-tsconfig-paths@4.3.2(typescript@5.9.3)(vite@7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)):
     dependencies:
       debug: 4.4.3(supports-color@10.2.2)
       globrex: 0.1.2
-      tsconfck: 3.1.6(typescript@5.4.5)
+      tsconfck: 3.1.6(typescript@5.9.3)
     optionalDependencies:
       vite: 7.1.5(@types/node@24.9.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
     transitivePeerDependencies:
@@ -7829,8 +7773,6 @@ snapshots:
       - tsx
       - yaml
 
-  web-namespaces@2.0.1: {}
-
   web-streams-polyfill@4.0.0-beta.3: {}
 
   webidl-conversions@3.0.1: {}