diff --git a/.gitignore b/.gitignore
index 6fdac783e..b4def37c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,6 @@ CLAUDE.md
 
 # Local Netlify folder
 .netlify
+
+# Generated by "npm run link:package" to make the symlinked vueless package self-describing
+src/package.json
diff --git a/.storybook/theme/theme.css b/.storybook/theme/theme.css
index 90f1bca50..747c176b4 100644
--- a/.storybook/theme/theme.css
+++ b/.storybook/theme/theme.css
@@ -35,4 +35,3 @@
   --rounded-md: 0.375rem;
   --rounded-lg: 0.5rem;
 }
-
diff --git a/.storybook/themes/theme.css b/.storybook/themes/theme.css
deleted file mode 100644
index 6e9212202..000000000
--- a/.storybook/themes/theme.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/* -------------------- Color Palettes -------------------- */
-
-:root {
-  /* Neutral (Gray) Colors */
-  --neutral-50: #f9fafb;
-  --neutral-100: #f3f4f6;
-  --neutral-200: #e5e7eb;
-  --neutral-300: #d1d5db;
-  --neutral-400: #9ca3af;
-  --neutral-500: #6b7280;
-  --neutral-600: #4b5563;
-  --neutral-700: #374151;
-  --neutral-800: #1f2937;
-  --neutral-900: #111827;
-  --neutral-950: #030712;
-
-  /* Primary (Green) Colors */
-  --primary-50: #f0fdf4;
-  --primary-100: #dcfce7;
-  --primary-200: #bbf7d0;
-  --primary-300: #86efac;
-  --primary-400: #4ade80;
-  --primary-500: #22c55e;
-  --primary-600: #16a34a;
-  --primary-700: #15803d;
-  --primary-800: #166534;
-  --primary-900: #14532d;
-  --primary-950: #052e16;
-
-  /* White */
-  --white: #ffffff;
-}
-
diff --git a/.storybook/themes/themeConfig.ts b/.storybook/themes/themeConfig.ts
deleted file mode 100644
index 910f2b505..000000000
--- a/.storybook/themes/themeConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const themeConfig = {
-  colors: {
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827",
-      950: "#030712",
-    },
-    white: "#ffffff",
-  },
-  borderRadius: {
-    sm: 4,
-    md: 8,
-    lg: 12,
-  },
-  fonts: {
-    fontBase: '"Roboto", sans-serif',
-    fontCode: "monospace",
-  },
-  brand: {
-    brandTitle: "Vueless UI",
-    brandUrl: "https://vueless.com",
-    brandTarget: "_blank",
-    brandImageLight: "./images/logo-light.svg",
-    brandImageDark: "./images/logo-dark.svg",
-  },
-};
diff --git a/.storybook/vite.config.ts b/.storybook/vite.config.ts
index c669587f5..9794e98ea 100644
--- a/.storybook/vite.config.ts
+++ b/.storybook/vite.config.ts
@@ -7,8 +7,10 @@ const __dirname = dirname(__filename);
 
 // Plugins
 import Vue from "@vitejs/plugin-vue";
-import { Vueless, TailwindCSS } from "vueless/plugin-vite.js";
-import { INTERNAL_ENV } from "vueless/constants.js";
+/* Imported via a relative path (not the `vueless` alias) so Storybook's config
+   loader can resolve them while the symlinked `vueless` package is bundled. */
+import { Vueless, TailwindCSS } from "../src/plugin-vite.js";
+import { INTERNAL_ENV } from "../src/constants.js";
 
 export default defineConfig({
   plugins: [Vue(), TailwindCSS(), Vueless({ env: INTERNAL_ENV })],
diff --git a/README.md b/README.md
index 1109e1285..b2462b7de 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [
 
 ### Key features
 
-- 🧩 65+ crafted UI components (including range date picker, multi-select, and nested table)
+- 🧩 74 crafted UI components (including range date picker, multi-select, and nested table)
 - ✨ Open Architecture lets you customize, copy, extend, and create your own components
 - 📕 Built-in Storybook support
 - 🪩 Theme Builder for runtime theme customization
diff --git a/eslint.config.ts b/eslint.config.ts
index 5d8ca5824..95ec4c496 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -80,6 +80,13 @@ export default defineConfigWithVueTs(
     files: ["src/**/tests/*"],
     ...pluginVitest.configs.recommended,
   },
+  {
+    name: "vueless-type-tests",
+    files: ["src/**/tests/*.test-d.ts"],
+    rules: {
+      "vitest/expect-expect": ["error", { assertFunctionNames: ["expect", "assert", "expectTypeOf"] }],
+    },
+  },
   {
     name: "eslint",
     files: ["eslint.config.*"],
diff --git a/package-lock.json b/package-lock.json
index d967dd27a..b8628772a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.11",
+  "version": "1.4.12-beta.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.11",
+      "version": "1.4.12-beta.20",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
@@ -14,7 +14,7 @@
         "@types/lodash-es": "^4.17.12",
         "cva": "^1.0.0-beta.4",
         "lodash-es": "^4.18.1",
-        "rolldown": "1.0.0-rc.17",
+        "rolldown": "^1.1.5",
         "svgo": "^4.0.1",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.4",
@@ -396,20 +396,30 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/core/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -427,9 +437,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
-      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
       "cpu": [
         "ppc64"
       ],
@@ -443,9 +453,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
-      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
       "cpu": [
         "arm"
       ],
@@ -459,9 +469,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
-      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
       "cpu": [
         "arm64"
       ],
@@ -475,9 +485,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
-      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
       "cpu": [
         "x64"
       ],
@@ -491,9 +501,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
-      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
       "cpu": [
         "arm64"
       ],
@@ -507,9 +517,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
-      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
       "cpu": [
         "x64"
       ],
@@ -523,9 +533,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
       "cpu": [
         "arm64"
       ],
@@ -539,9 +549,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
-      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
       "cpu": [
         "x64"
       ],
@@ -555,9 +565,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
-      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
       "cpu": [
         "arm"
       ],
@@ -571,9 +581,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
-      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
       "cpu": [
         "arm64"
       ],
@@ -587,9 +597,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
-      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
       "cpu": [
         "ia32"
       ],
@@ -603,9 +613,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
-      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
       "cpu": [
         "loong64"
       ],
@@ -619,9 +629,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
-      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
       "cpu": [
         "mips64el"
       ],
@@ -635,9 +645,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
-      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
       "cpu": [
         "ppc64"
       ],
@@ -651,9 +661,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
-      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
       "cpu": [
         "riscv64"
       ],
@@ -667,9 +677,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
-      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
       "cpu": [
         "s390x"
       ],
@@ -683,9 +693,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
-      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
       "cpu": [
         "x64"
       ],
@@ -699,9 +709,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
       "cpu": [
         "arm64"
       ],
@@ -715,9 +725,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
       "cpu": [
         "x64"
       ],
@@ -731,9 +741,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
       "cpu": [
         "arm64"
       ],
@@ -747,9 +757,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
       "cpu": [
         "x64"
       ],
@@ -763,9 +773,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
-      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
       "cpu": [
         "arm64"
       ],
@@ -779,9 +789,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
-      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
       "cpu": [
         "x64"
       ],
@@ -795,9 +805,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
-      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
       "cpu": [
         "arm64"
       ],
@@ -811,9 +821,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
-      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
       "cpu": [
         "ia32"
       ],
@@ -827,9 +837,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
-      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
       "cpu": [
         "x64"
       ],
@@ -1485,9 +1495,6 @@
       "dependencies": {
         "@tybys/wasm-util": "^0.10.3"
       },
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
-      },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/Brooooooklyn"
@@ -2078,6 +2085,7 @@
       "version": "0.127.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
       "integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
@@ -2482,9 +2490,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
-      "integrity": "sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
+      "integrity": "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==",
       "cpu": [
         "arm64"
       ],
@@ -2498,9 +2506,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.17.tgz",
-      "integrity": "sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz",
+      "integrity": "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==",
       "cpu": [
         "arm64"
       ],
@@ -2514,9 +2522,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.17.tgz",
-      "integrity": "sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz",
+      "integrity": "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==",
       "cpu": [
         "x64"
       ],
@@ -2530,9 +2538,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.17.tgz",
-      "integrity": "sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz",
+      "integrity": "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==",
       "cpu": [
         "x64"
       ],
@@ -2546,9 +2554,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.17.tgz",
-      "integrity": "sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz",
+      "integrity": "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==",
       "cpu": [
         "arm"
       ],
@@ -2562,9 +2570,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.17.tgz",
-      "integrity": "sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz",
+      "integrity": "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==",
       "cpu": [
         "arm64"
       ],
@@ -2578,9 +2586,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.17.tgz",
-      "integrity": "sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz",
+      "integrity": "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==",
       "cpu": [
         "arm64"
       ],
@@ -2594,9 +2602,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.17.tgz",
-      "integrity": "sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz",
+      "integrity": "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==",
       "cpu": [
         "ppc64"
       ],
@@ -2610,9 +2618,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.17.tgz",
-      "integrity": "sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz",
+      "integrity": "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==",
       "cpu": [
         "s390x"
       ],
@@ -2626,9 +2634,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.17.tgz",
-      "integrity": "sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz",
+      "integrity": "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==",
       "cpu": [
         "x64"
       ],
@@ -2642,9 +2650,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.17.tgz",
-      "integrity": "sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz",
+      "integrity": "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==",
       "cpu": [
         "x64"
       ],
@@ -2658,9 +2666,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.17.tgz",
-      "integrity": "sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz",
+      "integrity": "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==",
       "cpu": [
         "arm64"
       ],
@@ -2674,27 +2682,27 @@
       }
     },
     "node_modules/@rolldown/binding-wasm32-wasi": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.17.tgz",
-      "integrity": "sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz",
+      "integrity": "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==",
       "cpu": [
         "wasm32"
       ],
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "1.10.0",
-        "@emnapi/runtime": "1.10.0",
-        "@napi-rs/wasm-runtime": "^1.1.4"
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
       },
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.17.tgz",
-      "integrity": "sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz",
+      "integrity": "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==",
       "cpu": [
         "arm64"
       ],
@@ -2708,9 +2716,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.17.tgz",
-      "integrity": "sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz",
+      "integrity": "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==",
       "cpu": [
         "x64"
       ],
@@ -4590,16 +4598,16 @@
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": "20 || >=22"
       }
     },
     "node_modules/braces": {
@@ -5595,9 +5603,9 @@
       "license": "MIT"
     },
     "node_modules/editorconfig/node_modules/brace-expansion": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5707,9 +5715,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
-      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
       "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -5720,32 +5728,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.28.0",
-        "@esbuild/android-arm": "0.28.0",
-        "@esbuild/android-arm64": "0.28.0",
-        "@esbuild/android-x64": "0.28.0",
-        "@esbuild/darwin-arm64": "0.28.0",
-        "@esbuild/darwin-x64": "0.28.0",
-        "@esbuild/freebsd-arm64": "0.28.0",
-        "@esbuild/freebsd-x64": "0.28.0",
-        "@esbuild/linux-arm": "0.28.0",
-        "@esbuild/linux-arm64": "0.28.0",
-        "@esbuild/linux-ia32": "0.28.0",
-        "@esbuild/linux-loong64": "0.28.0",
-        "@esbuild/linux-mips64el": "0.28.0",
-        "@esbuild/linux-ppc64": "0.28.0",
-        "@esbuild/linux-riscv64": "0.28.0",
-        "@esbuild/linux-s390x": "0.28.0",
-        "@esbuild/linux-x64": "0.28.0",
-        "@esbuild/netbsd-arm64": "0.28.0",
-        "@esbuild/netbsd-x64": "0.28.0",
-        "@esbuild/openbsd-arm64": "0.28.0",
-        "@esbuild/openbsd-x64": "0.28.0",
-        "@esbuild/openharmony-arm64": "0.28.0",
-        "@esbuild/sunos-x64": "0.28.0",
-        "@esbuild/win32-arm64": "0.28.0",
-        "@esbuild/win32-ia32": "0.28.0",
-        "@esbuild/win32-x64": "0.28.0"
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
       }
     },
     "node_modules/escape-string-regexp": {
@@ -6511,9 +6519,9 @@
       "license": "MIT"
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7138,14 +7146,11 @@
       }
     },
     "node_modules/js-cookie": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      }
+      "license": "MIT"
     },
     "node_modules/js-stringify": {
       "version": "1.0.2",
@@ -7162,10 +7167,20 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -7974,9 +7989,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
       "funding": [
         {
           "type": "github",
@@ -8578,9 +8593,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
-      "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+      "version": "8.5.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.19.tgz",
+      "integrity": "sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -8597,7 +8612,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -9094,9 +9109,9 @@
       }
     },
     "node_modules/release-it": {
-      "version": "20.0.1",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-20.0.1.tgz",
-      "integrity": "sha512-3ob1P1aV+3+ZOoR7qgobfYyMlQbpitzOK09iKTtQ145vFi4rWxlRTgHwtVl8kokCvqiF/cJPxRlfcmZmF5aDJA==",
+      "version": "20.2.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-20.2.1.tgz",
+      "integrity": "sha512-xd0mqTGduwQlEzVBKOJcoVZxDrRLzjmFv3W8tWwkPIPDYtwYBWYjULiSk6VhfuGKocfz7GmptAqViKMQV4Zzbw==",
       "dev": true,
       "funding": [
         {
@@ -9129,7 +9144,7 @@
         "proxy-agent": "7.0.0",
         "semver": "7.7.4",
         "tinyglobby": "0.2.15",
-        "undici": "7.24.5",
+        "undici": "7.28.0",
         "url-join": "5.0.0",
         "wildcard-match": "5.1.4",
         "yargs-parser": "22.0.0"
@@ -9189,16 +9204,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/release-it/node_modules/undici": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.5.tgz",
-      "integrity": "sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.18.1"
-      }
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -9270,13 +9275,13 @@
       }
     },
     "node_modules/rolldown": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz",
-      "integrity": "sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",
+      "integrity": "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==",
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.127.0",
-        "@rolldown/pluginutils": "1.0.0-rc.17"
+        "@oxc-project/types": "=0.139.0",
+        "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
         "rolldown": "bin/cli.mjs"
@@ -9285,27 +9290,36 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm64": "1.0.0-rc.17",
-        "@rolldown/binding-darwin-arm64": "1.0.0-rc.17",
-        "@rolldown/binding-darwin-x64": "1.0.0-rc.17",
-        "@rolldown/binding-freebsd-x64": "1.0.0-rc.17",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.17",
-        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.17",
-        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.17",
-        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.17",
-        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.17",
-        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.17",
-        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.17",
-        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.17",
-        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.17",
-        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.17",
-        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.17"
+        "@rolldown/binding-android-arm64": "1.1.5",
+        "@rolldown/binding-darwin-arm64": "1.1.5",
+        "@rolldown/binding-darwin-x64": "1.1.5",
+        "@rolldown/binding-freebsd-x64": "1.1.5",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.5",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.5",
+        "@rolldown/binding-linux-arm64-musl": "1.1.5",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.5",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-musl": "1.1.5",
+        "@rolldown/binding-openharmony-arm64": "1.1.5",
+        "@rolldown/binding-wasm32-wasi": "1.1.5",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.5",
+        "@rolldown/binding-win32-x64-msvc": "1.1.5"
+      }
+    },
+    "node_modules/rolldown/node_modules/@oxc-project/types": {
+      "version": "0.139.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.139.0.tgz",
+      "integrity": "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
       }
     },
     "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-rc.17",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.17.tgz",
-      "integrity": "sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
       "license": "MIT"
     },
     "node_modules/run-applescript": {
@@ -9824,9 +9838,9 @@
       }
     },
     "node_modules/svgo": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",
-      "integrity": "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.2.tgz",
+      "integrity": "sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==",
       "license": "MIT",
       "dependencies": {
         "commander": "^11.1.0",
@@ -9965,9 +9979,9 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
-      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -10233,9 +10247,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
-      "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10433,16 +10447,16 @@
       }
     },
     "node_modules/vite": {
-      "version": "8.0.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.10.tgz",
-      "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
+      "version": "8.1.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.4.tgz",
+      "integrity": "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ==",
       "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.32.0",
-        "picomatch": "^4.0.4",
-        "postcss": "^8.5.10",
-        "rolldown": "1.0.0-rc.17",
-        "tinyglobby": "^0.2.16"
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.16",
+        "rolldown": "~1.1.4",
+        "tinyglobby": "^0.2.17"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -10458,7 +10472,7 @@
       },
       "peerDependencies": {
         "@types/node": "^20.19.0 || >=22.12.0",
-        "@vitejs/devtools": "^0.1.0",
+        "@vitejs/devtools": "^0.3.0",
         "esbuild": "^0.27.0 || ^0.28.0",
         "jiti": ">=1.21.0",
         "less": "^4.0.0",
@@ -10510,9 +10524,9 @@
       }
     },
     "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
diff --git a/package.json b/package.json
index e112d77f6..e8a13da35 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.11",
+  "version": "1.4.12-beta.20",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@types/lodash-es": "^4.17.12",
     "cva": "^1.0.0-beta.4",
     "lodash-es": "^4.18.1",
-    "rolldown": "1.0.0-rc.17",
+    "rolldown": "^1.1.5",
     "svgo": "^4.0.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
diff --git a/src/composables/useUI.ts b/src/composables/useUI.ts
index 18a1d5cd6..03d9beff1 100644
--- a/src/composables/useUI.ts
+++ b/src/composables/useUI.ts
@@ -228,6 +228,16 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     const keysAttrs: KeysAttrs<T> = {};
     const attrsRefs: Record<string, Ref<KeyAttrs>> = {};
 
+    /**
+     * Structural signature per key. The watcher below fires on any config/prop/class
+     * change and would otherwise re-mint every key's attrs object — even keys whose
+     * classes are identical — invalidating downstream reactive readers (e.g. every
+     * body row of a table on an unrelated sticky toggle). We skip the `.value` write
+     * when the new object is structurally equal to the last one, so the ref keeps its
+     * identity and dependents are not re-rendered.
+     */
+    const attrsSignatures: Record<string, string> = {};
+
     for (const key in config.value) {
       if (isSystemKey(key)) continue;
 
@@ -266,12 +276,20 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
           /* Delete value key to prevent v-model overwrite. */
           delete commonAttrs.value;
 
-          attrsRefs[key].value = {
+          const nextValue: KeyAttrs = {
             ...commonAttrs,
             class: cx([...data.extendsClasses, classes, commonAttrs.class]),
             config: data.mergedNestedConfig,
             ...data.mergedDefaults,
           };
+
+          /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
+          const signature = JSON.stringify(nextValue);
+
+          if (attrsSignatures[key] === signature) continue;
+
+          attrsSignatures[key] = signature;
+          attrsRefs[key].value = nextValue;
         }
       },
       { immediate: true },
diff --git a/src/index.d.ts b/src/index.d.ts
index ef9896889..4f9fa1fd9 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -108,6 +108,134 @@ export type {
   LocaleInstance,
   LocaleMessages,
 } from "./types";
+/* component props */
+export type { Props as UAccordionProps } from "./ui.container-accordion/types";
+export type { Props as UAccordionItemProps } from "./ui.container-accordion-item/types";
+export type { Props as UAlertProps } from "./ui.text-alert/types";
+export type { Props as UAvatarProps } from "./ui.image-avatar/types";
+export type { Props as UAvatarGroupProps } from "./ui.image-avatar-group/types";
+export type { Props as UBadgeProps } from "./ui.text-badge/types";
+export type { Props as UBoilerplateProps } from "./ui.boilerplate/types";
+export type { Props as UBreadcrumbsProps } from "./ui.navigation-breadcrumbs/types";
+export type { Props as UButtonProps } from "./ui.button/types";
+export type { Props as UCalendarProps } from "./ui.form-calendar/types";
+export type { Props as UCardProps } from "./ui.container-card/types";
+export type { Props as UCheckboxProps } from "./ui.form-checkbox/types";
+export type { Props as UCheckboxGroupProps } from "./ui.form-checkbox-group/types";
+export type { Props as UCheckboxMultiStateProps } from "./ui.form-checkbox-multi-state/types";
+export type { Props as UChipProps } from "./ui.other-chip/types";
+export type { Props as UColProps } from "./ui.container-col/types";
+export type { Props as UCollapsibleProps } from "./ui.container-collapsible/types";
+export type { Props as UColorToggleProps } from "./ui.form-color-toggle/types";
+export type { Props as UDataListProps } from "./ui.data-list/types";
+export type { Props as UDatePickerProps } from "./ui.form-date-picker/types";
+export type { Props as UDatePickerRangeProps } from "./ui.form-date-picker-range/types";
+export type { Props as UDividerProps } from "./ui.container-divider/types";
+export type { Props as UDotProps } from "./ui.other-dot/types";
+export type { Props as UDrawerProps } from "./ui.container-drawer/types";
+export type { Props as UDropdownProps } from "./ui.dropdown/types";
+export type { Props as UDropdownBadgeProps } from "./ui.dropdown-badge/types";
+export type { Props as UDropdownButtonProps } from "./ui.dropdown-button/types";
+export type { Props as UDropdownLinkProps } from "./ui.dropdown-link/types";
+export type { Props as UEmptyProps } from "./ui.container-empty/types";
+export type { Props as UFileProps } from "./ui.text-file/types";
+export type { Props as UFilesProps } from "./ui.text-files/types";
+export type { Props as UGridProps } from "./ui.container-grid/types";
+export type { Props as UGroupProps } from "./ui.container-group/types";
+export type { Props as UGroupsProps } from "./ui.container-groups/types";
+export type { Props as UHeaderProps } from "./ui.text-header/types";
+export type { Props as UIconProps } from "./ui.image-icon/types";
+export type { Props as UInputProps } from "./ui.form-input/types";
+export type { Props as UInputCounterProps } from "./ui.form-input-counter/types";
+export type { Props as UInputFileProps } from "./ui.form-input-file/types";
+export type { Props as UInputNumberProps } from "./ui.form-input-number/types";
+export type { Props as UInputPasswordProps } from "./ui.form-input-password/types";
+export type { Props as UInputRatingProps } from "./ui.form-input-rating/types";
+export type { Props as UInputSearchProps } from "./ui.form-input-search/types";
+export type { Props as UKeyProps } from "./ui.text-key/types";
+export type { Props as ULabelProps } from "./ui.form-label/types";
+export type { Props as ULinkProps } from "./ui.button-link/types";
+export type { Props as UListboxProps } from "./ui.form-listbox/types";
+export type { Props as ULoaderProps } from "./ui.loader/types";
+export type { Props as ULoaderOverlayProps } from "./ui.loader-overlay/types";
+export type { Props as ULoaderProgressProps } from "./ui.loader-progress/types";
+export type { Props as UModalProps } from "./ui.container-modal/types";
+export type { Props as UModalConfirmProps } from "./ui.container-modal-confirm/types";
+export type { Props as UNotifyProps } from "./ui.text-notify/types";
+export type { Props as UNumberProps } from "./ui.text-number/types";
+export type { Props as UPageProps } from "./ui.container-page/types";
+export type { Props as UPaginationProps } from "./ui.navigation-pagination/types";
+export type { Props as UPlaceholderProps } from "./ui.container-placeholder/types";
+export type { Props as UProgressProps } from "./ui.navigation-progress/types";
+export type { Props as URadioProps } from "./ui.form-radio/types";
+export type { Props as URadioGroupProps } from "./ui.form-radio-group/types";
+export type { Props as URowProps } from "./ui.container-row/types";
+export type { Props as USelectProps } from "./ui.form-select/types";
+export type { Props as USkeletonProps } from "./ui.skeleton/types";
+export type { Props as USkeletonChoiceProps } from "./ui.skeleton-choice/types";
+export type { Props as USkeletonInputProps } from "./ui.skeleton-input/types";
+export type { Props as USkeletonTextProps } from "./ui.skeleton-text/types";
+export type { Props as USplitterProps } from "./ui.container-splitter/types";
+export type { Props as USwitchProps } from "./ui.form-switch/types";
+export type { Props as UTabProps } from "./ui.navigation-tab/types";
+export type { Props as UTableProps } from "./ui.data-table/types";
+export type { Props as UTabsProps } from "./ui.navigation-tabs/types";
+export type { Props as UTextProps } from "./ui.text-block/types";
+export type { Props as UTextareaProps } from "./ui.form-textarea/types";
+export type { Props as UThemeColorToggleProps } from "./ui.other-theme-color-toggle/types";
+export type { Props as UToggleProps } from "./ui.button-toggle/types";
+/* component data types */
+export type {
+  Row,
+  BaseRow,
+  TableRow,
+  FlatRow,
+  RowId,
+  RowData,
+  Cell,
+  CellObject,
+  Column,
+  ColumnObject,
+  TableColumn,
+  DateDivider,
+  BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
+} from "./ui.data-table/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
+export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
+export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
+export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";
 /* Export enums directly (not as types) */
 export { ColorMode } from "./types";
 
diff --git a/src/index.ts b/src/index.ts
index 258eb139c..645a5344a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -114,6 +114,134 @@ export type {
   LocaleInstance,
   LocaleMessages,
 } from "./types";
+/* component props */
+export type { Props as UAccordionProps } from "./ui.container-accordion/types";
+export type { Props as UAccordionItemProps } from "./ui.container-accordion-item/types";
+export type { Props as UAlertProps } from "./ui.text-alert/types";
+export type { Props as UAvatarProps } from "./ui.image-avatar/types";
+export type { Props as UAvatarGroupProps } from "./ui.image-avatar-group/types";
+export type { Props as UBadgeProps } from "./ui.text-badge/types";
+export type { Props as UBoilerplateProps } from "./ui.boilerplate/types";
+export type { Props as UBreadcrumbsProps } from "./ui.navigation-breadcrumbs/types";
+export type { Props as UButtonProps } from "./ui.button/types";
+export type { Props as UCalendarProps } from "./ui.form-calendar/types";
+export type { Props as UCardProps } from "./ui.container-card/types";
+export type { Props as UCheckboxProps } from "./ui.form-checkbox/types";
+export type { Props as UCheckboxGroupProps } from "./ui.form-checkbox-group/types";
+export type { Props as UCheckboxMultiStateProps } from "./ui.form-checkbox-multi-state/types";
+export type { Props as UChipProps } from "./ui.other-chip/types";
+export type { Props as UColProps } from "./ui.container-col/types";
+export type { Props as UCollapsibleProps } from "./ui.container-collapsible/types";
+export type { Props as UColorToggleProps } from "./ui.form-color-toggle/types";
+export type { Props as UDataListProps } from "./ui.data-list/types";
+export type { Props as UDatePickerProps } from "./ui.form-date-picker/types";
+export type { Props as UDatePickerRangeProps } from "./ui.form-date-picker-range/types";
+export type { Props as UDividerProps } from "./ui.container-divider/types";
+export type { Props as UDotProps } from "./ui.other-dot/types";
+export type { Props as UDrawerProps } from "./ui.container-drawer/types";
+export type { Props as UDropdownProps } from "./ui.dropdown/types";
+export type { Props as UDropdownBadgeProps } from "./ui.dropdown-badge/types";
+export type { Props as UDropdownButtonProps } from "./ui.dropdown-button/types";
+export type { Props as UDropdownLinkProps } from "./ui.dropdown-link/types";
+export type { Props as UEmptyProps } from "./ui.container-empty/types";
+export type { Props as UFileProps } from "./ui.text-file/types";
+export type { Props as UFilesProps } from "./ui.text-files/types";
+export type { Props as UGridProps } from "./ui.container-grid/types";
+export type { Props as UGroupProps } from "./ui.container-group/types";
+export type { Props as UGroupsProps } from "./ui.container-groups/types";
+export type { Props as UHeaderProps } from "./ui.text-header/types";
+export type { Props as UIconProps } from "./ui.image-icon/types";
+export type { Props as UInputProps } from "./ui.form-input/types";
+export type { Props as UInputCounterProps } from "./ui.form-input-counter/types";
+export type { Props as UInputFileProps } from "./ui.form-input-file/types";
+export type { Props as UInputNumberProps } from "./ui.form-input-number/types";
+export type { Props as UInputPasswordProps } from "./ui.form-input-password/types";
+export type { Props as UInputRatingProps } from "./ui.form-input-rating/types";
+export type { Props as UInputSearchProps } from "./ui.form-input-search/types";
+export type { Props as UKeyProps } from "./ui.text-key/types";
+export type { Props as ULabelProps } from "./ui.form-label/types";
+export type { Props as ULinkProps } from "./ui.button-link/types";
+export type { Props as UListboxProps } from "./ui.form-listbox/types";
+export type { Props as ULoaderProps } from "./ui.loader/types";
+export type { Props as ULoaderOverlayProps } from "./ui.loader-overlay/types";
+export type { Props as ULoaderProgressProps } from "./ui.loader-progress/types";
+export type { Props as UModalProps } from "./ui.container-modal/types";
+export type { Props as UModalConfirmProps } from "./ui.container-modal-confirm/types";
+export type { Props as UNotifyProps } from "./ui.text-notify/types";
+export type { Props as UNumberProps } from "./ui.text-number/types";
+export type { Props as UPageProps } from "./ui.container-page/types";
+export type { Props as UPaginationProps } from "./ui.navigation-pagination/types";
+export type { Props as UPlaceholderProps } from "./ui.container-placeholder/types";
+export type { Props as UProgressProps } from "./ui.navigation-progress/types";
+export type { Props as URadioProps } from "./ui.form-radio/types";
+export type { Props as URadioGroupProps } from "./ui.form-radio-group/types";
+export type { Props as URowProps } from "./ui.container-row/types";
+export type { Props as USelectProps } from "./ui.form-select/types";
+export type { Props as USkeletonProps } from "./ui.skeleton/types";
+export type { Props as USkeletonChoiceProps } from "./ui.skeleton-choice/types";
+export type { Props as USkeletonInputProps } from "./ui.skeleton-input/types";
+export type { Props as USkeletonTextProps } from "./ui.skeleton-text/types";
+export type { Props as USplitterProps } from "./ui.container-splitter/types";
+export type { Props as USwitchProps } from "./ui.form-switch/types";
+export type { Props as UTabProps } from "./ui.navigation-tab/types";
+export type { Props as UTableProps } from "./ui.data-table/types";
+export type { Props as UTabsProps } from "./ui.navigation-tabs/types";
+export type { Props as UTextProps } from "./ui.text-block/types";
+export type { Props as UTextareaProps } from "./ui.form-textarea/types";
+export type { Props as UThemeColorToggleProps } from "./ui.other-theme-color-toggle/types";
+export type { Props as UToggleProps } from "./ui.button-toggle/types";
+/* component data types */
+export type {
+  Row,
+  BaseRow,
+  TableRow,
+  FlatRow,
+  RowId,
+  RowData,
+  Cell,
+  CellObject,
+  Column,
+  ColumnObject,
+  TableColumn,
+  DateDivider,
+  BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
+} from "./ui.data-table/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
+export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
+export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
+export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";
 /* Export enums directly (not as types) */
 export { ColorMode } from "./types";
 
diff --git a/src/types.ts b/src/types.ts
index a6bb10514..37a16c3f9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -390,9 +390,11 @@ export interface CVACompoundVariants {
 
 export type MutatedProps = ComputedRef<UnknownObject>;
 
+export type GetDataTest = (suffix?: string) => string | null;
+
 export type UseUI<T> = {
   config: Ref<T & ComponentConfig<T>>;
-  getDataTest: (suffix?: string) => string | null;
+  getDataTest: GetDataTest;
 } & KeysAttrs<T>;
 
 export interface ConfigDerivedData {
diff --git a/src/ui.button-link/config.ts b/src/ui.button-link/config.ts
index d686983af..7f333135f 100644
--- a/src/ui.button-link/config.ts
+++ b/src/ui.button-link/config.ts
@@ -5,7 +5,7 @@ export default /*tw*/ {
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
-      outline-solid outline-transparent
+      outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:rounded-small
       focus-visible:outline-offset-4 focus-visible:outline-{color}
     `,
diff --git a/src/ui.button-toggle/UToggle.vue b/src/ui.button-toggle/UToggle.vue
index 55b9492a9..6004b5b50 100644
--- a/src/ui.button-toggle/UToggle.vue
+++ b/src/ui.button-toggle/UToggle.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UToggleOption">
 import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
@@ -9,16 +9,18 @@ import { getDefaults } from "../utils/ui";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config, UToggleOption } from "./types";
+import type { Props, Config, UToggleOption, UToggleSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: () => [],
 });
 
+defineSlots<UToggleSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when toggle option is selected.
diff --git a/src/ui.button-toggle/storybook/stories.ts b/src/ui.button-toggle/storybook/stories.ts
index c29f7cad7..233752774 100644
--- a/src/ui.button-toggle/storybook/stories.ts
+++ b/src/ui.button-toggle/storybook/stories.ts
@@ -7,7 +7,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UToggle from "../../ui.button-toggle/UToggle.vue";
+import UToggleComponent from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
@@ -17,6 +17,9 @@ import ULabel from "../../ui.form-label/ULabel.vue";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UToggle = UToggleComponent as typeof UToggleComponent & { __name: string };
+
 interface UToggleArgs extends Props {
   slotTemplate?: string;
   enum: "size";
diff --git a/src/ui.button-toggle/tests/UToggle.test-d.ts b/src/ui.button-toggle/tests/UToggle.test-d.ts
new file mode 100644
index 000000000..83ade2da0
--- /dev/null
+++ b/src/ui.button-toggle/tests/UToggle.test-d.ts
@@ -0,0 +1,48 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UToggleOption, UToggleSlots } from "../types";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type OptionProps = Parameters<NonNullable<UToggleSlots<CountedOption>["option"]>>[0];
+
+describe("UToggle types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<OptionProps["option"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UToggle` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<OptionProps["option"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UToggleSlots<CountedOption>["left"]>>[0];
+    type Right = Parameters<NonNullable<UToggleSlots<CountedOption>["right"]>>[0];
+
+    expectTypeOf<Left["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Right["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Left["iconName"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UToggleOption>>();
+    expectTypeOf<Props<CountedOption>["options"]>().toEqualTypeOf<CountedOption[] | undefined>();
+  });
+});
diff --git a/src/ui.button-toggle/tests/UToggleTypes.vue b/src/ui.button-toggle/tests/UToggleTypes.vue
new file mode 100644
index 000000000..7d8feb8dd
--- /dev/null
+++ b/src/ui.button-toggle/tests/UToggleTypes.vue
@@ -0,0 +1,55 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <!-- `UToggle` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UToggle name="fixture" :options="options">
+    <template #left="{ option, index, iconName }">
+      {{ expectString(option.color) }}
+      {{ expectNumber(index) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #option="{ option, label, index }">
+      {{ expectString(option.color) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #right="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UToggle>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UToggle name="typed" :options="typedOptions">
+    <template #option="{ option }">{{ expectNumber(option.count) }}</template>
+  </UToggle>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UToggle from "../UToggle.vue";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Success", color: "success" }];
+const typedOptions = ref<CountedOption[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.button-toggle/types.ts b/src/ui.button-toggle/types.ts
index 044790158..8dc8e7723 100644
--- a/src/ui.button-toggle/types.ts
+++ b/src/ui.button-toggle/types.ts
@@ -1,21 +1,33 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UToggleOption {
+export interface BaseToggleOption {
   value: string | number | boolean;
   label?: string;
   disabled?: boolean;
   icon?: string;
   leftIcon?: string;
   rightIcon?: string;
-  onClick?: (option: Omit<UToggleOption, "onClick">) => void;
-  [key: string]: unknown;
+  onClick?: (option: Omit<BaseToggleOption, "onClick">) => void;
 }
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UToggleOption = BaseToggleOption & (object | UnknownObject);
+
+/**
+ * Slots receive each option verbatim — `UToggle` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UToggleSlots<TItem extends UToggleOption = UToggleOption> {
+  left?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+  option?: (props: { option: TItem; index: number; label: string; iconName?: string }) => unknown;
+  right?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UToggleOption = UToggleOption> {
   /**
    * Selected value.
    */
@@ -24,7 +36,7 @@ export interface Props {
   /**
    * Toggle item options.
    */
-  options?: UToggleOption[];
+  options?: TItem[];
 
   /**
    * Toggle size.
diff --git a/src/ui.button/config.ts b/src/ui.button/config.ts
index d9dda8c07..0fd8c4710 100644
--- a/src/ui.button/config.ts
+++ b/src/ui.button/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium leading-snug! whitespace-nowrap
-      border border-solid outline-solid outline-transparent transition cursor-pointer
+      border border-solid outline-solid outline-medium outline-transparent transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,
diff --git a/src/ui.container-accordion/types.ts b/src/ui.container-accordion/types.ts
index ca9ce928d..3ccb0b4e1 100644
--- a/src/ui.container-accordion/types.ts
+++ b/src/ui.container-accordion/types.ts
@@ -1,15 +1,18 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UAccordionOption {
+export interface BaseAccordionOption {
   value: string;
   title: string;
   description?: string;
   opened?: boolean;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UAccordionOption = BaseAccordionOption & (object | UnknownObject);
+
 export type SetAccordionSelectedItem = (value: string, opened: boolean) => void;
 
 export interface Props {
diff --git a/src/ui.container-collapsible/config.ts b/src/ui.container-collapsible/config.ts
index 751ac21da..f50c8c2f5 100644
--- a/src/ui.container-collapsible/config.ts
+++ b/src/ui.container-collapsible/config.ts
@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-transparent
+      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-primary`,
     variants: {
       disabled: {
diff --git a/src/ui.container-drawer/tests/UDrawer.test.ts b/src/ui.container-drawer/tests/UDrawer.test.ts
index 3e82c3559..f64401faa 100644
--- a/src/ui.container-drawer/tests/UDrawer.test.ts
+++ b/src/ui.container-drawer/tests/UDrawer.test.ts
@@ -9,11 +9,6 @@ import type { Props } from "../types";
 describe("UDrawer", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     it("ModelValue – renders when true", () => {
@@ -150,10 +145,10 @@ describe("UDrawer", () => {
       expect(innerWrapper.attributes("class")).toContain(expectedClass);
     });
 
-    it("CloseOnOverlay – closes drawer when overlay is clicked", () => {
+    it("CloseOnOverlay – closes drawer when overlay is clicked", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -167,18 +162,17 @@ describe("UDrawer", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
-    it("CloseOnEsc – closes drawer when escape key is pressed", () => {
+    it("CloseOnEsc – closes drawer when escape key is pressed", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -189,12 +183,11 @@ describe("UDrawer", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     it("DataTest – applies the correct data-test attribute", () => {
diff --git a/src/ui.container-modal/tests/UModal.test.ts b/src/ui.container-modal/tests/UModal.test.ts
index bb7ad2b02..60e577bf2 100644
--- a/src/ui.container-modal/tests/UModal.test.ts
+++ b/src/ui.container-modal/tests/UModal.test.ts
@@ -34,11 +34,6 @@ const mountWithRouter = (component: unknown, options: UnknownObject) => {
 describe("UModal", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     // ModelValue prop
@@ -189,10 +184,10 @@ describe("UModal", () => {
     });
 
     // CloseOnOverlay prop
-    it("renders with closeOnOverlay prop", () => {
+    it("renders with closeOnOverlay prop", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -206,19 +201,18 @@ describe("UModal", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // CloseOnEsc prop
-    it("renders with closeOnEsc prop", () => {
+    it("renders with closeOnEsc prop", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -229,12 +223,11 @@ describe("UModal", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // Inner prop
diff --git a/src/ui.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
index d55536dea..2c1072e02 100644
--- a/src/ui.data-list/UDataList.vue
+++ b/src/ui.data-list/UDataList.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends DataListItem">
 import { useTemplateRef } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 
@@ -13,15 +13,18 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import type { Props, DataListItem, Config } from "./types";
+import type { UnknownObject } from "../types";
+import type { Props, DataListItem, SlotItem, UDataListSlots, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   list: () => [],
 });
 
+defineSlots<UDataListSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when item is sorted (after drag).
@@ -42,6 +45,12 @@ function isCrossed(element: DataListItem) {
   return Boolean(element.crossed);
 }
 
+function hasNestedList(element: DataListItem) {
+  return Boolean(
+    element.children?.length || (props.nestedKey && (element as UnknownObject)[props.nestedKey]),
+  );
+}
+
 function onDragEnd() {
   const sortData = prepareSortData(props.list);
 
@@ -57,7 +66,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
     if (hasItemChildren) {
       const childrenItem = prepareSortData(
         item.children,
-        item[props.valueKey] as string | number | null,
+        (item as UnknownObject)[props.valueKey] as string | number | null,
       );
 
       childrenItem.forEach((item) => sortData.push(item));
@@ -129,6 +138,9 @@ const {
       :animation="animationDuration"
       :ghost-class="config.draggableGhost"
       :drag-class="config.draggableDrag"
+      :force-fallback="forceFallback"
+      :fallback-on-body="fallbackOnBody"
+      :fallback-class="fallbackClass"
       v-bind="draggableAttrs"
       :data-test="getDataTest()"
       @end="onDragEnd"
@@ -178,36 +190,58 @@ const {
           </div>
 
           <UDataList
-            v-if="element.children?.length"
+            v-if="hasNestedList(element)"
             hide-empty-state-for-nesting
             :list="element.children"
             :group="group"
+            :size="size"
+            :label-key="labelKey"
+            :value-key="valueKey"
+            :nested-key="nestedKey"
+            :animation-duration="animationDuration"
+            :force-fallback="forceFallback"
+            :fallback-on-body="fallbackOnBody"
+            :fallback-class="fallbackClass"
             v-bind="nestedAttrs"
+            :class="!element.children?.length && 'min-h-4'"
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
-            <!-- @vue-ignore -->
-            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
+            <!-- The nested list is built from `element.children` (`DataListItem[]`, not `TItem[]`),
+                 so it yields `SlotItem<DataListItem>`. `SlotItem` is all-optional, so forwarding it
+                 as `SlotItem<TItem>` promises nothing a deep child may lack. -->
+            <template #drag="slotProps">
+              <!--
+                @slot Use it to add something instead of the drag icon.
+                @binding {object} item
+                @binding {string} icon-name
+              -->
+              <slot
+                name="drag"
+                :item="slotProps.item as SlotItem<TItem>"
+                :icon-name="slotProps.iconName"
+              />
+            </template>
+
+            <template #label="slotProps">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed">
-                <div
-                  v-bind="slotProps.crossed ? labelCrossedAttrs : labelAttrs"
-                  v-text="slotProps.item[labelKey]"
-                />
-              </slot>
+              <slot
+                name="label"
+                :item="slotProps.item as SlotItem<TItem>"
+                :crossed="slotProps.crossed"
+              />
             </template>
 
-            <!-- @vue-ignore -->
-            <template #actions="slotProps: { item: DataListItem }">
+            <template #actions="slotProps">
               <!--
                 @slot Use it to add custom actions.
                 @binding {object} item
               -->
-              <slot name="actions" :item="slotProps.item" />
+              <slot name="actions" :item="slotProps.item as SlotItem<TItem>" />
             </template>
           </UDataList>
         </div>
diff --git a/src/ui.data-list/config.ts b/src/ui.data-list/config.ts
index 65ae77b2e..e6aac0612 100644
--- a/src/ui.data-list/config.ts
+++ b/src/ui.data-list/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "",
   draggable: "",
   draggableDrag: "bg-lifted",
-  draggableGhost: "bg-lifted/50",
+  draggableGhost: "data-list-ghost",
   itemWrapper: "group/item-wrapper",
   item: {
     base: `
@@ -55,6 +55,9 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "value",
     animationDuration: 200,
+    forceFallback: false,
+    fallbackOnBody: false,
+    fallbackClass: "shadow-sm",
     /* icons */
     dragIcon: "drag_indicator",
   },
diff --git a/src/ui.data-list/storybook/stories.ts b/src/ui.data-list/storybook/stories.ts
index c75f39dfc..3dcc31f6d 100644
--- a/src/ui.data-list/storybook/stories.ts
+++ b/src/ui.data-list/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDataList from "../../ui.data-list/UDataList.vue";
+import UDataListComponent from "../../ui.data-list/UDataList.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -19,6 +19,9 @@ import tooltip from "../../v.tooltip/vTooltip";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props, DataListItem } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDataList = UDataListComponent as typeof UDataListComponent & { __name: string };
+
 interface UDataListArgs extends Props {
   slotTemplate?: string;
   enum: "size";
@@ -118,6 +121,22 @@ Nesting.args = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const ForceFallback = DefaultTemplate.bind({});
+ForceFallback.args = {
+  forceFallback: true,
+  fallbackOnBody: true,
+  fallbackClass: "opacity-100!",
+};
+ForceFallback.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Use `forceFallback` to drag with Sortable's JS fallback instead of native HTML5 DnD (browsers force translucency on native drag images). Pair with `fallbackOnBody` when the list sits inside an `overflow: hidden` container, and `fallbackClass` to style the floating clone.",
+    },
+  },
+};
+
 export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   slotTemplate: `
diff --git a/src/ui.data-list/tests/UDataList.test-d.ts b/src/ui.data-list/tests/UDataList.test-d.ts
new file mode 100644
index 000000000..1d8519be1
--- /dev/null
+++ b/src/ui.data-list/tests/UDataList.test-d.ts
@@ -0,0 +1,76 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, DataListItem, SlotItem, UDataListSlots } from "../types";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+type LabelSlot = NonNullable<UDataListSlots<UserItem>["label"]>;
+type LabelProps = Parameters<LabelSlot>[0];
+
+describe("UDataList types", () => {
+  it("infers the caller's item shape in the label slot", () => {
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["crossed"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("does not expose undeclared item properties to a slot", () => {
+    /* An index signature would make any key legal, so `item.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the reserved item keys available", () => {
+    expectTypeOf<SlotItem<UserItem>["crossed"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["actions"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["children"]>().toEqualTypeOf<DataListItem[] | undefined>();
+  });
+
+  it("types the drag and actions slots", () => {
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<DragProps["iconName"]>().toEqualTypeOf<string>();
+    expectTypeOf<DragProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<ActionsProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("types the empty slot", () => {
+    type EmptyProps = Parameters<NonNullable<UDataListSlots<UserItem>["empty"]>>[0];
+
+    expectTypeOf<EmptyProps["emptyTitle"]>().toEqualTypeOf<string>();
+    expectTypeOf<EmptyProps["emptyDescription"]>().toEqualTypeOf<string>();
+  });
+
+  it("does not promise the caller's members at depth >= 1", () => {
+    /* The component renders itself with `:list="element.children"`, and `children` is
+     * `DataListItem[]`, not `TItem[]` — so a nested child need not carry the parent's members.
+     * A runtime probe over 3 levels confirmed the grandchild arrives without `owner`. */
+    expectTypeOf<SlotItem<UserItem>["owner"]>().toEqualTypeOf<string | undefined>();
+
+    /* The grandchild shape the probe actually observed must be assignable to every item slot. */
+    type Grandchild = { value: number; label: string; extraOnly: boolean };
+
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<Grandchild>().toExtend<LabelProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<DragProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<ActionsProps["item"]>();
+
+    /* `nestedKey` can open a nested list from a source `children` does not constrain, so even
+     * an item carrying none of the caller's members must be admitted. */
+    expectTypeOf<{ value: number }>().toExtend<LabelProps["item"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<DataListItem>>();
+    expectTypeOf<Props<UserItem>["list"]>().toEqualTypeOf<UserItem[] | undefined>();
+  });
+});
diff --git a/src/ui.data-list/tests/UDataList.test.ts b/src/ui.data-list/tests/UDataList.test.ts
index 5e9b53b39..da4ed8c00 100644
--- a/src/ui.data-list/tests/UDataList.test.ts
+++ b/src/ui.data-list/tests/UDataList.test.ts
@@ -9,7 +9,7 @@ import draggable from "vuedraggable";
 import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
-  const defaultList: DataListItem[] = [
+  const defaultList = [
     { value: 1, label: "Item 1" },
     { value: 2, label: "Item 2", crossed: true },
     { value: 3, label: "Item 3", actions: false },
@@ -162,6 +162,83 @@ describe("UDataList.vue", () => {
       expect(draggableComponent.vm.$attrs.animation).toBe(animationDuration);
     });
 
+    it("Force Fallback – passes forceFallback to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          forceFallback: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(true);
+    });
+
+    it("Force Fallback – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(false);
+    });
+
+    it("Fallback On Body – passes fallbackOnBody to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackOnBody: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(true);
+    });
+
+    it("Fallback On Body – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(false);
+    });
+
+    it("Fallback Class – passes fallbackClass to draggable", () => {
+      const fallbackClass = "custom-drag-fallback";
+
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackClass,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe(fallbackClass);
+    });
+
+    it("Fallback Class – defaults to shadow-sm", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("shadow-sm");
+    });
+
     it("Nesting – renders nested items when children array is present", async () => {
       const component = mount(UDataList, {
         props: {
@@ -176,6 +253,55 @@ describe("UDataList.vue", () => {
       expect(nestedComponent.props("list")).toEqual(nestedList[0].children);
     });
 
+    it("Nesting – renders empty nested drop-zone for childless items when nestedKey is truthy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: true }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(true);
+    });
+
+    it("Nesting – does not render drop-zone for childless items when nestedKey value is falsy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: false }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(false);
+    });
+
+    it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
+      const leaf = { value: 1, label: "Leaf", canNest: true, children: [] as DataListItem[] };
+      const list: DataListItem[] = [leaf, { value: 2, label: "Dragged", canNest: true }];
+
+      const component = mount(UDataList, {
+        props: { list, nestedKey: "canNest" },
+      });
+
+      // Simulate vuedraggable moving item 2 into the leaf's (previously empty) nested list.
+      list.splice(1, 1);
+      leaf.children!.push({ value: 2, label: "Dragged", canNest: true });
+
+      await component.findComponent(draggable).vm.$emit("end");
+
+      const sortData = component.emitted("dragSort")?.[0]?.[0] as {
+        value: number;
+        parentValue: unknown;
+      }[];
+      const dragged = sortData.find((item) => item.value === 2);
+
+      expect(dragged?.parentValue).toBe(leaf.value);
+    });
+
     it("Data Test – applies correct data-test attribute", () => {
       const dataTest = "test-data-list";
 
diff --git a/src/ui.data-list/tests/UDataListTypes.vue b/src/ui.data-list/tests/UDataListTypes.vue
new file mode 100644
index 000000000..600cf41d8
--- /dev/null
+++ b/src/ui.data-list/tests/UDataListTypes.vue
@@ -0,0 +1,110 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `list` prop at a real call site. -->
+<template>
+  <UDataList :list="list">
+    <!-- A nested child may lack the parent's members, so they are optional;
+         the reserved keys (`crossed`, `actions`, `children`) are optional already. -->
+    <template #label="{ item, crossed }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectOptionalString(item.owner) }}
+      {{ expectOptionalNumber(item.value) }}
+      {{ expectBoolean(crossed) }}
+    </template>
+
+    <template #drag="{ item, iconName }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectString(iconName) }}
+    </template>
+
+    <template #actions="{ item }">
+      {{ expectOptionalString(item.owner) }}
+    </template>
+
+    <template #empty="{ emptyTitle, emptyDescription }">
+      {{ expectString(emptyTitle) }}
+      {{ expectString(emptyDescription) }}
+    </template>
+  </UDataList>
+
+  <!-- A list from a non-literal source still exposes the declared item shape. -->
+  <UDataList :list="typedList">
+    <template #label="{ item }">{{ expectOptionalString(item.label) }}</template>
+  </UDataList>
+
+  <UDataList :list="list">
+    <template #label="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred item. -->
+      {{ item.nonExistent }}
+    </template>
+  </UDataList>
+
+  <!-- Regression guard: an item slot must never promise the caller's members as present.
+       The component renders ITSELF with `:list="element.children"`, and `children` is
+       `DataListItem[]`, not `TItem[]` — a runtime probe over 3 levels observed the
+       grandchild arriving with `{ value, label, extraOnly }` and NO `owner`. -->
+  <UDataList :list="deepList">
+    <template #label="{ item }">
+      <!-- @vue-expect-error a grandchild at depth 2 need not carry `owner`. -->
+      {{ expectString(item.owner) }}
+    </template>
+    <template #drag="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `label`. -->
+      {{ expectString(item.label) }}
+    </template>
+    <template #actions="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `value`. -->
+      {{ expectNumber(item.value) }}
+    </template>
+  </UDataList>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDataList from "../UDataList.vue";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+const list = [{ value: 1, label: "a", owner: "alice" }];
+const typedList = ref<UserItem[]>([]);
+
+/* A parent whose grandchild lacks the parent's members — exactly what the probe observed. */
+const deepList = [
+  {
+    value: 1,
+    label: "Parent",
+    owner: "alice",
+    children: [
+      {
+        value: 11,
+        label: "Child",
+        children: [{ value: 111, label: "Grandchild", extraOnly: true }],
+      },
+    ],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.data-list/types.ts b/src/ui.data-list/types.ts
index ff1e41ff6..c555aa8aa 100644
--- a/src/ui.data-list/types.ts
+++ b/src/ui.data-list/types.ts
@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 
 import DraggableContext from "vuedraggable";
 
-import type { ComponentConfig, UnknownType } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -11,18 +11,44 @@ export interface DragMoveEvent extends DragEvent {
   relatedContext: typeof DraggableContext | null;
 }
 
-export interface DataListItem {
+export interface BaseDataListItem {
   crossed?: boolean;
   actions?: boolean;
   children?: DataListItem[];
-  [key: string]: UnknownType | DataListItem[];
 }
 
-export interface Props {
+/* Any object shape is a valid item, only reserved item keys are type checked. */
+export type DataListItem = BaseDataListItem & (object | UnknownObject);
+
+/* Drops `DataListItem`'s index signature so slot items only expose statically known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Item shape exposed to slots: the caller's item plus the reserved item keys.
+ *
+ * `TItem`'s own keys are optional. The component renders itself for nested children
+ * (`:list="element.children"`), and `BaseDataListItem.children` is `DataListItem[]`, not `TItem[]`
+ * — so a child need not carry the parent's members. `nestedKey` can open a nested list from a
+ * different source entirely. `BaseDataListItem`'s keys are optional already, so nothing is
+ * promised that can be absent.
+ */
+export type SlotItem<TItem extends DataListItem = DataListItem> = Partial<KnownKeys<TItem>> &
+  BaseDataListItem;
+
+export interface UDataListSlots<TItem extends DataListItem = DataListItem> {
+  empty?: (props: { emptyTitle: string; emptyDescription: string }) => unknown;
+  drag?: (props: { item: SlotItem<TItem>; iconName: string }) => unknown;
+  label?: (props: { item: SlotItem<TItem>; crossed: boolean }) => unknown;
+  actions?: (props: { item: SlotItem<TItem> }) => unknown;
+}
+
+export interface Props<TItem extends DataListItem = DataListItem> {
   /**
    * Data item options.
    */
-  list?: DataListItem[];
+  list?: TItem[];
 
   /**
    * Group name.
@@ -49,12 +75,33 @@ export interface Props {
    */
   animationDuration?: number;
 
+  /**
+   * Sortable JS fallback (instead of native HTML5 DnD).
+   */
+  forceFallback?: boolean;
+
+  /**
+   * Append the fallback drag clone to document.body.
+   */
+  fallbackOnBody?: boolean;
+
+  /**
+   * CSS class for the Sortable fallback drag clone (forceFallback mode).
+   */
+  fallbackClass?: string;
+
   /**
    * Disable empty state for nested elements if empty (internal props).
    * @ignore
    */
   hideEmptyStateForNesting?: boolean;
 
+  /**
+   * Item key whose truthy value renders an empty nested drop-zone,
+   * so a deeper level can be created by drag even without children.
+   */
+  nestedKey?: string;
+
   /**
    * Component config object.
    */
diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 47b76cc55..b1ff2ac70 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TRow extends TableRow, TCol extends string = string">
 import {
   shallowRef,
   ref,
@@ -31,6 +31,7 @@ import UEmpty from "../ui.container-empty/UEmpty.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
+import USkeleton from "../ui.skeleton/USkeleton.vue";
 import UTableRow from "./UTableRow.vue";
 
 import type { ComputedRef, VNode } from "vue";
@@ -46,18 +47,22 @@ import type {
   FlatRow,
   ColumnObject,
   SearchMatch,
+  TableRow,
   UTableRowProps,
+  UTableSlots,
+  SelectedSlotRow,
 } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TRow, TCol>>(), {
+  ...getDefaults<Props<TRow, TCol>, Config>(defaultConfig, COMPONENT_NAME),
   columns: () => [],
   rows: () => [],
   dateDivider: () => [],
   selectedRows: () => [],
   expandedRows: () => [],
+  skeletonWidths: () => defaultConfig.defaults.skeletonWidths,
 });
 
 const emit = defineEmits([
@@ -110,6 +115,8 @@ const emit = defineEmits([
   "search",
 ]);
 
+defineSlots<UTableSlots<TRow, TCol>>();
+
 const slots = useSlots();
 
 const selectAll = ref(false);
@@ -143,7 +150,7 @@ const sortedRows: ComputedRef<FlatRow[]> = computed(() => {
     typeof column === "object" ? column.key : column,
   );
 
-  const keyOrder = new Map(headerKeys.map((key, i) => [key, i]));
+  const keyOrder = new Map<string, number>(headerKeys.map((key, i) => [key, i]));
 
   return flatTableRows.value.map((row) => {
     const entries = Object.entries(row);
@@ -169,6 +176,11 @@ const isFooterSticky = computed(() => {
 
 const normalizedColumns = computed(() => normalizeColumns(props.columns));
 
+/* Slot keys are narrowed to `TCol` for callers; internal dispatch is driven by runtime strings. */
+function headerSlotName(key: string) {
+  return `header-${key}` as `header-${TCol}`;
+}
+
 const visibleColumns = computed(() => {
   return normalizedColumns.value.filter((column) => column.isShown !== false);
 });
@@ -206,9 +218,14 @@ const isCheckedMoreOneTableItems = computed(() => {
   return Boolean(localSelectedRows.value.length);
 });
 
-const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
+/* Select-all includes nested children, which need not carry `TRow`'s members. */
+const selectedRowsSlotValue = computed(() => localSelectedRows.value as SelectedSlotRow<TRow>[]);
+
+const tableRowWidthStyle = computed(() => ({
+  width: `${tableWidth.value / PX_IN_REM}rem`,
+}));
 
-const flatTableRows = computed(() => getFlatRows(props.rows));
+const flatTableRows = computed(() => getFlatRows(props.rows as Row[]));
 
 const visibleFlatRows = computed(() => {
   const expanded = expandedRowsSet.value;
@@ -216,6 +233,18 @@ const visibleFlatRows = computed(() => {
   return flatTableRows.value.filter((row) => !row.parentRowId || expanded.has(row.parentRowId));
 });
 
+const showSkeletonLoading = computed(() => {
+  return props.skeletonLoading && !sortedRows.value.length;
+});
+
+const progressLoading = computed(() => {
+  return showSkeletonLoading.value ? false : props.loading;
+});
+
+const skeletonRowIndexes = computed(() => {
+  return Array.from({ length: props.skeletonRows }, (_, index) => index);
+});
+
 const virtualScroll = useVirtualScroll({
   containerRef: tableWrapperRef,
   totalCount: computed(() => (props.virtualScroll ? visibleFlatRows.value.length : 0)),
@@ -243,6 +272,10 @@ function isRowVisible(row: FlatRow): boolean {
   return !row.parentRowId || expandedRowsSet.value.has(row.parentRowId);
 }
 
+function getSkeletonWidthClass(columnIndex: number, rowIndex: number): string {
+  return props.skeletonWidths[(columnIndex + rowIndex) % props.skeletonWidths.length];
+}
+
 const searchMatches = computed<SearchMatch[]>(() => {
   const query = props.search?.toLowerCase();
 
@@ -512,7 +545,7 @@ onBeforeUnmount(() => {
 
 function onChangeSelectedRows() {
   if (!isEqual(props.selectedRows, localSelectedRows.value)) {
-    localSelectedRows.value = props.selectedRows;
+    localSelectedRows.value = props.selectedRows as Row[];
   }
 }
 
@@ -663,7 +696,9 @@ function getDateDividerData(rowDate: string | Date | undefined) {
 function setFooterCellWidth(zero?: null) {
   const ZERO_WIDTH = 0;
 
-  if (!props.stickyFooter || !footerRowRef.value || !stickyFooterRowRef.value) return;
+  if (!props.stickyFooter || !footerRowRef.value || !stickyFooterRowRef.value) {
+    return;
+  }
 
   const mainFooterItems = [...footerRowRef.value.children] as HTMLElement[];
   const stickyFooterItems = [...stickyFooterRowRef.value.children] as HTMLElement[];
@@ -816,6 +851,50 @@ function onBodyDoubleClick(event: MouseEvent) {
   onDoubleClickRow(rowData);
 }
 
+// Detect double-tap on touch devices and dispatch a native `dblclick`,
+// which bubbles to the tbody and triggers onBodyDoubleClick.
+const DOUBLE_TAP_DELAY = 300;
+const DOUBLE_TAP_MAX_MOVE = 24;
+
+let lastTapTime = 0;
+let lastTapRow: Element | null = null;
+let lastTapX = 0;
+let lastTapY = 0;
+
+function onBodyTouchEnd(event: TouchEvent) {
+  if (event.changedTouches.length !== 1) return;
+
+  const [touch] = event.changedTouches;
+  const target = touch.target as HTMLElement | null;
+  const row = target?.closest("tr[data-row-id]") ?? null;
+
+  if (!row) {
+    lastTapRow = null;
+
+    return;
+  }
+
+  const now = event.timeStamp;
+  const isSameRow = row === lastTapRow;
+  const isQuick = now - lastTapTime < DOUBLE_TAP_DELAY;
+  const isNear =
+    Math.abs(touch.clientX - lastTapX) < DOUBLE_TAP_MAX_MOVE &&
+    Math.abs(touch.clientY - lastTapY) < DOUBLE_TAP_MAX_MOVE;
+
+  if (isSameRow && isQuick && isNear) {
+    lastTapTime = 0;
+    lastTapRow = null;
+    row.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true }));
+
+    return;
+  }
+
+  lastTapTime = now;
+  lastTapRow = row;
+  lastTapX = touch.clientX;
+  lastTapY = touch.clientY;
+}
+
 function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     localSelectedRows.value = [...flatTableRows.value];
@@ -889,7 +968,7 @@ function getDateDividerConfig(row: Row, isSelected: boolean) {
     : bodyDateDividerAttrs.value.config;
 
   return getMergedConfig({
-    defaultConfig: defaultConfig,
+    defaultConfig,
     globalConfig: getDateDividerData(row.rowDate).config,
   }) as UDividerConfig;
 }
@@ -917,7 +996,9 @@ function getRowSearchMatchColumns(row: FlatRow): Set<string> | undefined {
 }
 
 function getRowActiveSearchMatchColumn(row: FlatRow): string | undefined {
-  if (!activeMatch.value || activeMatch.value.rowId !== row.id) return undefined;
+  if (!activeMatch.value || activeMatch.value.rowId !== row.id) {
+    return;
+  }
 
   return activeMatch.value.columnKey;
 }
@@ -1036,9 +1117,11 @@ const {
   bodyCellSearchMatchTextAttrs,
   bodyCellSearchMatchActiveAttrs,
   bodyCellSearchMatchTextActiveAttrs,
+  skeletonCellAttrs,
+  skeletonCheckboxAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 
-/* Plain object — inner refs are already reactive. */
+/* Plain object — inner refs are already reactive and identity-stable (see useUI). */
 const tableRowAttrs = {
   bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
@@ -1085,8 +1168,40 @@ function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
   ]);
 }
 
+/**
+ * Per-row VNode memo cache. Toggling one checkbox invalidates the `selectedRowIds`
+ * computed, which re-runs the body render function. Without memoization every row's
+ * VNode would be rebuilt and diffed on each toggle (200+ rows → visible lag). We cache
+ * each row's VNode keyed by row id and only rebuild it when an input that actually
+ * affects that row changes — so an unrelated row keeps the same VNode reference and
+ * Vue skips it entirely during patch.
+ */
+const rowVNodeCache = new Map<RowId, { signature: string; row: FlatRow; vnode: VNode }>();
+
+function getRowSignature(row: FlatRow, rowIndex: number): string {
+  return [
+    rowIndex,
+    Number(isRowSelected(row)),
+    Number(expandedRowsSet.value.has(row.id)),
+    Number(isRowVisible(row)),
+    props.selectable ? 1 : 0,
+    props.search || "",
+    getRowActiveSearchMatchColumn(row) || "",
+    [...(getRowSearchMatchColumns(row) || [])].join(","),
+  ].join("|");
+}
+
 function renderTableRow(row: FlatRow, rowIndex: number): VNode {
-  return h(
+  const signature = getRowSignature(row, rowIndex);
+  const cached = rowVNodeCache.get(row.id);
+
+  // `row` identity guards against stale data: `flatTableRows` yields fresh row
+  // objects whenever `props.rows` changes, so a new reference means new cell data.
+  if (cached && cached.row === row && cached.signature === signature) {
+    return cached.vnode;
+  }
+
+  const vnode = h(
     UTableRow,
     {
       key: row.id,
@@ -1112,13 +1227,48 @@ function renderTableRow(row: FlatRow, rowIndex: number): VNode {
     } as unknown as UTableRowProps,
     slots,
   );
+
+  rowVNodeCache.set(row.id, { signature, row, vnode });
+
+  return vnode;
 }
 
+/* Column layout / config changes affect every row — invalidate the whole cache. */
+watch(
+  [
+    normalizedColumns,
+    config,
+    columnPositions,
+    () => props.textEllipsis,
+    () => props.emptyCellLabel,
+  ],
+  () => rowVNodeCache.clear(),
+);
+
+/* Drop cache entries for rows that no longer exist (filters, pagination reset). */
+watch(flatTableRows, (rows) => {
+  const liveIds = new Set(rows.map((row) => row.id));
+
+  for (const id of rowVNodeCache.keys()) {
+    if (!liveIds.has(id)) rowVNodeCache.delete(id);
+  }
+});
+
 function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
   return [renderDateDividerRow(row, rowIndex), renderTableRow(row, rowIndex)].filter(
     Boolean,
   ) as VNode[];
 }
+
+/**
+ * Stable functional component for the body rows. Defined once so its type
+ * identity never changes across parent re-renders — a previous inline `:is`
+ * arrow created a new type on every render, forcing Vue to unmount and rebuild
+ * the entire tbody (e.g. on a sticky-header toggle). Reading `renderedRows`
+ * through the closure keeps it reactive while row keys drive reconciliation.
+ */
+const BodyRows = () =>
+  renderedRows.value.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat();
 </script>
 
 <template>
@@ -1163,7 +1313,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             @binding {object} column
             @binding {number} index
           -->
-          <slot :name="`header-${column.key}`" :column="column" :index="index" />
+          <slot :name="headerSlotName(column.key)" :column="column" :index="index" />
         </template>
 
         <template v-else>
@@ -1171,7 +1321,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
         </template>
       </div>
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1201,9 +1351,9 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
         @slot Use it to add action buttons within the actions header, which appear when rows are selected.
         @binding {array} selected-rows
       -->
-      <slot name="header-actions" :selected-rows="localSelectedRows" />
+      <slot name="header-actions" :selected-rows="selectedRowsSlotValue" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1233,9 +1383,9 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
         @slot Use it to add action buttons within the actions header, which appear when rows are selected.
         @binding {array} selected-rows
       -->
-      <slot name="header-actions" :selected-rows="localSelectedRows" />
+      <slot name="header-actions" :selected-rows="selectedRowsSlotValue" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div ref="table-wrapper" v-bind="tableWrapperAttrs" @scroll="virtualScroll.onScroll">
@@ -1293,8 +1443,13 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
                 @binding {number} index
               -->
               <slot
-                v-if="hasSlotContent($slots[`header-${column.key}`], { column, index })"
-                :name="`header-${column.key}`"
+                v-if="
+                  hasSlotContent($slots[`header-${column.key}`], {
+                    column,
+                    index,
+                  })
+                "
+                :name="headerSlotName(column.key)"
                 :column="column"
                 :index="index"
               />
@@ -1305,7 +1460,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             </th>
           </tr>
 
-          <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
+          <ULoaderProgress :loading="progressLoading" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody
@@ -1313,6 +1468,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
           v-bind="bodyAttrs"
           @click="onBodyClick"
           @dblclick="onBodyDoubleClick"
+          @touchend="onBodyTouchEnd"
         >
           <tr
             v-if="hasBeforeFirstRowSlot"
@@ -1331,9 +1487,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             />
           </tr>
 
-          <component
-            :is="() => renderedRows.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat()"
-          />
+          <component :is="BodyRows" />
 
           <tr v-if="props.virtualScroll && virtualScroll.bottomSpacerHeight.value > 0">
             <td
@@ -1356,6 +1510,30 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
           </tr>
         </tbody>
 
+        <tbody v-else-if="showSkeletonLoading" v-bind="bodyAttrs">
+          <tr
+            v-for="rowIndex in skeletonRowIndexes"
+            :key="`skeleton-row-${rowIndex}`"
+            v-bind="bodyRowAttrs"
+          >
+            <td v-if="selectable" v-bind="bodyCellCheckboxAttrs">
+              <USkeleton v-bind="skeletonCheckboxAttrs" />
+            </td>
+
+            <td
+              v-for="(column, columnIndex) in visibleColumns"
+              :key="`${column.key}-skeleton-${rowIndex}`"
+              v-bind="bodyCellBaseAttrs"
+              :style="getStickyColumnStyle(column)"
+            >
+              <USkeleton
+                v-bind="skeletonCellAttrs"
+                :class="getSkeletonWidthClass(columnIndex, rowIndex)"
+              />
+            </td>
+          </tr>
+        </tbody>
+
         <tbody v-else>
           <tr>
             <td :colspan="colsCount" v-bind="bodyEmptyStateCellAttrs">
diff --git a/src/ui.data-table/UTableRow.vue b/src/ui.data-table/UTableRow.vue
index 94b249399..0f8396fe0 100644
--- a/src/ui.data-table/UTableRow.vue
+++ b/src/ui.data-table/UTableRow.vue
@@ -400,6 +400,7 @@ function renderNestedFirstCell(value: Cell, key: string, cellIndex: number): VNo
 
 function renderTableCell(value: Cell, key: string, index: number): VNode {
   const keyStr = String(key);
+  const column = props.columns.find((col) => col.key === key) ?? props.columns[index];
 
   const nestedCellNode = isNestedFirstCell(index)
     ? renderNestedFirstCell(value, key, index)
@@ -414,12 +415,12 @@ function renderTableCell(value: Cell, key: string, index: number): VNode {
       ...props.attrs.bodyCellBaseAttrs.value,
       class: cx([
         props.attrs.bodyCellBaseAttrs.value.class,
-        props.columns[index].tdClass,
+        column.tdClass,
         getCellClasses(props.row, keyStr),
-        getStickyColumnClass(props.columns[index]),
+        getStickyColumnClass(column),
         getSearchMatchCellClass(keyStr),
       ]),
-      style: getStickyColumnStyle(props.columns[index]),
+      style: getStickyColumnStyle(column),
       "data-cell-key": key,
       "data-test": getDataTest(`${key}-cell`),
     },
diff --git a/src/ui.data-table/config.ts b/src/ui.data-table/config.ts
index b62af9afe..237ae2f36 100644
--- a/src/ui.data-table/config.ts
+++ b/src/ui.data-table/config.ts
@@ -13,7 +13,11 @@ export default /*tw*/ {
     },
     compoundVariants: [
       { stickedHeader: true, actionsHeader: true, class: "rounded-none" },
-      { stickedHeader: true, actionsHeader: false, class: "border-muted bg-default" },
+      {
+        stickedHeader: true,
+        actionsHeader: false,
+        class: "border-muted bg-default",
+      },
     ],
   },
   stickyHeaderCell: "{>headerCellBase} flex-none whitespace-nowrap",
@@ -41,7 +45,7 @@ export default /*tw*/ {
     base: "min-w-full border-none text-medium w-auto table-auto border-separate border-spacing-0",
     variants: {
       virtualScroll: {
-        true: "table-layout-fixed w-full",
+        true: "table-fixed w-full",
       },
     },
   },
@@ -111,6 +115,8 @@ export default /*tw*/ {
   },
   bodyEmptyState: "{UEmpty} my-8",
   bodyEmptyStateCell: "",
+  skeletonCell: "{USkeleton} h-4 rounded-small",
+  skeletonCheckbox: "{USkeleton} size-4 rounded-small",
   footer: {
     base: "group/footer border-t border-solid border-muted",
     variants: {
@@ -147,6 +153,9 @@ export default /*tw*/ {
     stickyHeader: false,
     stickyFooter: false,
     loading: false,
+    skeletonLoading: false,
+    skeletonRows: 5,
+    skeletonWidths: ["w-11/12", "w-4/5", "w-3/4", "w-2/3", "w-1/2"],
     textEllipsis: false,
     search: "",
     searchMatch: -1,
diff --git a/src/ui.data-table/storybook/stories.ts b/src/ui.data-table/storybook/stories.ts
index 02edb679d..50fc37133 100644
--- a/src/ui.data-table/storybook/stories.ts
+++ b/src/ui.data-table/storybook/stories.ts
@@ -12,7 +12,7 @@ import { getRandomId } from "../../utils/helper";
 
 import defaultConfig from "../config";
 
-import UTable from "../UTable.vue";
+import UTableComponent from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UNumber from "../../ui.text-number/UNumber.vue";
@@ -27,6 +27,9 @@ import tooltip from "../../v.tooltip/vTooltip";
 import type { Row, Props, ColumnObject } from "../types";
 import { StickySide } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UTable = UTableComponent as typeof UTableComponent & { __name: string };
+
 interface UTableArgs extends Props {
   slotTemplate?: string;
   enum: "size";
@@ -182,6 +185,36 @@ Loading.parameters = {
   },
 };
 
+export const SkeletonLoading = DefaultTemplate.bind({});
+SkeletonLoading.args = {
+  rows: [],
+  skeletonLoading: true,
+};
+SkeletonLoading.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `skeletonLoading` while the first request is pending. The table keeps its structure " +
+        "and renders cell skeletons instead of the empty state.",
+    },
+  },
+};
+
+export const SkeletonLoadingConfigured = DefaultTemplate.bind({});
+SkeletonLoadingConfigured.args = {
+  rows: [],
+  skeletonLoading: true,
+  skeletonRows: 3,
+  skeletonWidths: ["w-11/12", "w-2/3", "w-1/2"],
+};
+SkeletonLoadingConfigured.parameters = {
+  docs: {
+    description: {
+      story: "Configure skeleton row count and cell widths for a single table with props.",
+    },
+  },
+};
+
 export const EmptyCellLabel = DefaultTemplate.bind({});
 EmptyCellLabel.args = {
   emptyCellLabel: "NO DATA",
diff --git a/src/ui.data-table/tests/UTable.test-d.ts b/src/ui.data-table/tests/UTable.test-d.ts
new file mode 100644
index 000000000..0d11800e0
--- /dev/null
+++ b/src/ui.data-table/tests/UTable.test-d.ts
@@ -0,0 +1,179 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type {
+  Props,
+  RowId,
+  SelectedSlotRow,
+  SlotRow,
+  TableRow,
+  UTableDynamicSlots,
+  UTableSlots,
+} from "../types";
+
+interface UserRow {
+  id: number;
+  name: string;
+  qty: number;
+}
+
+type CellSlot = NonNullable<UTableSlots<UserRow>["cell-name"]>;
+type CellProps = Parameters<CellSlot>[0];
+
+/* The caller's own row members must all stay optional — see `SlotRow`. */
+type RequiredKeys<T> = {
+  [K in keyof T]-?: object extends Pick<T, K> ? never : K;
+}[keyof T];
+
+describe("UTable types", () => {
+  it("infers the caller's row shape in a cell slot", () => {
+    expectTypeOf<CellProps["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<CellProps["row"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<CellProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<CellProps["cellIndex"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared row properties to a cell slot", () => {
+    /* An index signature would make any key legal, so `row.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof CellProps["row"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof CellProps["row"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the row flattening metadata available", () => {
+    expectTypeOf<CellProps["row"]>().toHaveProperty("nestedLevel");
+    expectTypeOf<SlotRow<UserRow>["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("types the static slots", () => {
+    type SelectedRows = Parameters<NonNullable<UTableSlots<UserRow>["header-actions"]>>[0];
+
+    expectTypeOf<SelectedRows["selectedRows"]>().toEqualTypeOf<SelectedSlotRow<UserRow>[]>();
+
+    type Expand = NonNullable<UTableSlots<UserRow>["expand"]>;
+
+    expectTypeOf<Parameters<Expand>[0]["expanded"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("does not promise the caller's members on selected rows", () => {
+    /* Select-all flattens nested children into the selection, and those need not carry
+     * `TRow`'s members — so the slot must not type them as guaranteed. */
+    expectTypeOf<SelectedSlotRow<UserRow>["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<SelectedSlotRow<UserRow>["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* A nested child, as `getFlatRows` actually produces it, must be assignable. */
+    expectTypeOf<{
+      id: number;
+      nestedLevel: number;
+      parentRowId: number;
+    }>().toExtend<SelectedSlotRow<UserRow>>();
+
+    /* Flattening metadata stays guaranteed. */
+    expectTypeOf<SelectedSlotRow<UserRow>["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not promise the caller's members on any row slot", () => {
+    /* `getFlatRows` recurses into `row.row`, and a nested child is typed `TableRow`, not `TRow`.
+     * Every row slot receives those children verbatim; `nested-row` receives nothing else. */
+    type Expand = Parameters<NonNullable<UTableSlots<UserRow>["expand"]>>[0];
+    type NestedRow = Parameters<NonNullable<UTableSlots<UserRow>["nested-row"]>>[0];
+
+    expectTypeOf<CellProps["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<Expand["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NestedRow["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NestedRow["row"]["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* The real nested-child shape recorded at these slots must be assignable to all of them. */
+    type NestedChild = {
+      id: number;
+      label: string;
+      nestedLevel: number;
+      parentRowId: number;
+    };
+
+    expectTypeOf<NestedChild>().toExtend<CellProps["row"]>();
+    expectTypeOf<NestedChild>().toExtend<Expand["row"]>();
+    expectTypeOf<NestedChild>().toExtend<NestedRow["row"]>();
+
+    /* Flattening metadata is always set by `getFlatRows`, so it stays guaranteed. */
+    expectTypeOf<Expand["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+    expectTypeOf<NestedRow["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+    expectTypeOf<NestedRow["row"]["id"]>().toExtend<RowId>();
+    expectTypeOf<undefined>().not.toExtend<NestedRow["row"]["id"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<TableRow>>();
+    expectTypeOf<Props<UserRow>["rows"]>().toEqualTypeOf<UserRow[]>();
+  });
+
+  it("narrows the dynamic slot keys to the known column keys", () => {
+    type Narrowed = keyof UTableDynamicSlots<UserRow, "name" | "qty">;
+
+    expectTypeOf<"cell-name">().toExtend<Narrowed>();
+    expectTypeOf<"header-qty">().toExtend<Narrowed>();
+    expectTypeOf<"cell-typo">().not.toExtend<Narrowed>();
+    expectTypeOf<"header-typo">().not.toExtend<Narrowed>();
+  });
+
+  it("accepts every dynamic slot key when the columns are not statically known", () => {
+    /* Columns from a `ref`, an API, or a plain `string[]` widen `TCol` to `string`. Erroring on
+     * a valid slot there would break existing callers, so the keys must stay open. */
+    type Loose = keyof UTableDynamicSlots<UserRow>;
+
+    expectTypeOf<"cell-name">().toExtend<Loose>();
+    expectTypeOf<"cell-anything-at-all">().toExtend<Loose>();
+    expectTypeOf<"header-whatever">().toExtend<Loose>();
+
+    expectTypeOf<UTableDynamicSlots<UserRow>>().toEqualTypeOf<
+      UTableDynamicSlots<UserRow, string>
+    >();
+  });
+
+  it("accepts every dynamic slot key when the columns are empty", () => {
+    /* An empty `columns` array infers `TCol` as `never`, which means "not statically known",
+     * not "no keys allowed". Without the `[TCol]` tuple guard the mapped type collapses to `{}`
+     * and every slot is rejected — the "columns load async, start empty" pattern breaks. */
+    type Empty = keyof UTableDynamicSlots<UserRow, never>;
+
+    /* `toEqualTypeOf`, not `toExtend`: the bug made `Empty` collapse to `never`, and `never`
+     * satisfies every `toExtend` assertion vacuously. */
+    expectTypeOf<Empty>().toEqualTypeOf<`cell-${string}` | `header-${string}`>();
+    expectTypeOf<Empty>().not.toEqualTypeOf<never>();
+
+    expectTypeOf<UTableDynamicSlots<UserRow, never>>().toEqualTypeOf<
+      UTableDynamicSlots<UserRow, string>
+    >();
+  });
+
+  it("keeps the row shape intact when the keys are narrowed", () => {
+    type NarrowCell = Parameters<NonNullable<UTableSlots<UserRow, "name" | "qty">["cell-name"]>>[0];
+
+    expectTypeOf<NarrowCell["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NarrowCell["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("keeps the slot payloads identical however the keys resolve", () => {
+    /* Narrowing must only change which keys exist, never what a slot receives. */
+    type WideCell = Parameters<NonNullable<UTableSlots<UserRow>["cell-name"]>>[0];
+    type NarrowCell = Parameters<NonNullable<UTableSlots<UserRow, "name" | "qty">["cell-name"]>>[0];
+    type EmptyCell = Parameters<NonNullable<UTableSlots<UserRow, never>["cell-name"]>>[0];
+
+    expectTypeOf<NarrowCell>().toEqualTypeOf<WideCell>();
+    expectTypeOf<EmptyCell>().toEqualTypeOf<WideCell>();
+
+    type WideHeader = Parameters<NonNullable<UTableSlots<UserRow>["header-name"]>>[0];
+    type EmptyHeader = Parameters<NonNullable<UTableSlots<UserRow, never>["header-name"]>>[0];
+
+    expectTypeOf<EmptyHeader>().toEqualTypeOf<WideHeader>();
+
+    /* No row slot may promise the caller's members, whatever `TCol` is. Only the flattening
+     * metadata stays required; `name`/`qty` must never appear among the required keys. */
+    expectTypeOf<RequiredKeys<EmptyCell["row"]>>().toEqualTypeOf<RequiredKeys<WideCell["row"]>>();
+    expectTypeOf<RequiredKeys<NarrowCell["row"]>>().toEqualTypeOf<RequiredKeys<WideCell["row"]>>();
+
+    type CallerKeys = Extract<RequiredKeys<SlotRow<UserRow>>, "name" | "qty">;
+
+    expectTypeOf<CallerKeys>().toEqualTypeOf<never>();
+  });
+});
diff --git a/src/ui.data-table/tests/UTable.test.ts b/src/ui.data-table/tests/UTable.test.ts
index f64aa32a5..29cfc1847 100644
--- a/src/ui.data-table/tests/UTable.test.ts
+++ b/src/ui.data-table/tests/UTable.test.ts
@@ -7,6 +7,7 @@ import UTableRow from "../UTableRow.vue";
 import UEmpty from "../../ui.container-empty/UEmpty.vue";
 import ULoaderProgress from "../../ui.loader-progress/ULoaderProgress.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
+import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import {
   LoaderProgressSymbol,
   createLoaderProgress,
@@ -77,7 +78,7 @@ describe("UTable.vue", () => {
 
   function mountUTable(props: Props, options = {}) {
     return mount(UTable, {
-      props,
+      props: { ...props },
       global: getGlobalOptions(),
       ...options,
     });
@@ -149,6 +150,29 @@ describe("UTable.vue", () => {
       expect(emptyComponent.exists()).toBe(true);
     });
 
+    it("Skeleton loading – renders skeleton body instead of empty state", () => {
+      const component = mountUTable(getDefaultProps({ rows: [], skeletonLoading: true }));
+
+      expect(component.findComponent(UEmpty).exists()).toBe(false);
+      expect(component.findAllComponents(USkeleton).length).toBeGreaterThan(0);
+      expect(component.find("table").exists()).toBe(true);
+    });
+
+    it("Skeleton loading – applies skeleton rows and widths from props", () => {
+      const component = mountUTable(
+        getDefaultProps({
+          rows: [],
+          skeletonLoading: true,
+          skeletonRows: 2,
+          skeletonWidths: ["w-1/3"],
+        }),
+      );
+
+      expect(component.findAll("tbody tr")).toHaveLength(2);
+      expect(component.findAllComponents(USkeleton)).toHaveLength(defaultColumns.length * 2);
+      expect(component.findComponent(USkeleton).classes()).toContain("w-1/3");
+    });
+
     it("Selectable – renders select all checkbox when selectable is true", () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
@@ -221,6 +245,20 @@ describe("UTable.vue", () => {
       expect(loader.props("loading")).toBe(false);
     });
 
+    it("Skeleton loading – hides progress loader while skeleton is shown", () => {
+      const component = mountUTable(
+        getDefaultProps({
+          rows: [],
+          loading: true,
+          skeletonLoading: true,
+        }),
+      );
+
+      const loader = component.findComponent(ULoaderProgress);
+
+      expect(loader.props("loading")).toBe(false);
+    });
+
     it("Data Test – applies correct data-test attributes", () => {
       const dataTest = "test-table";
 
@@ -644,7 +682,14 @@ describe("UTable.vue", () => {
           name: "Parent Row",
           email: "parent@example.com",
           role: "Admin",
-          row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+          row: [
+            {
+              id: "1-1",
+              name: "Child",
+              email: "child@example.com",
+              role: "User",
+            },
+          ],
         },
       ];
 
@@ -710,7 +755,14 @@ describe("UTable.vue", () => {
           name: "Parent Row",
           email: "parent@example.com",
           role: "Admin",
-          row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+          row: [
+            {
+              id: "1-1",
+              name: "Child",
+              email: "child@example.com",
+              role: "User",
+            },
+          ],
         },
       ];
 
@@ -792,7 +844,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(getDefaultProps({ rows: [expandableRow] }));
@@ -813,7 +872,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(
@@ -879,7 +945,12 @@ describe("UTable.vue", () => {
               email: "child1@example.com",
               role: "User",
               row: [
-                { id: "1-1-1", name: "Grandchild", email: "grandchild@example.com", role: "Guest" },
+                {
+                  id: "1-1-1",
+                  name: "Grandchild",
+                  email: "grandchild@example.com",
+                  role: "Guest",
+                },
               ],
             },
           ],
@@ -902,7 +973,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(getDefaultProps({ rows: [expandableRow] }));
diff --git a/src/ui.data-table/tests/UTableEmptyColumnsTypes.vue b/src/ui.data-table/tests/UTableEmptyColumnsTypes.vue
new file mode 100644
index 000000000..708e2985a
--- /dev/null
+++ b/src/ui.data-table/tests/UTableEmptyColumnsTypes.vue
@@ -0,0 +1,27 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Regression guard for an inline empty `columns` array, which infers `TCol` as `never`.
+     `never` means "not statically known", not "no keys allowed", so every `cell-*` / `header-*`
+     slot must still compile. This shipped broken once and rejected every slot.
+
+     It needs its own file: next to other `#cell-*` call sites (as in `UTableTypes.vue`) Vue
+     reuses a widened instantiation, and the guard stops proving anything. -->
+<template>
+  <UTable :columns="[]" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+</template>
+
+<script setup lang="ts">
+import UTable from "../UTable.vue";
+
+const rows = [{ id: 1, name: "a", qty: 2 }];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.data-table/tests/UTableTypes.vue b/src/ui.data-table/tests/UTableTypes.vue
new file mode 100644
index 000000000..f75149e06
--- /dev/null
+++ b/src/ui.data-table/tests/UTableTypes.vue
@@ -0,0 +1,193 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `rows` prop at a real call site. -->
+<template>
+  <UTable :columns="columns" :rows="rows">
+    <!-- A flattened nested child may lack the parent's members, so they are optional;
+         the flattening metadata (`id`, `nestedLevel`) is always set and stays guaranteed. -->
+    <template #cell-name="{ row, value, index, cellIndex }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectOptionalNumber(row.qty) }}
+      {{ expectNumber(row.id) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectNumber(index) }}
+      {{ expectNumber(cellIndex) }}
+      {{ value }}
+    </template>
+
+    <template #expand="{ row, expanded, index }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectBoolean(expanded) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #nested-row="{ row, nestedLevel }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectNumber(nestedLevel) }}
+    </template>
+
+    <template #header-actions="{ selectedRows }">
+      {{ expectNumber(selectedRows.length) }}
+    </template>
+
+    <template #header-name="{ column, index }">
+      {{ expectString(column.key) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #header-counter="{ total }">{{ expectNumber(total) }}</template>
+    <template #footer="{ colsCount }">{{ expectNumber(colsCount) }}</template>
+
+    <template #cell-qty="{ row }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred row. -->
+      {{ row.nonExistent }}
+    </template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #cell-typo>{{ "" }}</template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #header-typo>{{ "" }}</template>
+  </UTable>
+
+  <!-- Literal object columns narrow the slot keys the same way as literal strings. -->
+  <UTable :columns="objectColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-qty="{ column }">{{ expectString(column.key) }}</template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #cell-typo>{{ "" }}</template>
+  </UTable>
+
+  <!-- Rows from a non-literal source still expose the declared row shape. -->
+  <UTable :columns="columns" :rows="typedRows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+  </UTable>
+
+  <!-- Graceful degradation: columns from a `ref<Column[]>` cannot be narrowed, so EVERY
+       `cell-*` / `header-*` slot must still compile. A false error here would break
+       existing users, so it matters more than catching a typo. -->
+  <UTable :columns="dynamicColumns" :rows="rows">
+    <template #cell-name="{ row, index }">
+      {{ expectOptionalString(row.name) }}{{ expectNumber(index) }}
+    </template>
+    <template #cell-anything-at-all="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+    <template #header-whatever="{ index }">{{ expectNumber(index) }}</template>
+  </UTable>
+
+  <!-- Same degradation for a plain `string[]` with no literal types. -->
+  <UTable :columns="looseColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #cell-unknown-key="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+  </UTable>
+
+  <!-- A `const` array without `as const` widens to `string[]`, so it degrades too. Narrowing
+       is opt-in via `as const`; it must never cost a false error on the plain form. -->
+  <UTable :columns="widenedColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #cell-not-a-column="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+  </UTable>
+
+  <!-- Regression guard: an EMPTY `columns` array infers `TCol` as `never`. That is "not statically
+       known", not "no keys allowed" — every `cell-*` / `header-*` slot must still compile.
+       "columns load async, start empty" is the common real-world pattern; this shipped broken once. -->
+  <UTable :columns="emptyRefColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyInferredRefColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyComputedColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyConstColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <!-- Regression guard: a row slot must never promise the caller's members as present.
+       `getFlatRows` recurses into `row.row`, and a nested child is typed `TableRow`, not `TRow` —
+       `#nested-row` in particular fires ONLY for such children. -->
+  <UTable :columns="columns" :rows="nestedRows">
+    <template #nested-row="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `name`. -->
+      {{ expectString(row.name) }}
+    </template>
+    <template #expand="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `qty`. -->
+      {{ expectNumber(row.qty) }}
+    </template>
+    <template #cell-name="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `name`. -->
+      {{ expectString(row.name) }}
+    </template>
+    <template #header-actions="{ selectedRows }">
+      <!-- @vue-expect-error select-all flattens nested children into the selection. -->
+      {{ expectString(selectedRows[0].name) }}
+    </template>
+  </UTable>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import UTable from "../UTable.vue";
+
+import type { Column } from "../types";
+
+interface UserRow {
+  id: number;
+  name: string;
+  qty: number;
+}
+
+const columns = ["name", "qty"] as const;
+const objectColumns = [{ key: "name" }, { key: "qty" }] as const;
+
+/* Non-literal column sources — slot keys must degrade to `cell-${string}`. */
+const dynamicColumns = ref<Column[]>([]);
+const looseColumns: string[] = ["name", "qty"];
+const widenedColumns = ["name", "qty"];
+
+/* Empty column sources — `TCol` infers as `never` and must degrade, not collapse.
+   The inline `:columns="[]"` form lives in `UTableEmptyColumnsTypes.vue`: alongside other
+   `#cell-*` call sites here, Vue reuses a widened instantiation and the guard goes vacuous. */
+const emptyRefColumns = ref<Column[]>([]);
+const emptyInferredRefColumns = ref([]);
+const emptyComputedColumns = computed(() => []);
+const emptyConstColumns = [] as const;
+
+const rows = [{ id: 1, name: "a", qty: 2 }];
+const typedRows = ref<UserRow[]>([]);
+
+/* A parent whose child lacks the parent's members — exactly what `getFlatRows` emits. */
+const nestedRows = [{ id: 1, name: "parent", qty: 2, row: [{ id: 2, label: "child" }] }];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.data-table/types.ts b/src/ui.data-table/types.ts
index 9e5c5a51f..dda15c897 100644
--- a/src/ui.data-table/types.ts
+++ b/src/ui.data-table/types.ts
@@ -1,5 +1,4 @@
 import defaultConfig from "./config";
-
 import type { Ref } from "vue";
 import type { ComponentConfig, UnknownObject } from "../types";
 import type { Config as UDividerConfig } from "../ui.container-divider/types";
@@ -26,20 +25,30 @@ export interface RowData {
   [key: string]: Cell;
 }
 
-export interface DateDivider {
+export interface BaseDateDivider {
   date: Date | string;
   label?: string;
   config?: ComponentConfig<UDividerConfig>;
 }
 
-export interface Row {
+/* Any object shape is a valid divider, only reserved divider keys are type checked. */
+export type DateDivider = BaseDateDivider & (object | UnknownObject);
+
+export interface BaseRow {
   id: RowId;
   rowDate?: string | Date;
-  row?: Row | Row[];
+  row?: TableRow | TableRow[];
   class?: string | ((row: Row) => string);
+}
+
+export interface Row extends BaseRow {
+  row?: Row | Row[];
   [key: string]: unknown;
 }
 
+/* Any object shape is a valid row, only reserved row keys are type checked. */
+export type TableRow = BaseRow & (object | UnknownObject);
+
 export interface FlatRow extends Row {
   parentRowId?: RowId;
   nestedLevel: number;
@@ -59,23 +68,30 @@ export interface ColumnObject {
   thClass?: string;
 }
 
-export type Column = ColumnObject | string;
+/* Any object shape is a valid column, only reserved column keys are type checked. */
+export type TableColumn = ColumnObject & (object | UnknownObject);
+
+export type Column = TableColumn | string;
+
+/* A column entry that keeps its key literal, so slot keys can be narrowed at the call site. */
+export type KeyedColumn<TCol extends string> = TCol | (TableColumn & { key: TCol });
 
-export interface Props {
+export interface Props<TRow extends TableRow = TableRow, TCol extends string = string> {
   /**
    * Table columns (headers).
+   * `readonly` so `as const` column lists keep their literal keys and narrow the cell slot names.
    */
-  columns: Column[];
+  columns: readonly KeyedColumn<TCol>[];
 
   /**
    * Table rows data.
    */
-  rows: Row[];
+  rows: TRow[];
 
   /**
    * Selected rows.
    */
-  selectedRows?: Row[];
+  selectedRows?: TRow[];
 
   /**
    * Selected rows id.
@@ -117,6 +133,21 @@ export interface Props {
    */
   loading?: boolean;
 
+  /**
+   * Show skeleton body for the first table load instead of the regular loader.
+   */
+  skeletonLoading?: boolean;
+
+  /**
+   * Number of skeleton rows shown during initial loading.
+   */
+  skeletonRows?: number;
+
+  /**
+   * Skeleton cell width classes used to vary the loading placeholder layout.
+   */
+  skeletonWidths?: string[];
+
   /**
    * Enable virtual scrolling for large datasets.
    */
@@ -163,6 +194,72 @@ export interface Props {
   dataTest?: string | null;
 }
 
+/* Drops `Row`'s `[key: string]: unknown` so slot rows only expose statically known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Row shape exposed to slots: the caller's row plus the flattening metadata.
+ *
+ * `TRow`'s own keys are optional. Rows are flattened through `getFlatRows`, which recurses into
+ * `row.row` — and `BaseRow.row` is `TableRow | TableRow[]`, not `TRow`, so a nested child need not
+ * carry the parent's members. Every row slot (`cell-*`, `expand`, `nested-row`) receives those
+ * children verbatim; `nested-row` receives nothing else. `BaseRow`/`FlatRow` metadata
+ * (`id`, `nestedLevel`, …) is always set by the flattener, so it stays guaranteed.
+ */
+export type SlotRow<TRow extends TableRow = TableRow> = Partial<KnownKeys<TRow>> &
+  KnownKeys<FlatRow>;
+
+/* Selected rows carry the same guarantee: select-all flattens nested children into the selection. */
+export type SelectedSlotRow<TRow extends TableRow = TableRow> = SlotRow<TRow>;
+
+export interface UTableStaticSlots<TRow extends TableRow = TableRow> {
+  "header-counter"?: (props: { total: number }) => unknown;
+  "header-actions"?: (props: { selectedRows: SelectedSlotRow<TRow>[] }) => unknown;
+  "before-header"?: (props: { colsCount: number; classes?: string }) => unknown;
+  "after-last-row"?: (props: { colsCount: number; classes?: string }) => unknown;
+  "before-first-row"?: () => unknown;
+  "empty-state"?: () => unknown;
+  footer?: (props: { colsCount: number }) => unknown;
+  expand?: (props: { index: number; row: SlotRow<TRow>; expanded: boolean }) => unknown;
+  "nested-row"?: (props: { index: number; row: SlotRow<TRow>; nestedLevel: number }) => unknown;
+}
+
+/**
+ * Slot key suffix. Narrows to the literal column keys only when they are statically known —
+ * `columns` from a `ref`, an API, or a plain `string[]` widens `TCol` back to `string`, and an
+ * empty `columns` array infers `TCol` as `never`. Both mean "not statically known", so every
+ * `cell-*` / `header-*` slot must keep compiling.
+ *
+ * The `[TCol]` tuple wrapper is required: a naked `never` distributes to `never`, which would
+ * silently collapse the whole mapped type and reject every slot.
+ */
+type SlotKeySuffix<TCol extends string> = [TCol] extends [never]
+  ? string
+  : string extends TCol
+    ? string
+    : TCol;
+
+export type UTableDynamicSlots<TRow extends TableRow = TableRow, TCol extends string = string> = {
+  [K in `cell-${SlotKeySuffix<TCol>}`]?: (props: {
+    value: Cell;
+    row: SlotRow<TRow>;
+    index: number;
+    cellIndex: number;
+  }) => unknown;
+} & {
+  [K in `header-${SlotKeySuffix<TCol>}`]?: (props: {
+    column: ColumnObject;
+    index: number;
+  }) => unknown;
+};
+
+export type UTableSlots<
+  TRow extends TableRow = TableRow,
+  TCol extends string = string,
+> = UTableStaticSlots<TRow> & UTableDynamicSlots<TRow, TCol>;
+
 export interface UTableRowAttrs {
   bodyCellContentAttrs: Ref<UnknownObject>;
   bodyCellCheckboxAttrs: Ref<UnknownObject>;
diff --git a/src/ui.data-table/utilTable.ts b/src/ui.data-table/utilTable.ts
index 79323a178..ebf40f1c1 100644
--- a/src/ui.data-table/utilTable.ts
+++ b/src/ui.data-table/utilTable.ts
@@ -1,6 +1,6 @@
 import type { Column, ColumnObject, FlatRow, Row, RowData, RowId } from "./types";
 
-export function normalizeColumns(columns: Column[]): ColumnObject[] {
+export function normalizeColumns(columns: readonly Column[]): ColumnObject[] {
   return columns.map((column) =>
     typeof column === "string" ? { label: column, key: column } : column,
   );
diff --git a/src/ui.dropdown-badge/UDropdownBadge.vue b/src/ui.dropdown-badge/UDropdownBadge.vue
index 76b942b9b..9e97514a3 100644
--- a/src/ui.dropdown-badge/UDropdownBadge.vue
+++ b/src/ui.dropdown-badge/UDropdownBadge.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownBadgeSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownBadgeSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 
diff --git a/src/ui.dropdown-badge/storybook/stories.ts b/src/ui.dropdown-badge/storybook/stories.ts
index 5da0f9e83..14d707e5d 100644
--- a/src/ui.dropdown-badge/storybook/stories.ts
+++ b/src/ui.dropdown-badge/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
+import UDropdownBadgeComponent from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,11 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownBadge = UDropdownBadgeComponent as typeof UDropdownBadgeComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownBadgeArgs extends Props {
   slotTemplate?: string;
 }
diff --git a/src/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts b/src/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts
new file mode 100644
index 000000000..ce3af8b2d
--- /dev/null
+++ b/src/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts
@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownBadgeSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownBadge types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});
diff --git a/src/ui.dropdown-badge/tests/UDropdownBadge.test.ts b/src/ui.dropdown-badge/tests/UDropdownBadge.test.ts
index 615e66e9b..d32c3d54a 100644
--- a/src/ui.dropdown-badge/tests/UDropdownBadge.test.ts
+++ b/src/ui.dropdown-badge/tests/UDropdownBadge.test.ts
@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownBadge from "../UDropdownBadge.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },
diff --git a/src/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue b/src/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue
new file mode 100644
index 000000000..72a8ee409
--- /dev/null
+++ b/src/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue
@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownBadge :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownBadge>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownBadge :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownBadge>
+
+  <UDropdownBadge :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownBadge :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownBadge
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownBadge>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownBadge from "../UDropdownBadge.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.dropdown-badge/types.ts b/src/ui.dropdown-badge/types.ts
index c24255e07..29c529b3e 100644
--- a/src/ui.dropdown-badge/types.ts
+++ b/src/ui.dropdown-badge/types.ts
@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownBadgeSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected badge.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown-button/UDropdownButton.vue b/src/ui.dropdown-button/UDropdownButton.vue
index 139b9d656..b4a2898b6 100644
--- a/src/ui.dropdown-button/UDropdownButton.vue
+++ b/src/ui.dropdown-button/UDropdownButton.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownButtonSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownButtonSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 
diff --git a/src/ui.dropdown-button/storybook/stories.ts b/src/ui.dropdown-button/storybook/stories.ts
index c07237f7a..83768c2d9 100644
--- a/src/ui.dropdown-button/storybook/stories.ts
+++ b/src/ui.dropdown-button/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UDropdownButtonComponent from "../../ui.dropdown-button/UDropdownButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,11 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownButton = UDropdownButtonComponent as typeof UDropdownButtonComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
 }
diff --git a/src/ui.dropdown-button/tests/UDropdownButton.test-d.ts b/src/ui.dropdown-button/tests/UDropdownButton.test-d.ts
new file mode 100644
index 000000000..8716bc0f7
--- /dev/null
+++ b/src/ui.dropdown-button/tests/UDropdownButton.test-d.ts
@@ -0,0 +1,57 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownButtonSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownButton types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<
+      NonNullable<UDropdownButtonSlots<UserOption>["before-option"]>
+    >[0];
+    type AfterProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});
diff --git a/src/ui.dropdown-button/tests/UDropdownButton.test.ts b/src/ui.dropdown-button/tests/UDropdownButton.test.ts
index 2ee899a2b..e62f4ebfd 100644
--- a/src/ui.dropdown-button/tests/UDropdownButton.test.ts
+++ b/src/ui.dropdown-button/tests/UDropdownButton.test.ts
@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownButton from "../UDropdownButton.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownButton.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },
diff --git a/src/ui.dropdown-button/tests/UDropdownButtonTypes.vue b/src/ui.dropdown-button/tests/UDropdownButtonTypes.vue
new file mode 100644
index 000000000..58b8d2dc4
--- /dev/null
+++ b/src/ui.dropdown-button/tests/UDropdownButtonTypes.vue
@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownButton :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownButton>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownButton :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownButton>
+
+  <UDropdownButton :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownButton>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownButton :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownButton>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownButton
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownButton>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownButton from "../UDropdownButton.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.dropdown-button/types.ts b/src/ui.dropdown-button/types.ts
index 75119fe5f..625debf69 100644
--- a/src/ui.dropdown-button/types.ts
+++ b/src/ui.dropdown-button/types.ts
@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownButtonSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected button.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown-link/UDropdownLink.vue b/src/ui.dropdown-link/UDropdownLink.vue
index 79c4fdba3..6bc8dcd6a 100644
--- a/src/ui.dropdown-link/UDropdownLink.vue
+++ b/src/ui.dropdown-link/UDropdownLink.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownLinkSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownLinkSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 
diff --git a/src/ui.dropdown-link/config.ts b/src/ui.dropdown-link/config.ts
index 3d7851e06..4a2e86469 100644
--- a/src/ui.dropdown-link/config.ts
+++ b/src/ui.dropdown-link/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
-      outline-solid outline-transparent
+      outline-solid outline-0 outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {
diff --git a/src/ui.dropdown-link/storybook/stories.ts b/src/ui.dropdown-link/storybook/stories.ts
index dd9d8796d..fb527b8fa 100644
--- a/src/ui.dropdown-link/storybook/stories.ts
+++ b/src/ui.dropdown-link/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
+import UDropdownLinkComponent from "../../ui.dropdown-link/UDropdownLink.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,9 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownLink = UDropdownLinkComponent as typeof UDropdownLinkComponent & { __name: string };
+
 interface DefaultUDropdownLinkArgs extends Props {
   slotTemplate?: string;
 }
diff --git a/src/ui.dropdown-link/tests/UDropdownLink.test-d.ts b/src/ui.dropdown-link/tests/UDropdownLink.test-d.ts
new file mode 100644
index 000000000..ec2b4ad3d
--- /dev/null
+++ b/src/ui.dropdown-link/tests/UDropdownLink.test-d.ts
@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownLinkSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownLink types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});
diff --git a/src/ui.dropdown-link/tests/UDropdownLink.test.ts b/src/ui.dropdown-link/tests/UDropdownLink.test.ts
index cb22f503a..641e62cb3 100644
--- a/src/ui.dropdown-link/tests/UDropdownLink.test.ts
+++ b/src/ui.dropdown-link/tests/UDropdownLink.test.ts
@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownLink from "../UDropdownLink.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownLink.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },
diff --git a/src/ui.dropdown-link/tests/UDropdownLinkTypes.vue b/src/ui.dropdown-link/tests/UDropdownLinkTypes.vue
new file mode 100644
index 000000000..c67c32b54
--- /dev/null
+++ b/src/ui.dropdown-link/tests/UDropdownLinkTypes.vue
@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownLink :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownLink>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownLink :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownLink>
+
+  <UDropdownLink :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownLink>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownLink :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownLink>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownLink
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownLink>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownLink from "../UDropdownLink.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.dropdown-link/types.ts b/src/ui.dropdown-link/types.ts
index c91bdba91..a1d3f30a0 100644
--- a/src/ui.dropdown-link/types.ts
+++ b/src/ui.dropdown-link/types.ts
@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownLinkSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected link.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown/UDropdown.vue b/src/ui.dropdown/UDropdown.vue
index 9a96912aa..92a368c9a 100644
--- a/src/ui.dropdown/UDropdown.vue
+++ b/src/ui.dropdown/UDropdown.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { nextTick, computed, ref, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -11,12 +11,13 @@ import UCollapsible from "../ui.container-collapsible/UCollapsible.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
-import type { Option, SelectedValue } from "../ui.form-listbox/types";
+import type { Props, Config, UDropdownSlots } from "./types";
+import type { ComponentExposed } from "../types";
+import type { Option, SelectedValue, ListboxOption } from "../ui.form-listbox/types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -60,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UListboxRef = InstanceType<typeof UListbox>;
+defineSlots<UDropdownSlots<TOption>>();
+
+/* `UListbox` is generic, so its type is a function — `InstanceType` does not apply. */
+type UListboxRef = ComponentExposed<typeof UListbox>;
 type UCollapsibleRef = InstanceType<typeof UCollapsible>;
 
 const isClickingOption = ref(false);
@@ -83,9 +87,12 @@ const dropdownSearch = computed({
   set: (value: string) => emit("update:search", value),
 });
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const selectedOptions = computed(() => {
   if (props.multiple) {
-    return props.options.filter((option) => {
+    return localOptions.value.filter((option) => {
       return (
         option[props.valueKey] &&
         (dropdownValue.value as SelectedValue[]).find((selected) =>
@@ -96,12 +103,16 @@ const selectedOptions = computed(() => {
   }
 
   return [
-    props.options.find(
+    localOptions.value.find(
       (option) => option[props.valueKey] && isEqual(option[props.valueKey], dropdownValue.value),
     ),
   ].filter((option) => !!option);
 });
 
+/* `selectedOptions` filters `localOptions` (the indexable view of `props.options`) and injects
+   nothing, so every element is a `props.options` element — `TOption`, with its full guarantee. */
+const slotSelectedOptions = computed(() => selectedOptions.value as TOption[]);
+
 const displayLabel = computed(() => {
   if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
@@ -253,7 +264,7 @@ const { getDataTest, dropdownAttrs, listboxAttrs } = useUI<Config>(
         :opened="opened"
         :display-label="displayLabel"
         :full-label="fullLabel"
-        :selected-options="selectedOptions"
+        :selected-options="slotSelectedOptions"
       />
     </template>
 
diff --git a/src/ui.dropdown/storybook/stories.ts b/src/ui.dropdown/storybook/stories.ts
index a4b078abe..8e642e7dd 100644
--- a/src/ui.dropdown/storybook/stories.ts
+++ b/src/ui.dropdown/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdown from "../../ui.dropdown/UDropdown.vue";
+import UDropdownComponent from "../../ui.dropdown/UDropdown.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -20,6 +20,9 @@ import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdown = UDropdownComponent as typeof UDropdownComponent & { __name: string };
+
 interface DefaultUDropdownArgs extends Props {
   slotTemplate?: string;
 }
diff --git a/src/ui.dropdown/tests/UDropdown.test-d.ts b/src/ui.dropdown/tests/UDropdown.test-d.ts
new file mode 100644
index 000000000..2a496941c
--- /dev/null
+++ b/src/ui.dropdown/tests/UDropdown.test-d.ts
@@ -0,0 +1,61 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownSlots<UserOption>["option"]>>[0];
+type DefaultProps = Parameters<NonNullable<UDropdownSlots<UserOption>["default"]>>[0];
+
+describe("UDropdown types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* The option slots are forwarded to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("keeps the full guarantee on selectedOptions, which is a plain subset", () => {
+    /* `selectedOptions` filters `props.options` and injects nothing (`UDropdown.vue:93`), so
+     * unlike the option slots it is NOT Partial. */
+    expectTypeOf<DefaultProps["selectedOptions"]>().toEqualTypeOf<UserOption[]>();
+    expectTypeOf<DefaultProps["selectedOptions"][number]["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("types displayLabel as possibly undefined", () => {
+    /* It joins `option[labelKey]` lookups, which are `undefined` for an option without that key. */
+    expectTypeOf<DefaultProps["displayLabel"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});
diff --git a/src/ui.dropdown/tests/UDropdown.test.ts b/src/ui.dropdown/tests/UDropdown.test.ts
index 4b60adc2f..637d2f350 100644
--- a/src/ui.dropdown/tests/UDropdown.test.ts
+++ b/src/ui.dropdown/tests/UDropdown.test.ts
@@ -3,7 +3,14 @@ import { describe, it, expect } from "vitest";
 import { nextTick } from "vue";
 
 import UDropdown from "../UDropdown.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
+
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
 
 describe("UDropdown.vue", () => {
   const defaultOptions = [
diff --git a/src/ui.dropdown/tests/UDropdownTypes.vue b/src/ui.dropdown/tests/UDropdownTypes.vue
new file mode 100644
index 000000000..ea7498f95
--- /dev/null
+++ b/src/ui.dropdown/tests/UDropdownTypes.vue
@@ -0,0 +1,111 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdown :options="options">
+    <!-- Forwarded verbatim to `UListbox`, so they inherit its group flattening — a flattened
+         member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <!-- `selectedOptions` is a `filter`ed subset of `props.options` with nothing injected, so it
+         keeps the full (non-Partial) guarantee — unlike the option slots above. -->
+    <template #default="{ selectedOptions, opened }">
+      {{ expectString(selectedOptions[0].label) }}
+      {{ expectNumber(selectedOptions[0].qty) }}
+      {{ expectBoolean(opened) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdown>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdown :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdown>
+
+  <UDropdown :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdown>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdown
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdown>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdown from "../UDropdown.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.dropdown/types.ts b/src/ui.dropdown/types.ts
index fe880301b..3c22db329 100644
--- a/src/ui.dropdown/types.ts
+++ b/src/ui.dropdown/types.ts
@@ -1,11 +1,35 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/**
+ * The option slots are forwarded verbatim to `UListbox`, so they inherit its flattening: with
+ * `groupValueKey` set, `filterGroups` concats nested group members into the list the slots iterate
+ * and those members need not carry the parent's members. Hence `SlotOption`, which is `Partial`.
+ *
+ * `selectedOptions` is different — it is a `filter`ed subset of `props.options` (`UDropdown.vue:91`)
+ * with no synthetic entry, so it keeps the full `TOption` guarantee.
+ */
+export interface UDropdownSlots<TOption extends ListboxOption = ListboxOption> {
+  default?: (props: {
+    /* `displayLabel` joins `option[labelKey]` lookups, which yield `undefined` for an option
+       without that key — so it is only `string` when the label is resolvable. */
+    opened: boolean;
+    displayLabel: string | undefined;
+    fullLabel: string;
+    selectedOptions: TOption[];
+  }) => unknown;
+  dropdown?: (props: { opened: boolean; contentClasses: string | undefined }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected dropdown value.
    */
@@ -24,7 +48,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.form-calendar/config.ts b/src/ui.form-calendar/config.ts
index 51adcc383..2d6360dd6 100644
--- a/src/ui.form-calendar/config.ts
+++ b/src/ui.form-calendar/config.ts
@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,
diff --git a/src/ui.form-checkbox-group/UCheckboxGroup.vue b/src/ui.form-checkbox-group/UCheckboxGroup.vue
index e8aab63ab..9521d43f1 100644
--- a/src/ui.form-checkbox-group/UCheckboxGroup.vue
+++ b/src/ui.form-checkbox-group/UCheckboxGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch, useTemplateRef } from "vue";
+import { computed, provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -12,6 +12,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
 import type { UnknownObject } from "../types";
+import type { BaseCheckboxOption } from "../ui.form-checkbox/types";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -35,6 +36,11 @@ const listRef = useTemplateRef<HTMLDivElement>("list");
 
 const checkedItems = ref([] as UnknownObject[]);
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseCheckboxOption & Record<string, BaseCheckboxOption["value"]>)[],
+);
+
 provide<(value: UnknownObject[]) => void>(
   "setCheckboxGroupCheckedItems",
   (value: UnknownObject[]) => {
@@ -116,7 +122,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
       <!-- @slot Use it to add UCheckbox directly. -->
       <slot>
         <UCheckbox
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="modelValue"
           :value="option[valueKey]"
diff --git a/src/ui.form-checkbox/config.ts b/src/ui.form-checkbox/config.ts
index bce9e13ae..94f6d182d 100644
--- a/src/ui.form-checkbox/config.ts
+++ b/src/ui.form-checkbox/config.ts
@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15
diff --git a/src/ui.form-checkbox/tests/UCheckbox.test.ts b/src/ui.form-checkbox/tests/UCheckbox.test.ts
index 2e48bef9a..94061e34d 100644
--- a/src/ui.form-checkbox/tests/UCheckbox.test.ts
+++ b/src/ui.form-checkbox/tests/UCheckbox.test.ts
@@ -33,7 +33,7 @@ describe("UCheckbox.vue", () => {
     it("Value – returns correct value type when checkbox is checked", async () => {
       const testValues = ["string-value", 42, true, { id: 1, name: "test" }, [1, 2, 3]];
 
-      testValues.forEach(async (testValue) => {
+      for (const testValue of testValues) {
         const component = mount(UCheckbox, {
           props: {
             value: testValue,
@@ -48,7 +48,7 @@ describe("UCheckbox.vue", () => {
         const emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![0][0]).toEqual([testValue]);
-      });
+      }
     });
 
     it("TrueValue and FalseValue – returns correct values when checkbox is checked and unchecked", async () => {
@@ -59,7 +59,7 @@ describe("UCheckbox.vue", () => {
         { trueValue: true, falseValue: false },
       ];
 
-      testValuePairs.forEach(async ({ trueValue, falseValue }) => {
+      for (const { trueValue, falseValue } of testValuePairs) {
         const component = mount(UCheckbox, {
           props: {
             trueValue,
@@ -81,7 +81,7 @@ describe("UCheckbox.vue", () => {
         emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![1][0]).toEqual(falseValue);
-      });
+      }
     });
 
     it("Partial – displays correct icon when checkbox is partially checked", () => {
diff --git a/src/ui.form-checkbox/types.ts b/src/ui.form-checkbox/types.ts
index d4bd35e36..49d1178a4 100644
--- a/src/ui.form-checkbox/types.ts
+++ b/src/ui.form-checkbox/types.ts
@@ -4,16 +4,18 @@ import type { ComponentConfig, UnknownObject, UnknownArray } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UCheckboxOption {
+export interface BaseCheckboxOption {
   value?: string | number | boolean | UnknownObject | UnknownArray;
   falseValue?: string | number | boolean | UnknownObject | UnknownArray;
   trueValue?: string | number | boolean | UnknownObject | UnknownArray;
   label?: string;
   icon?: string;
   description?: string;
-  [key: string]: string | number | boolean | UnknownObject | UnknownArray | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UCheckboxOption = BaseCheckboxOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Checkbox value.
diff --git a/src/ui.form-date-picker-range/UDatePickerRange.vue b/src/ui.form-date-picker-range/UDatePickerRange.vue
index 9613d00fb..bebc0b37e 100644
--- a/src/ui.form-date-picker-range/UDatePickerRange.vue
+++ b/src/ui.form-date-picker-range/UDatePickerRange.vue
@@ -736,7 +736,9 @@ watchEffect(() => {
           :min-date="minDate"
           :max-date="maxDate"
           :attrs="rangePeriodMenuAttrs as unknown as UDatePickerRangePeriodMenuAttrs"
-          :data-test="getDataTest('period-menu')"
+          :get-data-test="
+            (suffix?: string) => getDataTest(suffix ? `period-menu-${suffix}` : 'period-menu')
+          "
           @toggle-menu="isShownMenu = !isShownMenu"
           @close-menu="isShownMenu = false"
           @click-prev="onClickShiftDatesList(ShiftAction.Prev)"
@@ -759,7 +761,9 @@ watchEffect(() => {
           :date-format="dateFormat"
           :config="config"
           :attrs="rangeInputsAttrs as unknown as UDatePickerRangeInputsAttrs"
-          :data-test="getDataTest('range-inputs')"
+          :get-data-test="
+            (suffix?: string) => getDataTest(suffix ? `range-inputs-${suffix}` : 'range-inputs')
+          "
         />
 
         <div
diff --git a/src/ui.form-date-picker-range/UDatePickerRangeInputs.vue b/src/ui.form-date-picker-range/UDatePickerRangeInputs.vue
index b3aa974b9..d716c01d5 100644
--- a/src/ui.form-date-picker-range/UDatePickerRangeInputs.vue
+++ b/src/ui.form-date-picker-range/UDatePickerRangeInputs.vue
@@ -16,9 +16,7 @@ type UInputRef = InstanceType<typeof UInput>;
 
 defineOptions({ internal: true });
 
-const props = withDefaults(defineProps<UDatePickerRangeInputsProps>(), {
-  dataTest: null,
-});
+const props = defineProps<UDatePickerRangeInputsProps>();
 
 const rangeInputStartRef = useTemplateRef<UInputRef>("range-input-start");
 const rangeInputEndRef = useTemplateRef<UInputRef>("range-input-end");
@@ -142,7 +140,7 @@ defineExpose({
       v-bind="attrs.rangeInputFirstAttrs.value"
       :name="rangeInputName"
       no-autocomplete
-      :data-test="`${dataTest}-from`"
+      :data-test="getDataTest('from')"
       @blur="updateDateValue(rangeStart, InputRangeType.Start)"
       @keydown.enter="updateDateValue(rangeStart, InputRangeType.Start)"
       @input="validateInput($event, InputRangeType.Start)"
@@ -156,7 +154,7 @@ defineExpose({
       v-bind="attrs.rangeInputLastAttrs.value"
       :name="rangeInputName"
       no-autocomplete
-      :data-test="`${dataTest}-to`"
+      :data-test="getDataTest('to')"
       @blur="updateDateValue(rangeEnd, InputRangeType.End)"
       @keydown.enter="updateDateValue(rangeEnd, InputRangeType.End)"
       @input="validateInput($event, InputRangeType.End)"
diff --git a/src/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue b/src/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue
index a1544c8c1..9d4b4a91d 100644
--- a/src/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue
+++ b/src/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue
@@ -22,9 +22,7 @@ import type { DatePeriodRange } from "./utilDateRange";
 
 defineOptions({ internal: true });
 
-const props = withDefaults(defineProps<UDatePickerRangePeriodMenuProps>(), {
-  dataTest: null,
-});
+const props = defineProps<UDatePickerRangePeriodMenuProps>();
 
 const emit = defineEmits(["toggleMenu", "closeMenu", "clickPrev", "clickNext"]);
 
@@ -150,7 +148,7 @@ function getDatePeriodState(date: DatePeriodRange) {
 </script>
 
 <template>
-  <div v-bind="attrs.periodRowAttrs.value" :data-test="dataTest">
+  <div v-bind="attrs.periodRowAttrs.value" :data-test="getDataTest()">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -159,6 +157,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="soft"
         :label="periodButton.title"
+        :data-test="getDataTest(`period-${periodButton.name}`)"
         v-bind="attrs.periodButtonAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
@@ -170,6 +169,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="soft"
         :label="periodButton.title"
+        :data-test="getDataTest(`period-${periodButton.name}`)"
         v-bind="attrs.periodButtonActiveAttrs.value"
         @click="onClickPeriodButton(periodButton.name)"
       />
@@ -183,6 +183,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="soft"
+      :data-test="getDataTest('custom-range')"
       v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
@@ -200,6 +201,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       size="xs"
       color="grayscale"
       variant="soft"
+      :data-test="getDataTest('custom-range')"
       v-bind="attrs.customRangeButtonAttrs.value"
       @click="onClickCustomRangeButton"
     >
@@ -219,6 +221,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       variant="soft"
       :label="locale.ownRange"
       :left-icon="config.defaults?.ownRangeIcon"
+      :data-test="getDataTest('own-range')"
       v-bind="attrs.periodButtonAttrs.value"
       @click="onClickOwnRange"
     />
@@ -231,6 +234,7 @@ function getDatePeriodState(date: DatePeriodRange) {
       variant="soft"
       :label="locale.ownRange"
       :left-icon="config.defaults?.ownRangeIcon"
+      :data-test="getDataTest('own-range')"
       v-bind="attrs.periodButtonActiveAttrs.value"
       @click="onClickOwnRange"
     />
@@ -244,6 +248,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults?.prevIcon"
+        :data-test="getDataTest('range-switch-prev')"
         v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickPrev')"
       />
@@ -258,6 +263,7 @@ function getDatePeriodState(date: DatePeriodRange) {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults?.nextIcon"
+        :data-test="getDataTest('range-switch-next')"
         v-bind="attrs.rangeSwitchButtonAttrs.value"
         @click="emit('clickNext')"
       />
@@ -265,7 +271,7 @@ function getDatePeriodState(date: DatePeriodRange) {
 
     <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs.value">
       <template
-        v-for="date in periodDateList"
+        v-for="(date, index) in periodDateList"
         :key="date.title + date.startRange.toISOString() + date.endRange.toISOString()"
       >
         <UButton
@@ -276,6 +282,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentSelectedAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -287,6 +294,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateSelectedAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -298,6 +306,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
 
@@ -309,6 +318,7 @@ function getDatePeriodState(date: DatePeriodRange) {
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateAttrs.value"
           :label="String(date.title)"
+          :data-test="getDataTest(`period-date-${index}`)"
           @click="(selectDate(date), toggleMenu())"
         />
       </template>
diff --git a/src/ui.form-date-picker-range/tests/UDatePickerRange.test.ts b/src/ui.form-date-picker-range/tests/UDatePickerRange.test.ts
index 6b6defad4..87dbbf7b6 100644
--- a/src/ui.form-date-picker-range/tests/UDatePickerRange.test.ts
+++ b/src/ui.form-date-picker-range/tests/UDatePickerRange.test.ts
@@ -379,6 +379,65 @@ describe("UDatePickerRange.vue", () => {
       expect(component.find(`[data-test="${dataTest}-button-prev"]`).exists()).toBe(true);
       expect(component.find(`[data-test="${dataTest}-button-next"]`).exists()).toBe(true);
     });
+
+    it("Data Test – applies data-test to period menu buttons when menu is open", async () => {
+      const dataTest = "date-picker-range";
+      const menuPrefix = `${dataTest}-period-menu`;
+
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          dataTest,
+          modelValue: { from: null, to: null },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const monthButton = component.find(`[data-test="${menuPrefix}-period-month"]`);
+      const quarterButton = component.find(`[data-test="${menuPrefix}-period-quarter"]`);
+      const yearButton = component.find(`[data-test="${menuPrefix}-period-year"]`);
+      const ownRangeButton = component.find(`[data-test="${menuPrefix}-own-range"]`);
+
+      expect(monthButton.exists()).toBe(true);
+      expect(quarterButton.exists()).toBe(true);
+      expect(yearButton.exists()).toBe(true);
+      expect(ownRangeButton.exists()).toBe(true);
+
+      await monthButton.trigger("click");
+
+      const gridButtons = component.findAll(`[data-test^="${menuPrefix}-period-date-"]`);
+
+      expect(gridButtons.length).toBeGreaterThan(0);
+    });
+
+    it("Data Test – period menu buttons have no data-test attribute when dataTest is not set", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const periodMenu = component.findComponent(UDatePickerRangePeriodMenu);
+
+      expect(periodMenu.exists()).toBe(true);
+      expect(component.findAll('[data-test^="null-"]').length).toBe(0);
+
+      const monthButton = component.findAll("button").find((button) => button.text() !== "");
+
+      if (monthButton) {
+        await monthButton.trigger("click");
+      }
+
+      expect(component.findAll('[data-test^="null-"]').length).toBe(0);
+    });
   });
 
   describe("Menu", () => {
diff --git a/src/ui.form-date-picker-range/types.ts b/src/ui.form-date-picker-range/types.ts
index 088c6add6..f1167dbef 100644
--- a/src/ui.form-date-picker-range/types.ts
+++ b/src/ui.form-date-picker-range/types.ts
@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 import { ShiftAction } from "./constants";
 
 import type { Ref } from "vue";
-import type { UnknownObject, ComponentConfig } from "../types";
+import type { UnknownObject, ComponentConfig, GetDataTest } from "../types";
 import type { DatePeriodRange } from "./utilDateRange";
 
 export type Locale = typeof defaultConfig.i18n;
@@ -56,7 +56,7 @@ export interface UDatePickerRangePeriodMenuProps {
   maxDate: string | Date | undefined;
   minDate: string | Date | undefined;
   customRangeButton: CustomRangeButton;
-  dataTest?: string | null;
+  getDataTest: GetDataTest;
   config: Config;
   attrs: UDatePickerRangePeriodMenuAttrs;
 }
@@ -74,7 +74,7 @@ export interface UDatePickerRangeInputsProps {
   minDate: string | Date | undefined;
   config: Config;
   attrs: UDatePickerRangeInputsAttrs;
-  dataTest?: string | null;
+  getDataTest: GetDataTest;
 }
 
 export interface CustomRangeButton {
diff --git a/src/ui.form-date-picker/UDatePicker.vue b/src/ui.form-date-picker/UDatePicker.vue
index a8f28e8e9..68e850241 100644
--- a/src/ui.form-date-picker/UDatePicker.vue
+++ b/src/ui.form-date-picker/UDatePicker.vue
@@ -119,6 +119,16 @@ function deactivate() {
   customView.value = View.Day;
 }
 
+function deactivateOnBlur(event: FocusEvent) {
+  const related = event.relatedTarget as HTMLElement | null;
+
+  if (related && wrapperRef.value?.contains(related)) {
+    return;
+  }
+
+  deactivate();
+}
+
 function onUserFormatDateChange(value: string) {
   userFormatDate.value = value.trim();
 }
@@ -279,7 +289,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()" @focusout="deactivateOnBlur">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"
diff --git a/src/ui.form-date-picker/tests/UDatePicker.test.ts b/src/ui.form-date-picker/tests/UDatePicker.test.ts
index c600a298c..0943e91c4 100644
--- a/src/ui.form-date-picker/tests/UDatePicker.test.ts
+++ b/src/ui.form-date-picker/tests/UDatePicker.test.ts
@@ -356,6 +356,53 @@ describe("UDatePicker.vue", () => {
       expect(calendar.isVisible()).toBe(true);
     });
 
+    it("Calendar – hides when focus leaves the whole component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      const outsideElement = document.createElement("button");
+
+      document.body.appendChild(outsideElement);
+
+      await component.trigger("focusout", { relatedTarget: outsideElement });
+
+      expect(calendar.isVisible()).toBe(false);
+
+      outsideElement.remove();
+      component.unmount();
+    });
+
+    it("Calendar – stays open when focus moves inside the component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      await component.trigger("focusout", { relatedTarget: calendar.element });
+
+      expect(calendar.isVisible()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Calendar – hides when escape key is pressed on calendar", async () => {
       const component = mount(UDatePicker, {
         props: {
diff --git a/src/ui.form-input-file/config.ts b/src/ui.form-input-file/config.ts
index 8287168aa..bff0acd0b 100644
--- a/src/ui.form-input-file/config.ts
+++ b/src/ui.form-input-file/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
diff --git a/src/ui.form-input/UInput.vue b/src/ui.form-input/UInput.vue
index 955736071..7d427f8b4 100644
--- a/src/ui.form-input/UInput.vue
+++ b/src/ui.form-input/UInput.vue
@@ -281,6 +281,7 @@ const {
     :align="labelAlign"
     centred
     v-bind="inputLabelAttrs"
+    :data-test="getDataTest('label')"
   >
     <template #label>
       <!--
diff --git a/src/ui.form-input/config.ts b/src/ui.form-input/config.ts
index a68e93570..39ca094bc 100644
--- a/src/ui.form-input/config.ts
+++ b/src/ui.form-input/config.ts
@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-solid outline-transparent
+      border border-solid rounded-medium border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
diff --git a/src/ui.form-input/tests/UInput.test.ts b/src/ui.form-input/tests/UInput.test.ts
index 393275133..f9c0746e6 100644
--- a/src/ui.form-input/tests/UInput.test.ts
+++ b/src/ui.form-input/tests/UInput.test.ts
@@ -302,6 +302,22 @@ describe("UInput.vue", () => {
 
       expect(component.get("input").attributes("data-test")).toBe(dataTestValue);
     });
+
+    it("Data Test – forwards data-test to the label so the error block is targetable", () => {
+      const dataTestValue = "test-input";
+
+      const component = mount(UInput, {
+        props: {
+          dataTest: dataTestValue,
+          error: "This is an error",
+        },
+      });
+
+      const errorElement = component.find(`[data-test="${dataTestValue}-label-error"]`);
+
+      expect(errorElement.exists()).toBe(true);
+      expect(errorElement.text()).toBe("This is an error");
+    });
   });
 
   describe("Slots", () => {
diff --git a/src/ui.form-listbox/UListbox.vue b/src/ui.form-listbox/UListbox.vue
index 8bd58d7dc..d8b603e3c 100644
--- a/src/ui.form-listbox/UListbox.vue
+++ b/src/ui.form-listbox/UListbox.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -18,12 +18,20 @@ import usePointer from "./usePointer";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Option, Props, Config, SelectedValue } from "./types";
+import type {
+  Option,
+  Props,
+  Config,
+  SelectedValue,
+  ListboxOption,
+  SlotOption,
+  UListboxSlots,
+} from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TOption>>(), {
+  ...getDefaults<Props<TOption>, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   options: () => [],
 });
@@ -65,6 +73,8 @@ const emit = defineEmits([
   "update:search",
 ]);
 
+defineSlots<UListboxSlots<TOption>>();
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const listboxInputRef = useTemplateRef<{ input: HTMLInputElement }>("listbox-input");
 const optionsRef = useTemplateRef<HTMLLIElement[]>("option");
@@ -75,8 +85,11 @@ const wrapperMaxHeight = ref("");
 
 const localSearch = ref(props.search ?? "");
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
-  usePointer(props.options, optionsRef, wrapperRef);
+  usePointer(localOptions.value, optionsRef, wrapperRef);
 
 const elementId = props.id || useId();
 
@@ -123,10 +136,13 @@ const getOptionAriaSelected = (option: Option) => {
   return isSelectedOption(option);
 };
 
+/* `filterGroups` flattens group members, which need not carry `TOption`'s members. */
+const getSlotOption = (option: Option) => option as SlotOption<TOption>;
+
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
-  let options = [...props.options];
+  let options = [...localOptions.value];
 
   options = props.groupValueKey
     ? filterGroups(
@@ -324,9 +340,9 @@ function optionHighlight(index: number, option: Option) {
 }
 
 function addPointerElement(keyCode?: string) {
-  if (props.options.length > 0) {
-    select(props.options[pointer.value], keyCode);
-    onClickOption(props.options[pointer.value]);
+  if (localOptions.value.length > 0) {
+    select(localOptions.value[pointer.value], keyCode);
+    onClickOption(localOptions.value[pointer.value]);
   }
 
   pointerReset();
@@ -496,14 +512,14 @@ const {
             @binding {object} option
             @binding {number} index
           -->
-          <slot name="before-option" :option="option" :index="index" />
+          <slot name="before-option" :option="getSlotOption(option)" :index="index" />
 
           <!--
             @slot Use it to add something instead of the option.
             @binding {object} option
             @binding {number} index
           -->
-          <slot name="option" :option="option" :index="index">
+          <slot name="option" :option="getSlotOption(option)" :index="index">
             <span
               :style="getMarginForSubCategory(option.level)"
               v-bind="optionContentAttrs"
@@ -520,7 +536,7 @@ const {
           -->
           <slot
             name="after-option"
-            :option="option"
+            :option="getSlotOption(option)"
             :selected="isSelectedOption(option)"
             :index="index"
           >
@@ -580,6 +596,7 @@ const {
         <UButton
           round
           square
+          tabindex="-1"
           v-bind="addOptionButtonAttrs"
           :data-test="getDataTest('add-button')"
           @click="onClickAddOption"
diff --git a/src/ui.form-listbox/config.ts b/src/ui.form-listbox/config.ts
index d9cd89fe0..208491191 100644
--- a/src/ui.form-listbox/config.ts
+++ b/src/ui.form-listbox/config.ts
@@ -15,7 +15,7 @@ export default /*tw*/ {
   listboxInput: {
     base: "{UInputSearch} sticky top-0 pt-1 bg-default z-10",
     searchInput: {
-      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 border-default!",
+      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 outline-none! border-default!",
     },
   },
   selectIcon: {
diff --git a/src/ui.form-listbox/storybook/stories.ts b/src/ui.form-listbox/storybook/stories.ts
index 35802c616..0a8b8c67d 100644
--- a/src/ui.form-listbox/storybook/stories.ts
+++ b/src/ui.form-listbox/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UListbox from "../UListbox.vue";
+import UListboxComponent from "../UListbox.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
@@ -23,6 +23,9 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UListbox = UListboxComponent as typeof UListboxComponent & { __name: string };
+
 interface DefaultUListboxArgs extends Props {
   slotTemplate?: string;
 }
diff --git a/src/ui.form-listbox/tests/UListbox.test-d.ts b/src/ui.form-listbox/tests/UListbox.test-d.ts
new file mode 100644
index 000000000..e4d908679
--- /dev/null
+++ b/src/ui.form-listbox/tests/UListbox.test-d.ts
@@ -0,0 +1,63 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { ListboxOption, Props, SlotOption, UListboxSlots } from "../types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionSlot = NonNullable<UListboxSlots<UserOption>["option"]>;
+type OptionProps = Parameters<OptionSlot>[0];
+
+describe("UListbox types", () => {
+  it("infers the caller's option shape in an option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    /* An index signature would make any key legal, so `option.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the reserved option keys available", () => {
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("groupLabel");
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("isSubGroup");
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("level");
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* `filterGroups` concats the `groupValueKey` array into the flat list the slots iterate, and
+     * those members are typed `Option`, not `TOption`. A runtime probe with grouped options whose
+     * members lack the parent's members confirms all three slots receive them verbatim. */
+    type BeforeOption = Parameters<NonNullable<UListboxSlots<UserOption>["before-option"]>>[0];
+    type AfterOption = Parameters<NonNullable<UListboxSlots<UserOption>["after-option"]>>[0];
+
+    expectTypeOf<BeforeOption["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<AfterOption["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<AfterOption["selected"]>().toEqualTypeOf<boolean>();
+
+    /* The real flattened-member shape recorded at these slots must be assignable to all of them. */
+    type GroupMember = { label: string; value: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeOption["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterOption["option"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+
+  it("exposes SlotOption as the shared slot option shape", () => {
+    expectTypeOf<SlotOption<UserOption>>().toEqualTypeOf<OptionProps["option"]>();
+  });
+});
diff --git a/src/ui.form-listbox/tests/UListboxTypes.vue b/src/ui.form-listbox/tests/UListboxTypes.vue
new file mode 100644
index 000000000..cbaba9fc0
--- /dev/null
+++ b/src/ui.form-listbox/tests/UListboxTypes.vue
@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UListbox :options="options">
+    <!-- With `groupValueKey` set, `filterGroups` flattens group members into the same list the
+         slots iterate, and a member need not carry the parent's members — so they are optional. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, selected, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectBoolean(selected) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UListbox>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UListbox :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UListbox>
+
+  <UListbox :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UListbox>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present.
+       `filterGroups` concats the `groupValueKey` array into the flat list, and those members are
+       typed `Option`, not `TOption` — a runtime probe confirms the slots receive them verbatim. -->
+  <UListbox
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UListbox>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UListbox from "../UListbox.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens.
+   The parent declares `label`/`qty`/`groupName`; the flattened child carries none of them. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.form-listbox/types.ts b/src/ui.form-listbox/types.ts
index f4b9a4661..370c1412f 100644
--- a/src/ui.form-listbox/types.ts
+++ b/src/ui.form-listbox/types.ts
@@ -16,9 +16,41 @@ export interface Option extends BaseOption {
   [key: string]: string | number | boolean | UnknownObject | Option[] | OnClickOption | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type ListboxOption = BaseOption & (object | UnknownObject);
+
 export type SelectedValue = string | number | UnknownObject;
 
-export interface Props {
+/* Drops `Option`'s `[key: string]` index signature so slot options only expose known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Option shape exposed to slots: the caller's option plus the reserved option keys.
+ *
+ * `TOption`'s own keys are optional. With `groupValueKey` set, `filterGroups` flattens the
+ * nested `groupValueKey` array into the same list the slots iterate, and those group members
+ * are typed `Option`, not `TOption` — so a flattened child need not carry the parent's members.
+ * `BaseOption`'s keys are optional already, so nothing is promised that can be absent.
+ */
+export type SlotOption<TOption extends ListboxOption = ListboxOption> = Partial<
+  KnownKeys<TOption>
+> &
+  BaseOption;
+
+export interface UListboxSlots<TOption extends ListboxOption = ListboxOption> {
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: {
+    option: SlotOption<TOption>;
+    selected: boolean;
+    index: number;
+  }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected item.
    */
@@ -32,7 +64,7 @@ export interface Props {
   /**
    * List options.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Shows input to search value in a list.
diff --git a/src/ui.form-radio-group/URadioGroup.vue b/src/ui.form-radio-group/URadioGroup.vue
index 55773bb5f..4508572e9 100644
--- a/src/ui.form-radio-group/URadioGroup.vue
+++ b/src/ui.form-radio-group/URadioGroup.vue
@@ -10,7 +10,7 @@ import URadio from "../ui.form-radio/URadio.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, SetRadioGroupSelectedItem, Config } from "./types";
+import type { Props, BaseOption, SetRadioGroupSelectedItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,6 +31,11 @@ const emit = defineEmits([
 
 const listRef = useTemplateRef<HTMLDivElement>("list");
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseOption & Record<string, BaseOption["value"]>)[],
+);
+
 const selectedItem = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -57,7 +62,14 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultConfig);
+const mutatedProps = computed(() => ({
+  label: Boolean(props.label),
+}));
+
+const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
@@ -99,7 +111,7 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
       <!-- @slot Use it to add URadio directly. -->
       <slot>
         <URadio
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="selectedItem"
           :value="option[valueKey]"
diff --git a/src/ui.form-radio-group/config.ts b/src/ui.form-radio-group/config.ts
index ebefd7fe8..d85441028 100644
--- a/src/ui.form-radio-group/config.ts
+++ b/src/ui.form-radio-group/config.ts
@@ -5,11 +5,16 @@ export default /*tw*/ {
     base: "flex flex-col",
     variants: {
       size: {
-        sm: "gap-1.5 mt-1",
-        md: "gap-2 mt-1.5",
-        lg: "gap-2.5 mt-2",
+        sm: "gap-2",
+        md: "gap-2",
+        lg: "gap-2.5",
       },
     },
+    compoundVariants: [
+      { size: "sm", label: true, class: "mt-1" },
+      { size: "md", label: true, class: "mt-1.5" },
+      { size: "lg", label: true, class: "mt-2" },
+    ],
   },
   defaults: {
     color: "primary",
diff --git a/src/ui.form-radio-group/types.ts b/src/ui.form-radio-group/types.ts
index cdb11a5c4..af72ceafc 100644
--- a/src/ui.form-radio-group/types.ts
+++ b/src/ui.form-radio-group/types.ts
@@ -10,9 +10,8 @@ export interface BaseOption {
   description?: string;
 }
 
-export interface Option extends BaseOption {
-  [key: string]: string | number | boolean | UnknownArray | UnknownObject | undefined;
-}
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type Option = BaseOption & (object | UnknownObject);
 
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)
diff --git a/src/ui.form-radio/config.ts b/src/ui.form-radio/config.ts
index ac59675fd..eb851bf3d 100644
--- a/src/ui.form-radio/config.ts
+++ b/src/ui.form-radio/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-solid border-default rounded-full outline-solid outline-transparent
+      border border-solid border-default rounded-full outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15
diff --git a/src/ui.form-select/USelect.vue b/src/ui.form-select/USelect.vue
index 978ba63ac..15b206d52 100644
--- a/src/ui.form-select/USelect.vue
+++ b/src/ui.form-select/USelect.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends SelectOption">
 import { ref, computed, nextTick, watch, useSlots, onMounted, useId, useTemplateRef } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -19,12 +19,13 @@ import defaultConfig from "./config";
 import { COMPONENT_NAME, DIRECTION, KEYS, MULTIPLE_VARIANTS } from "./constants";
 
 import type { Option, Config as UListboxConfig } from "../ui.form-listbox/types";
-import type { Props, Config } from "./types";
-import type { KeyAttrsWithConfig } from "../types";
+import type { Props, Config, SelectOption, USelectSlots, SelectedSlotOption } from "./types";
+import type { ComponentPublicInstance } from "vue";
+import type { ComponentExposed, KeyAttrsWithConfig } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -97,12 +98,17 @@ const emit = defineEmits([
   "change",
 ]);
 
+defineSlots<USelectSlots<TOption>>();
+
 const slots = useSlots();
 
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
 
-const listboxRef = useTemplateRef<InstanceType<typeof UListbox>>("listbox");
+/* `UListbox` is generic, so its type is a function — `InstanceType` does not apply. */
+const listboxRef = useTemplateRef<ComponentExposed<typeof UListbox> & ComponentPublicInstance>(
+  "listbox",
+);
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
 const leftSlotWrapperRef = useTemplateRef<HTMLDivElement>("leftSlotWrapper");
@@ -135,7 +141,7 @@ const dropdownValue = computed({
     emit("update:modelValue", value);
     emit("change", { value, options: props.options });
 
-    if (!props.multiple && props.closeOnSelect) deactivate();
+    if (props.closeOnSelect) deactivate();
   },
 });
 
@@ -151,16 +157,24 @@ const isMultipleBadgeVariant = computed(
   () => props.multiple && props.multipleVariant === MULTIPLE_VARIANTS.badge,
 );
 
+/* Indexable view of the options — `labelKey` / `valueKey` lookups need an index signature. */
+const listboxOptions = computed(() => props.options as Option[]);
+
+/* Same array, keeping `TOption` so the forwarded `UListbox` option slots infer the caller's shape. */
+const typedListboxOptions = computed(() => props.options);
+
 const localValue = computed<Option | Option[]>(() => {
   if (!props.multiple) {
     const [singleValue] = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
 
-    return getCurrentOption(props.options, singleValue, props.valueKey, props.groupValueKey);
+    return getCurrentOption(listboxOptions.value, singleValue, props.valueKey, props.groupValueKey);
   }
 
   return props.modelValue && Array.isArray(props.modelValue)
     ? (props.modelValue
-        .map((value) => getCurrentOption(props.options, value, props.valueKey, props.groupValueKey))
+        .map((value) =>
+          getCurrentOption(listboxOptions.value, value, props.valueKey, props.groupValueKey),
+        )
         .filter(Boolean) as Option[])
     : [];
 });
@@ -179,6 +193,21 @@ const selectedOptions = computed(() => {
   };
 });
 
+/* Slot-facing views of the values above. The internals keep `Option` because `labelKey` /
+ * `valueKey` are runtime strings and need its index signature; slots get the caller's shape.
+ * The narrowing cannot over-promise: `SelectedSlotOption` makes every member optional, which is
+ * exactly what the runtime delivers — a probe records a bare `{}` at `selected-option`, `left` and
+ * `right` when no option matches `modelValue`, and a `{}` array element in `multiple` mode. */
+const slotSelectedOption = computed(() => selectedOption.value as SelectedSlotOption<TOption>);
+
+const slotSelectedOptions = computed(
+  () => selectedOptions.value.full as SelectedSlotOption<TOption>[],
+);
+
+const slotVisibleOptions = computed(
+  () => selectedOptions.value.visible as SelectedSlotOption<TOption>[],
+);
+
 const selectedOptionsLabel = computed(() => {
   return {
     full: selectedOptions.value.full.map((item) => item[props.labelKey]).join(", "),
@@ -556,7 +585,7 @@ const {
 
     <div
       ref="wrapper"
-      :tabindex="searchable || disabled ? -1 : 0"
+      :tabindex="disabled ? -1 : searchable && isOpen ? -1 : 0"
       role="combobox"
       :aria-expanded="ariaExpanded"
       aria-haspopup="listbox"
@@ -589,7 +618,7 @@ const {
         <slot
           name="right"
           :icon-name="rightIcon"
-          :options="multiple ? selectedOptions.full : selectedOption"
+          :options="multiple ? slotSelectedOptions : slotSelectedOption"
         >
           <UIcon v-if="rightIcon" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
@@ -669,7 +698,10 @@ const {
             @binding {array} options
             @binding {object} options
           -->
-          <slot name="selected-options" :options="multiple ? selectedOptions.full : selectedOption">
+          <slot
+            name="selected-options"
+            :options="multiple ? slotSelectedOptions : slotSelectedOption"
+          >
             <span v-if="!multiple" v-bind="selectedLabelsAttrs" @click="toggle" @mousedown.prevent>
               <!--
                 @slot Use it to customize selected option.
@@ -681,7 +713,7 @@ const {
                 name="selected-option"
                 :label="selectedOption[labelKey]"
                 :value="selectedOption[valueKey]"
-                :option="localValue"
+                :option="slotSelectedOption"
               >
                 <div
                   :title="(selectedOption[labelKey] || '') as string"
@@ -705,7 +737,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{
                         option[labelKey] +
@@ -746,7 +778,7 @@ const {
                         name="selected-option"
                         :label="option[labelKey]"
                         :value="option[valueKey]"
-                        :option="option"
+                        :option="slotVisibleOptions[index]"
                       >
                         {{ option[labelKey] }}
                       </slot>
@@ -799,7 +831,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{ option[labelKey] }}
                     </slot>
@@ -858,7 +890,7 @@ const {
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
-        :options="options"
+        :options="typedListboxOptions"
         :disabled="disabled"
         :size="size"
         :debounce="debounce"
@@ -926,7 +958,7 @@ const {
         <slot
           name="left"
           :icon-name="leftIcon"
-          :options="multiple ? selectedOptions.full : selectedOption"
+          :options="multiple ? slotSelectedOptions : slotSelectedOption"
         >
           <UIcon v-if="leftIcon" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>
diff --git a/src/ui.form-select/config.ts b/src/ui.form-select/config.ts
index 795b625a0..4d631ff90 100644
--- a/src/ui.form-select/config.ts
+++ b/src/ui.form-select/config.ts
@@ -11,10 +11,10 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-solid border-default bg-default outline-solid outline-transparent
-      hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
-      focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
+      flex flex-row-reverse justify-between w-full min-h-full box-border relative transition
+      rounded-medium border border-solid border-default bg-default outline-solid outline-small outline-transparent
+      hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
+      focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
     variants: {
       error: {
diff --git a/src/ui.form-select/storybook/stories.ts b/src/ui.form-select/storybook/stories.ts
index ba4f1349f..947876320 100644
--- a/src/ui.form-select/storybook/stories.ts
+++ b/src/ui.form-select/storybook/stories.ts
@@ -7,7 +7,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import USelect from "../../ui.form-select/USelect.vue";
+import USelectComponent from "../../ui.form-select/USelect.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
@@ -25,6 +25,9 @@ import patMorgan from "./assets/images/pat-morgan.png";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const USelect = USelectComponent as typeof USelectComponent & { __name: string };
+
 interface USelectArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "openDirection" | "labelAlign";
diff --git a/src/ui.form-select/tests/USelect.test-d.ts b/src/ui.form-select/tests/USelect.test-d.ts
new file mode 100644
index 000000000..e05662f57
--- /dev/null
+++ b/src/ui.form-select/tests/USelect.test-d.ts
@@ -0,0 +1,76 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type {
+  Props,
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "../types";
+import type { SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionSlot = NonNullable<USelectSlots<UserOption>["option"]>;
+type OptionProps = Parameters<OptionSlot>[0];
+
+type SelectedOptionProps = Parameters<NonNullable<USelectSlots<UserOption>["selected-option"]>>[0];
+
+describe("USelect types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    /* Stage 3 must not invent its own option-slot shape. */
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+    expectTypeOf<SelectedSlotOption<UserOption>>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("promises nothing on a selected option, because {} reaches it at runtime", () => {
+    /* `getCurrentOption` returns `{} as Option` when no option matches `modelValue`
+     * (`utilSelect.ts:15`). A runtime probe records that bare `{}` at `selected-option` in all
+     * three `multiple` variants, and at `left` / `right` in single mode. */
+    expectTypeOf<SelectedOptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<SelectedOptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* The empty object the runtime actually delivers must be assignable. */
+    expectTypeOf<Record<string, never>>().toExtend<SelectedOptionProps["option"]>();
+  });
+
+  it("types left / right / selected-options as the option-or-array binding", () => {
+    type LeftProps = Parameters<NonNullable<USelectSlots<UserOption>["left"]>>[0];
+    type RightProps = Parameters<NonNullable<USelectSlots<UserOption>["right"]>>[0];
+    type SelectedOptionsProps = Parameters<
+      NonNullable<USelectSlots<UserOption>["selected-options"]>
+    >[0];
+
+    /* All three bind `multiple ? selectedOptions.full : selectedOption`. */
+    expectTypeOf<LeftProps["options"]>().toEqualTypeOf<SelectedOptionsBinding<UserOption>>();
+    expectTypeOf<RightProps["options"]>().toEqualTypeOf<SelectedOptionsBinding<UserOption>>();
+    expectTypeOf<SelectedOptionsProps["options"]>().toEqualTypeOf<
+      SelectedOptionsBinding<UserOption>
+    >();
+
+    /* In `multiple` mode a non-matching `modelValue` entry contributes a `{}` element. */
+    expectTypeOf<Record<string, never>[]>().toExtend<SelectedOptionsBinding<UserOption>>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<SelectOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});
diff --git a/src/ui.form-select/tests/USelect.test.ts b/src/ui.form-select/tests/USelect.test.ts
index bd99f677f..bf0b18b7e 100644
--- a/src/ui.form-select/tests/USelect.test.ts
+++ b/src/ui.form-select/tests/USelect.test.ts
@@ -2,13 +2,20 @@ import { mount, flushPromises } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
 import USelect from "../USelect.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("USelect.vue", () => {
   const defaultOptions = [
     { label: "Option 1", value: "option1" },
@@ -255,6 +262,63 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("searchable")).toBe(true);
     });
 
+    it("Searchable – closes when the search input blurs to an outside element", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      expect(component.emitted("open")).toBeTruthy();
+
+      const outside = document.createElement("button");
+
+      document.body.appendChild(outside);
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: outside });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeTruthy();
+      expect(component.findComponent(UListbox).exists()).toBe(false);
+
+      outside.remove();
+      component.unmount();
+    });
+
+    it("Searchable – stays open when focus moves within its own listbox", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      const listboxEl = component.getComponent(UListbox).element as HTMLElement;
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: listboxEl });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeFalsy();
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Search v-model – passes search to UListbox and filters", async () => {
       const component = mount(USelect, {
         props: {
diff --git a/src/ui.form-select/tests/USelectTypes.vue b/src/ui.form-select/tests/USelectTypes.vue
new file mode 100644
index 000000000..a1d1f5f9a
--- /dev/null
+++ b/src/ui.form-select/tests/USelectTypes.vue
@@ -0,0 +1,113 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <USelect :options="options">
+    <!-- Forwarded verbatim to `UListbox`, so they inherit its group flattening — a flattened
+         member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, selected, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectBoolean(selected) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </USelect>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <USelect :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </USelect>
+
+  <USelect :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </USelect>
+
+  <!-- Regression guard: `getCurrentOption` returns `{} as Option` when no option matches
+       `modelValue` (`utilSelect.ts:15`). A runtime probe records that bare `{}` arriving at
+       `selected-option`, `left` and `right`, and as an array element in `multiple` mode. -->
+  <USelect :options="options" model-value="no-such-value">
+    <template #selected-option="{ option }">
+      <!-- @vue-expect-error the `{}` fallback need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+
+    <template #left="{ options: selected }">
+      <!-- @vue-expect-error the binding is `option | option[]`, never an array alone. -->
+      {{ expectArray(selected) }}
+    </template>
+
+    <template #right="{ options: selected }">
+      {{ expectSelectedBinding(selected) }}
+    </template>
+
+    <template #selected-options="{ options: selected }">
+      {{ expectSelectedBinding(selected) }}
+    </template>
+  </USelect>
+
+  <USelect :options="options" :model-value="['a']" multiple>
+    <template #selected-options="{ options: selected }">
+      <!-- @vue-expect-error in `multiple` mode an element may be the `{}` fallback. -->
+      {{ Array.isArray(selected) ? expectString(selected[0].label) : "" }}
+    </template>
+  </USelect>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import USelect from "../USelect.vue";
+
+import type { SelectedOptionsBinding } from "../types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+
+function expectArray(value: unknown[]) {
+  return value;
+}
+
+function expectSelectedBinding(value: SelectedOptionsBinding<UserOption>) {
+  return value;
+}
+</script>
diff --git a/src/ui.form-select/types.ts b/src/ui.form-select/types.ts
index 6cf8bb16a..2ee939ef2 100644
--- a/src/ui.form-select/types.ts
+++ b/src/ui.form-select/types.ts
@@ -1,11 +1,62 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
-import type { ComponentConfig } from "../types";
+import type { BaseOption, SlotOption } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type SelectOption = BaseOption & (object | UnknownObject);
+
+/**
+ * Shape of a selected option exposed to slots.
+ *
+ * `getCurrentOption` falls back to `{} as Option` when no option matches (`utilSelect.ts:15`), and
+ * that empty object reaches `selected-option`, `left` and `right` verbatim — confirmed by runtime
+ * probe. In `multiple` mode it is an element of the array given to `selected-options`. So no member
+ * of `TOption` can be promised; `SlotOption` (Stage 2's type) already encodes exactly that.
+ */
+export type SelectedSlotOption<TOption extends SelectOption = SelectOption> = SlotOption<TOption>;
+
+/**
+ * What `left`, `right` and `selected-options` receive: `multiple ? selectedOptions.full : selectedOption`.
+ * In `multiple` mode a non-matching `modelValue` entry contributes a `{}` element to the array.
+ */
+export type SelectedOptionsBinding<TOption extends SelectOption = SelectOption> =
+  | SelectedSlotOption<TOption>
+  | SelectedSlotOption<TOption>[];
+
+export interface USelectSlots<TOption extends SelectOption = SelectOption> {
+  label?: (props: { label: string }) => unknown;
+  description?: (props: { description: string }) => unknown;
+  error?: (props: { error: string | boolean }) => unknown;
+  left?: (props: { iconName: string; options: SelectedOptionsBinding<TOption> }) => unknown;
+  right?: (props: { iconName: string; options: SelectedOptionsBinding<TOption> }) => unknown;
+  toggle?: (props: { iconName: string; opened: boolean }) => unknown;
+  clear?: (props: { iconName: string; clear: (event: MouseEvent) => void }) => unknown;
+  "before-toggle"?: () => unknown;
+  "after-toggle"?: () => unknown;
+  "selected-options"?: (props: { options: SelectedOptionsBinding<TOption> }) => unknown;
+  /* All four `selected-option` sites bind a single option, never an array: the `!multiple` branch
+   * binds the selected option and each `multiple` variant binds a `selectedOptions.visible` element.
+   * A runtime probe records a bare `{}` here in all three variants, hence the optional members. */
+  "selected-option"?: (props: {
+    label: unknown;
+    value: unknown;
+    option: SelectedSlotOption<TOption>;
+  }) => unknown;
+  "selected-counter"?: (props: { count: number }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: {
+    option: SlotOption<TOption>;
+    selected: boolean;
+    index: number;
+  }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends SelectOption = SelectOption> {
   /**
    * Select value.
    */
@@ -14,7 +65,7 @@ export interface Props {
   /**
    * Select options.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Select label.
diff --git a/src/ui.form-switch/USwitch.vue b/src/ui.form-switch/USwitch.vue
index aa5dc39ce..77b93e83e 100644
--- a/src/ui.form-switch/USwitch.vue
+++ b/src/ui.form-switch/USwitch.vue
@@ -68,16 +68,19 @@ function toggle() {
   }
 }
 
-function onClickToggle(event: Event) {
-  event.stopPropagation();
-  toggle();
-}
-
-function onKeydownSpace() {
-  toggle();
+/**
+ * Toggles when the visible track is clicked. Clicks forwarded from the label
+ * arrive on the hidden checkbox (which already toggles via v-model), so skip
+ * those to avoid a double toggle.
+ */
+function onClickWrapper(event: MouseEvent) {
+  if ((event.target as HTMLElement)?.tagName !== "INPUT") {
+    toggle();
+  }
 }
 
-function onClickWrapper() {
+function onKeydownToggle(event: Event) {
+  event.preventDefault();
   toggle();
 }
 
@@ -119,7 +122,6 @@ const {
     :disabled="disabled"
     v-bind="switchLabelAttrs"
     :data-test="getDataTest()"
-    @click="onClickToggle"
   >
     <template #label>
       <!--
@@ -141,9 +143,9 @@ const {
       ref="wrapper"
       tabindex="0"
       v-bind="wrapperAttrs"
-      @keydown.enter="onKeydownSpace"
-      @keydown.space.prevent="onKeydownSpace"
       @click="onClickWrapper"
+      @keydown.enter="onKeydownToggle"
+      @keydown.space="onKeydownToggle"
     >
       <input
         :id="elementId"
@@ -154,7 +156,6 @@ const {
         :aria-labelledby="inputAriaLabelledBy"
         :aria-label="!hasLabel ? localeMessages.switch : undefined"
         v-bind="inputAttrs"
-        @click="onClickToggle"
       />
 
       <span v-bind="circleAttrs">
diff --git a/src/ui.form-switch/config.ts b/src/ui.form-switch/config.ts
index 999fc44ca..80ece0f37 100644
--- a/src/ui.form-switch/config.ts
+++ b/src/ui.form-switch/config.ts
@@ -6,7 +6,8 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-full outline-solid outline-transparent cursor-pointer transition focus-within:transition
+      flex items-center p-0.5 relative cursor-pointer transition focus-within:transition
+      rounded-full outline-solid outline-medium outline-transparent
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {
diff --git a/src/ui.form-switch/tests/USwitch.test.ts b/src/ui.form-switch/tests/USwitch.test.ts
index 1de73dc8e..87663e508 100644
--- a/src/ui.form-switch/tests/USwitch.test.ts
+++ b/src/ui.form-switch/tests/USwitch.test.ts
@@ -13,6 +13,7 @@ describe("USwitch.vue", () => {
       const modelValue = true;
 
       const component = mount(USwitch, {
+        attachTo: document.body,
         props: {
           modelValue,
           "onUpdate:modelValue": (e) => component.setProps({ modelValue: e }),
@@ -28,6 +29,8 @@ describe("USwitch.vue", () => {
       await inputElement.trigger("click");
 
       expect(component.emitted("update:modelValue")![1][0]).toBe(true);
+
+      component.unmount();
     });
 
     it("Label – passes label to ULabel component", () => {
@@ -199,6 +202,154 @@ describe("USwitch.vue", () => {
     });
   });
 
+  describe("Toggle behavior", () => {
+    it("Label click – plain-text label toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          label: "Test Label",
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Label slot click – #label slot content toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+        slots: {
+          label: "Custom Label Content",
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    // The track (wrapper) is a sibling of the <label>, outside its `for` forwarding,
+    // so its own @click="toggle" is the only path — clicking it must toggle exactly once.
+    it("Track click – wrapper toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Track click – disabled wrapper emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          disabled: true,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+
+    it("Keyboard – Enter toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.enter");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Keyboard – Space toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.space");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Disabled – label click emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          label: "Test Label",
+          disabled: true,
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+
+    it("Disabled – keyboard emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          disabled: true,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.enter");
+      await component.get("[vl-key='wrapper']").trigger("keydown.space");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+  });
+
   describe("Slots", () => {
     it("Label – renders custom content from label slot", () => {
       const customLabelContent = "Custom Label Content";
diff --git a/src/ui.form-textarea/config.ts b/src/ui.form-textarea/config.ts
index ff79a9467..5af05979f 100644
--- a/src/ui.form-textarea/config.ts
+++ b/src/ui.form-textarea/config.ts
@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
diff --git a/src/ui.image-avatar-group/types.ts b/src/ui.image-avatar-group/types.ts
index c2cee73ea..b26a632f4 100644
--- a/src/ui.image-avatar-group/types.ts
+++ b/src/ui.image-avatar-group/types.ts
@@ -1,11 +1,11 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { ChipItem } from "../ui.image-avatar/types";
 
 export type Config = typeof defaultConfig;
 
-export interface AvatarItem {
+export interface BaseAvatarItem {
   src?: string;
   label?: string;
   color?: string;
@@ -13,6 +13,9 @@ export interface AvatarItem {
   chip?: ChipItem;
 }
 
+/* Any object shape is a valid avatar, only reserved avatar keys are type checked. */
+export type AvatarItem = BaseAvatarItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar items.
diff --git a/src/ui.image-avatar/types.ts b/src/ui.image-avatar/types.ts
index 61a675ca5..6facdb6b3 100644
--- a/src/ui.image-avatar/types.ts
+++ b/src/ui.image-avatar/types.ts
@@ -1,10 +1,10 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface ChipItem {
+export interface BaseChipItem {
   icon?: string;
   color?: Props["color"];
   xPosition?: "left" | "right";
@@ -12,6 +12,9 @@ export interface ChipItem {
   inset?: boolean;
 }
 
+/* Any object shape is a valid chip, only reserved chip keys are type checked. */
+export type ChipItem = BaseChipItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar label (username, nickname, etc.).
diff --git a/src/ui.image-icon/UIcon.vue b/src/ui.image-icon/UIcon.vue
index 4d15e98f1..e76a2d371 100644
--- a/src/ui.image-icon/UIcon.vue
+++ b/src/ui.image-icon/UIcon.vue
@@ -11,13 +11,14 @@ import defaultConfig from "./config";
 
 import USkeleton from "../ui.skeleton/USkeleton.vue";
 
-import type { AsyncComponentLoader, ComponentPublicInstance } from "vue";
+import type { AsyncComponentLoader, ComponentOptions, ComponentPublicInstance } from "vue";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  src: undefined,
 });
 
 const emit = defineEmits([
@@ -53,7 +54,7 @@ const dynamicComponent = computed(() => {
   }
 
   const name = props.name;
-  const src = props.src;
+  const src = props.src as ComponentOptions | undefined;
 
   /* Edge case */
   if (!src && !name) return "";
diff --git a/src/ui.image-icon/types.ts b/src/ui.image-icon/types.ts
index 2cda13ff3..78f6c6b35 100644
--- a/src/ui.image-icon/types.ts
+++ b/src/ui.image-icon/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { DefineComponent, SVGAttributes } from "vue";
+import type { Component, SVGAttributes } from "vue";
 
 import type { ComponentConfig } from "../types";
 
@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Icon source (svg as a vue component).
    */
-  src?: DefineComponent<SVGAttributes>;
+  src?: Component<SVGAttributes>;
 
   /**
    * Icon color.
diff --git a/src/ui.navigation-breadcrumbs/types.ts b/src/ui.navigation-breadcrumbs/types.ts
index 88e4d0c5e..a075de448 100644
--- a/src/ui.navigation-breadcrumbs/types.ts
+++ b/src/ui.navigation-breadcrumbs/types.ts
@@ -1,13 +1,16 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { Props as ULinkProps } from "../ui.button-link/types";
 
 export type Config = typeof defaultConfig;
 
-export interface UBreadcrumb extends ULinkProps {
+export interface BaseBreadcrumb extends ULinkProps {
   icon?: string;
 }
 
+/* Any object shape is a valid breadcrumb, only reserved breadcrumb keys are type checked. */
+export type UBreadcrumb = BaseBreadcrumb & (object | UnknownObject);
+
 export interface Props {
   /**
    * Array of links.
diff --git a/src/ui.navigation-tab/UTab.vue b/src/ui.navigation-tab/UTab.vue
index f786fb023..83d04030d 100644
--- a/src/ui.navigation-tab/UTab.vue
+++ b/src/ui.navigation-tab/UTab.vue
@@ -13,12 +13,13 @@ import type { Props as UTabsProps, SetUTabsSelectedItem } from "../ui.navigation
 
 defineOptions({ inheritAttrs: false });
 
-const setUTabsSelectedItem = inject<SetUTabsSelectedItem>("setUTabsSelectedItem");
-const getUTabsSelectedItem = inject("getUTabsSelectedItem");
-const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable");
-const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare");
-const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock");
+const setUTabsSelectedItem = inject<SetUTabsSelectedItem | null>("setUTabsSelectedItem", null);
+const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
+const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable", false);
+const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare", false);
+const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock", false);
 const getUTabsSize = inject<UTabsProps["size"]>("getUTabsSize", "md");
+const getUTabsPreventTabClick = inject<() => boolean>("getUTabsPreventTabClick", () => false);
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
@@ -34,12 +35,16 @@ const size = computed(() => toValue(getUTabsSize));
 const block = computed(() => toValue(getUTabsBlock));
 const square = computed(() => toValue(getUTabsSquare));
 const scrollable = computed(() => toValue(getUTabsScrollable));
-const isActive = computed(() => toValue(getUTabsSelectedItem) === props.value);
+const isActive = computed(() => {
+  if (!setUTabsSelectedItem) return true;
+
+  return toValue(getUTabsSelectedItem) === props.value;
+});
 
 async function onClickSetValue() {
-  if (!props.disabled && setUTabsSelectedItem) {
-    setUTabsSelectedItem(props.value ?? "");
-  }
+  if (toValue(getUTabsPreventTabClick) || props.disabled || !setUTabsSelectedItem) return;
+
+  setUTabsSelectedItem(props.value ?? "");
 }
 
 defineExpose({
diff --git a/src/ui.navigation-tab/tests/UTab.test.ts b/src/ui.navigation-tab/tests/UTab.test.ts
index 146079e4e..3f6e13520 100644
--- a/src/ui.navigation-tab/tests/UTab.test.ts
+++ b/src/ui.navigation-tab/tests/UTab.test.ts
@@ -149,6 +149,20 @@ describe("UTab.vue", () => {
 
   // Active state tests
   describe("Active state", () => {
+    it("Active – applies active classes when rendered without UTabs", () => {
+      const expectedClass = "border-primary";
+
+      const component = mount(UTab, {
+        props: {
+          label: "Tab Item",
+        },
+      });
+
+      const button = component.findComponent(UButton);
+
+      expect(button.attributes("class")).toContain(expectedClass);
+    });
+
     it("Active – applies active classes when tab is selected", () => {
       const value = "tab1";
       const expectedClass = "border-primary";
diff --git a/src/ui.navigation-tabs/UTabs.vue b/src/ui.navigation-tabs/UTabs.vue
index 983b003db..160db74c0 100644
--- a/src/ui.navigation-tabs/UTabs.vue
+++ b/src/ui.navigation-tabs/UTabs.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UTabsOption">
 import { ref, computed, provide, onMounted, onUnmounted, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -7,19 +7,21 @@ import { getDefaults } from "../utils/ui";
 import UTab from "../ui.navigation-tab/UTab.vue";
 import UButton from "../ui.button/UButton.vue";
 
-import { COMPONENT_NAME, SCROLL_OFFSET } from "./constants";
+import { COMPONENT_NAME, SCROLL_OFFSET, DRAG_THRESHOLD, DRAG_CLICK_SUPPRESS_MS } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UTabsOption, UTabsSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   options: () => [],
 });
 
+defineSlots<UTabsSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when the selected tab changes.
@@ -37,6 +39,15 @@ const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const scrollContainerRef = useTemplateRef<HTMLDivElement | null>("scroll-container");
 const showLeftArrow = ref(false);
 const showRightArrow = ref(false);
+const isDragging = ref(false);
+const preventTabClick = ref(false);
+
+let isPointerDown = false;
+let dragAxis: "x" | "y" | null = null;
+let startX = 0;
+let startY = 0;
+let startScrollLeft = 0;
+let suppressClickTimer: ReturnType<typeof setTimeout> | null = null;
 
 function checkScroll() {
   if (!scrollContainerRef.value) return;
@@ -59,17 +70,148 @@ function scrollNext() {
   scrollContainerRef.value.scrollBy({ left: SCROLL_OFFSET, behavior: "smooth" });
 }
 
+function isScrollableOverflow() {
+  if (!scrollContainerRef.value) return false;
+
+  return scrollContainerRef.value.scrollWidth > scrollContainerRef.value.clientWidth;
+}
+
+function clearSuppressClickTimer() {
+  if (!suppressClickTimer) return;
+
+  clearTimeout(suppressClickTimer);
+  suppressClickTimer = null;
+}
+
+function stopDragListeners() {
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+  document.removeEventListener("pointercancel", onPointerUp);
+}
+
+function resetDragState() {
+  isPointerDown = false;
+  dragAxis = null;
+  isDragging.value = false;
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+}
+
+function suppressTabClick() {
+  preventTabClick.value = true;
+  clearSuppressClickTimer();
+
+  suppressClickTimer = setTimeout(() => {
+    preventTabClick.value = false;
+    suppressClickTimer = null;
+  }, DRAG_CLICK_SUPPRESS_MS);
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!props.scrollable || event.button > 0 || !isScrollableOverflow()) return;
+
+  isPointerDown = true;
+  dragAxis = null;
+  startX = event.clientX;
+  startY = event.clientY;
+  startScrollLeft = scrollContainerRef.value?.scrollLeft ?? 0;
+
+  document.addEventListener("pointermove", onPointerMove, { passive: false });
+  document.addEventListener("pointerup", onPointerUp);
+  document.addEventListener("pointercancel", onPointerUp);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!isPointerDown || !scrollContainerRef.value) return;
+
+  if (event.pointerType === "mouse" && event.buttons === 0) {
+    onPointerUp();
+
+    return;
+  }
+
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+
+  if (!dragAxis) {
+    if (Math.abs(deltaX) < DRAG_THRESHOLD && Math.abs(deltaY) < DRAG_THRESHOLD) return;
+
+    dragAxis = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+
+    if (dragAxis === "y") {
+      stopDragListeners();
+      resetDragState();
+
+      return;
+    }
+
+    isDragging.value = true;
+    document.body.style.cursor = "move";
+    document.body.style.userSelect = "none";
+  }
+
+  if (dragAxis !== "x") return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft = startScrollLeft - deltaX;
+}
+
+function onPointerUp() {
+  const wasDragging = isDragging.value;
+
+  stopDragListeners();
+  resetDragState();
+
+  if (wasDragging) {
+    suppressTabClick();
+  }
+}
+
+function onClickCapture(event: MouseEvent) {
+  if (!preventTabClick.value) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+  preventTabClick.value = false;
+  clearSuppressClickTimer();
+}
+
+function getHorizontalWheelDelta(event: WheelEvent) {
+  if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+    return event.deltaX;
+  }
+
+  return event.shiftKey ? event.deltaY : 0;
+}
+
+function onWheel(event: WheelEvent) {
+  if (!props.scrollable || !scrollContainerRef.value || !isScrollableOverflow()) return;
+
+  const deltaX = getHorizontalWheelDelta(event);
+
+  if (!deltaX) return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft += deltaX;
+}
+
 onMounted(() => {
   if (scrollContainerRef.value) {
     scrollContainerRef.value.addEventListener("scroll", checkScroll, { passive: true });
+    scrollContainerRef.value.addEventListener("wheel", onWheel, { passive: false });
 
     checkScroll();
   }
 });
 
 onUnmounted(() => {
+  stopDragListeners();
+  resetDragState();
+  clearSuppressClickTimer();
+
   if (scrollContainerRef.value) {
     scrollContainerRef.value.removeEventListener("scroll", checkScroll);
+    scrollContainerRef.value.removeEventListener("wheel", onWheel);
   }
 });
 
@@ -79,6 +221,7 @@ provide("getUTabsSquare", () => props.square);
 provide("getUTabsScrollable", () => props.scrollable);
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
+provide("getUTabsPreventTabClick", () => preventTabClick.value);
 
 defineExpose({
   /**
@@ -97,6 +240,7 @@ const {
   config,
   wrapperAttrs,
   tabsAttrs,
+  dragAttrs,
   tabAttrs,
   prevAttrs,
   nextAttrs,
@@ -117,7 +261,15 @@ const {
       </slot>
     </div>
 
-    <div ref="scroll-container" v-bind="tabsAttrs" :data-test="getDataTest()" @scroll="checkScroll">
+    <div
+      ref="scroll-container"
+      v-bind="tabsAttrs"
+      :class="isDragging && dragAttrs.class"
+      :data-test="getDataTest()"
+      @scroll="checkScroll"
+      @pointerdown="onPointerDown"
+      @click.capture="onClickCapture"
+    >
       <!-- @slot Use it to add the UTab component. -->
       <slot>
         <UTab
diff --git a/src/ui.navigation-tabs/config.ts b/src/ui.navigation-tabs/config.ts
index 4a456560e..23dcb94f0 100644
--- a/src/ui.navigation-tabs/config.ts
+++ b/src/ui.navigation-tabs/config.ts
@@ -4,10 +4,11 @@ export default /*tw*/ {
     base: "flex border-b border-default w-full",
     variants: {
       scrollable: {
-        true: "overflow-hidden flex-nowrap scroll-smooth",
+        true: "overflow-hidden flex-nowrap touch-pan-y select-none",
       },
     },
   },
+  drag: "icon-drag cursor-move scroll-auto! *:pointer-events-none",
   tab: "{UTab}",
   prev: "",
   next: "",
diff --git a/src/ui.navigation-tabs/constants.ts b/src/ui.navigation-tabs/constants.ts
index 282ed52f7..54a439847 100644
--- a/src/ui.navigation-tabs/constants.ts
+++ b/src/ui.navigation-tabs/constants.ts
@@ -5,3 +5,5 @@
 export const COMPONENT_NAME = "UTabs";
 
 export const SCROLL_OFFSET = 200;
+export const DRAG_THRESHOLD = 5;
+export const DRAG_CLICK_SUPPRESS_MS = 300;
diff --git a/src/ui.navigation-tabs/storybook/stories.ts b/src/ui.navigation-tabs/storybook/stories.ts
index acb3a6843..ed4b24cd1 100644
--- a/src/ui.navigation-tabs/storybook/stories.ts
+++ b/src/ui.navigation-tabs/storybook/stories.ts
@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UTabs from "../../ui.navigation-tabs/UTabs.vue";
+import UTabsComponent from "../../ui.navigation-tabs/UTabs.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UTab from "../../ui.navigation-tab/UTab.vue";
@@ -20,6 +20,9 @@ import johnDoe from "../../ui.navigation-tab/storybook/assets/john-doe.png";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UTabs = UTabsComponent as typeof UTabsComponent & { __name: string };
+
 interface UTabsArgs extends Props {
   slotTemplate?: string;
   enum: "size";
@@ -89,6 +92,14 @@ Scrollable.args = {
   options: getOptionsArray(),
   scrollable: true,
 };
+Scrollable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Scroll overflowing tabs with the arrow buttons, by dragging the tab list, or with horizontal wheel.",
+    },
+  },
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };
diff --git a/src/ui.navigation-tabs/tests/UTabs.test-d.ts b/src/ui.navigation-tabs/tests/UTabs.test-d.ts
new file mode 100644
index 000000000..66471553b
--- /dev/null
+++ b/src/ui.navigation-tabs/tests/UTabs.test-d.ts
@@ -0,0 +1,50 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UTabsOption, UTabsSlots } from "../types";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type LabelProps = Parameters<NonNullable<UTabsSlots<CountedTab>["label"]>>[0];
+
+describe("UTabs types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<LabelProps["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<LabelProps["item"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<LabelProps["active"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UTabs` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<LabelProps["item"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UTabsSlots<CountedTab>["left"]>>[0];
+    type Right = Parameters<NonNullable<UTabsSlots<CountedTab>["right"]>>[0];
+    type Prev = Parameters<NonNullable<UTabsSlots["prev"]>>[0];
+
+    expectTypeOf<Left["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Right["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Prev["iconName"]>().toEqualTypeOf<string>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UTabsOption>>();
+    expectTypeOf<Props<CountedTab>["options"]>().toEqualTypeOf<CountedTab[] | undefined>();
+  });
+});
diff --git a/src/ui.navigation-tabs/tests/UTabs.test.ts b/src/ui.navigation-tabs/tests/UTabs.test.ts
index 8c8c303f7..b11bc9af9 100644
--- a/src/ui.navigation-tabs/tests/UTabs.test.ts
+++ b/src/ui.navigation-tabs/tests/UTabs.test.ts
@@ -1,3 +1,4 @@
+import { nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
@@ -7,6 +8,25 @@ import UButton from "../../ui.button/UButton.vue";
 
 import type { Props, UTabsOption } from "../types";
 
+function dispatchPointer(
+  target: EventTarget,
+  type: "pointerdown" | "pointermove" | "pointerup",
+  clientX: number,
+  extra: PointerEventInit = {},
+) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "mouse",
+      ...extra,
+    }),
+  );
+}
+
 describe("UTabs.vue", () => {
   // Global options definition
   const options: UTabsOption[] = [
@@ -94,7 +114,7 @@ describe("UTabs.vue", () => {
       const tabsContainer = component.find(`[vl-key="tabs"]`);
 
       // Check that the container has the scrollable class
-      expect(tabsContainer.classes()).toContain("scroll-smooth");
+      expect(tabsContainer.classes()).toContain("overflow-hidden");
     });
 
     it("Scroll – shows scroll buttons when scrollable and content overflows", async () => {
@@ -134,6 +154,198 @@ describe("UTabs.vue", () => {
       expect(nextButton).toBeDefined();
     });
 
+    it("Scrollable – scrolls the tab list on pointer drag", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+
+      await nextTick();
+
+      expect(scrollLeft).toBe(80);
+      expect(tabsContainer.classes()).toContain("cursor-move");
+      expect(tabsContainer.classes()).toContain("icon-drag");
+
+      dispatchPointer(document, "pointerup", 120);
+    });
+
+    it("Scrollable – does not select a tab after a drag gesture", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          modelValue: "tab0",
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        writable: true,
+        value: 0,
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+      dispatchPointer(document, "pointerup", 120);
+
+      await component.findAllComponents(UTab)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+
+    it("Scrollable – scrolls the tab list on horizontal wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 40,
+          deltaY: 0,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
+    it("Scrollable – does not scroll the tab list on vertical wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(0);
+    });
+
+    it("Scrollable – scrolls the tab list on shift+wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
     it("Block – provides block value to tabs", () => {
       const block = true;
 
diff --git a/src/ui.navigation-tabs/tests/UTabsTypes.vue b/src/ui.navigation-tabs/tests/UTabsTypes.vue
new file mode 100644
index 000000000..e9f636f2f
--- /dev/null
+++ b/src/ui.navigation-tabs/tests/UTabsTypes.vue
@@ -0,0 +1,65 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <!-- `UTabs` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UTabs :options="options">
+    <template #left="{ item, index, active, iconName }">
+      {{ expectString(item.label) }}
+      {{ expectString(item.badge) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #label="{ item, index, label, active }">
+      {{ expectString(item.badge) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+    </template>
+
+    <template #right="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ item.nonExistent }}
+    </template>
+
+    <template #prev="{ iconName }">{{ expectString(iconName) }}</template>
+    <template #next="{ iconName }">{{ expectString(iconName) }}</template>
+  </UTabs>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UTabs :options="typedOptions">
+    <template #label="{ item }">{{ expectNumber(item.count) }}</template>
+  </UTabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UTabs from "../UTabs.vue";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Dashboard", badge: "new" }];
+const typedOptions = ref<CountedTab[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>
diff --git a/src/ui.navigation-tabs/types.ts b/src/ui.navigation-tabs/types.ts
index 1c242280f..bc27accba 100644
--- a/src/ui.navigation-tabs/types.ts
+++ b/src/ui.navigation-tabs/types.ts
@@ -8,13 +8,35 @@ export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
 ) => void;
 
-export interface UTabsOption {
+export interface BaseTabOption {
   value: string | number;
   label: string;
   disabled?: boolean;
 }
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UTabsOption = BaseTabOption & (object | UnknownObject);
+
+/**
+ * Slots receive each option verbatim — `UTabs` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UTabsSlots<TItem extends UTabsOption = UTabsOption> {
+  default?: () => unknown;
+  prev?: (props: { iconName: string }) => unknown;
+  next?: (props: { iconName: string }) => unknown;
+  left?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+  label?: (props: {
+    item: TItem;
+    index: number;
+    label: string;
+    active: boolean;
+    iconName?: string;
+  }) => unknown;
+  right?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UTabsOption = UTabsOption> {
   /**
    * Selected tab value.
    */
@@ -23,7 +45,7 @@ export interface Props {
   /**
    * Tab options.
    */
-  options?: UTabsOption[];
+  options?: TItem[];
 
   /**
    * Tabs size.
@@ -31,7 +53,7 @@ export interface Props {
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Make the Tabs scrollable.
+   * Make the Tabs scrollable via arrow buttons, dragging, or horizontal wheel.
    */
   scrollable?: boolean;
 
diff --git a/src/ui.skeleton-text/constants.ts b/src/ui.skeleton-text/constants.ts
index 13dc7f56f..9a0ec79a8 100644
--- a/src/ui.skeleton-text/constants.ts
+++ b/src/ui.skeleton-text/constants.ts
@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "USkeletonInput";
+export const COMPONENT_NAME = "USkeletonText";
diff --git a/src/ui.text-badge/config.ts b/src/ui.text-badge/config.ts
index 35f845688..5d3314816 100644
--- a/src/ui.text-badge/config.ts
+++ b/src/ui.text-badge/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium leading-none! outline-solid outline-transparent
+      border border-solid rounded-medium leading-none! outline-solid outline-medium outline-transparent
     `,
     variants: {
       variant: {
diff --git a/src/utils/node/helper.js b/src/utils/node/helper.js
index 364722ab5..4859a6b8f 100644
--- a/src/utils/node/helper.js
+++ b/src/utils/node/helper.js
@@ -204,6 +204,7 @@ export async function buildTSFile(entryPath, configOutFile) {
     output: {
       file: configOutFile,
       format: "esm",
+      codeSplitting: false,
     },
   });
 }
diff --git a/src/utils/node/loaderIcon.js b/src/utils/node/loaderIcon.js
index d2335dd27..9f09fd878 100644
--- a/src/utils/node/loaderIcon.js
+++ b/src/utils/node/loaderIcon.js
@@ -227,7 +227,7 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
     const iconPropsPattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
     const uComponentIconNamePattern =
       // eslint-disable-next-line vue/max-len
-      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)(U\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
+      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)([A-Z]\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
 
     const uComponentIconNameArray = fileContents.match(new RegExp(uComponentIconNamePattern, "g"));
 
diff --git a/src/v.tooltip/vTooltip.ts b/src/v.tooltip/vTooltip.ts
index b9f6a1c4b..c0fa37cb0 100644
--- a/src/v.tooltip/vTooltip.ts
+++ b/src/v.tooltip/vTooltip.ts
@@ -64,7 +64,7 @@ function setUpTippy(el: HTMLElement, props: string | TippyProps) {
     return;
   }
 
-  if (typeof props !== "string" && props.content && String(props.content).length) {
+  if (typeof props !== "string" && props && props.content && String(props.content).length) {
     tippy(el, merge({}, settings, props || {}));
   }
 }