From fc44c7ac4d2da109810c0d3d396ba0f74d19d451 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Mon, 13 Jul 2026 23:23:40 +0800
Subject: [PATCH 01/73] fix: UDatePickerRange: add missing dynamic data-test
 attributes to the interactive elements

---
 src/types.ts                                  |  4 +-
 .../UDatePickerRange.vue                      |  4 +-
 .../UDatePickerRangeInputs.vue                |  8 +--
 .../UDatePickerRangePeriodMenu.vue            | 20 +++++--
 .../tests/UDatePickerRange.test.ts            | 59 +++++++++++++++++++
 src/ui.form-date-picker-range/types.ts        |  6 +-
 6 files changed, 85 insertions(+), 16 deletions(-)

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.form-date-picker-range/UDatePickerRange.vue b/src/ui.form-date-picker-range/UDatePickerRange.vue
index 9613d00fb..28961927e 100644
--- a/src/ui.form-date-picker-range/UDatePickerRange.vue
+++ b/src/ui.form-date-picker-range/UDatePickerRange.vue
@@ -736,7 +736,7 @@ 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 +759,7 @@ 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 {

From 47fa462c78e8ad7b09bbc816a54c8f57ef021ca0 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 14 Jul 2026 16:27:35 +0800
Subject: [PATCH 02/73] refactor: UDatePickerRange: improve readability of
 data-test attribute definitions

---
 src/ui.form-date-picker-range/UDatePickerRange.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui.form-date-picker-range/UDatePickerRange.vue b/src/ui.form-date-picker-range/UDatePickerRange.vue
index 28961927e..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"
-          :get-data-test="(suffix?: string) => getDataTest(suffix ? `period-menu-${suffix}` : '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"
-          :get-data-test="(suffix?: string) => getDataTest(suffix ? `range-inputs-${suffix}` : 'range-inputs')"
+          :get-data-test="
+            (suffix?: string) => getDataTest(suffix ? `range-inputs-${suffix}` : 'range-inputs')
+          "
         />
 
         <div

From ada1781dd9d938b6ece842b3b8a8f36b9f1b8f07 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 14 Jul 2026 16:27:43 +0800
Subject: [PATCH 03/73] chore: update dependencies (`rolldown` to v1.1.5,
 `esbuild` to v0.28.1, and others)

---
 package-lock.json | 511 ++++++++++++++++++++++++----------------------
 package.json      |   2 +-
 2 files changed, 265 insertions(+), 248 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 57a6612f7..8dbf3278f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
       ],
@@ -1477,13 +1487,13 @@
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
-      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@tybys/wasm-util": "^0.10.1"
+        "@tybys/wasm-util": "^0.10.3"
       },
       "funding": {
         "type": "github",
@@ -2075,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"
@@ -2457,9 +2468,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"
       ],
@@ -2473,9 +2484,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"
       ],
@@ -2489,9 +2500,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"
       ],
@@ -2505,9 +2516,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"
       ],
@@ -2521,9 +2532,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"
       ],
@@ -2537,9 +2548,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"
       ],
@@ -2553,9 +2564,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"
       ],
@@ -2569,9 +2580,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"
       ],
@@ -2585,9 +2596,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"
       ],
@@ -2601,9 +2612,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"
       ],
@@ -2617,9 +2628,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"
       ],
@@ -2633,9 +2644,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"
       ],
@@ -2649,27 +2660,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"
       ],
@@ -2683,9 +2694,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"
       ],
@@ -3350,9 +3361,9 @@
       "license": "MIT"
     },
     "node_modules/@tybys/wasm-util": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
-      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4592,9 +4603,9 @@
       "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.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5709,9 +5720,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",
@@ -5722,32 +5733,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": {
@@ -7140,14 +7151,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",
@@ -7164,10 +7172,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"
@@ -7976,9 +7994,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",
@@ -8581,9 +8599,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",
@@ -8600,7 +8618,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -9097,9 +9115,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": [
         {
@@ -9132,7 +9150,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"
@@ -9192,16 +9210,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",
@@ -9273,13 +9281,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"
@@ -9288,27 +9296,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": {
@@ -9968,9 +9985,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",
@@ -10236,9 +10253,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": {
@@ -10436,16 +10453,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"
@@ -10461,7 +10478,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",
@@ -10513,9 +10530,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"
@@ -11283,9 +11300,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
-      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/package.json b/package.json
index 0922d4b9d..257cea4b5 100644
--- a/package.json
+++ b/package.json
@@ -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",

From 952237991aee017b097db1d287274f8707d0da75 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 14 Jul 2026 16:47:59 +0800
Subject: [PATCH 04/73] fix: disable code splitting in node helper for
 consistent output format

---
 src/utils/node/helper.js | 1 +
 1 file changed, 1 insertion(+)

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,
     },
   });
 }

From 2a7283c38fb5bcea82de45924f88cd60ee0c20ba Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 14 Jul 2026 08:55:38 +0000
Subject: [PATCH 05/73] Release v1.4.12-beta.0 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8dbf3278f..7c72e7d9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.11",
+  "version": "1.4.12-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.11",
+      "version": "1.4.12-beta.0",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 257cea4b5..fe35b47e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.11",
+  "version": "1.4.12-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From db4142320ce655d8ed3d3746e67ff0450561461d Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 14 Jul 2026 17:05:55 +0800
Subject: [PATCH 06/73] chore: update Storybook config to use relative imports
 for `vueless` plugins and add `src/package.json` to `.gitignore`

---
 .gitignore                | 3 +++
 .storybook/vite.config.ts | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

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/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 })],

From 7abe598b07ae4aa2da7368b546dfaa2b9e1f6b48 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 14 Jul 2026 09:08:23 +0000
Subject: [PATCH 07/73] Release v1.4.12-beta.1 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7c72e7d9f..0d79ee8cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.0",
+  "version": "1.4.12-beta.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.0",
+      "version": "1.4.12-beta.1",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index fe35b47e0..3e29fe92e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.0",
+  "version": "1.4.12-beta.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 85b326c521d1d61926206b9da8b20efcc1da7e74 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Wed, 29 Jul 2026 13:42:03 +0300
Subject: [PATCH 08/73] feat: add sortable fallback options to UDataList props

---
 src/ui.data-list/UDataList.vue |  3 +++
 src/ui.data-list/config.ts     |  3 +++
 src/ui.data-list/types.ts      | 15 +++++++++++++++
 3 files changed, 21 insertions(+)

diff --git a/src/ui.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
index d55536dea..227c5beac 100644
--- a/src/ui.data-list/UDataList.vue
+++ b/src/ui.data-list/UDataList.vue
@@ -129,6 +129,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"
diff --git a/src/ui.data-list/config.ts b/src/ui.data-list/config.ts
index 65ae77b2e..0f161bc14 100644
--- a/src/ui.data-list/config.ts
+++ b/src/ui.data-list/config.ts
@@ -55,6 +55,9 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "value",
     animationDuration: 200,
+    forceFallback: false,
+    fallbackOnBody: false,
+    fallbackClass: "sortable-fallback",
     /* icons */
     dragIcon: "drag_indicator",
   },
diff --git a/src/ui.data-list/types.ts b/src/ui.data-list/types.ts
index ff1e41ff6..78f02fbdb 100644
--- a/src/ui.data-list/types.ts
+++ b/src/ui.data-list/types.ts
@@ -49,6 +49,21 @@ 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

From fb931768575893d274ff7152a94a89ce7df85b08 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Wed, 29 Jul 2026 14:48:05 +0300
Subject: [PATCH 09/73] feat: enhance UDataList with Force Fallback options and
 corresponding tests

---
 src/ui.data-list/storybook/stories.ts    | 16 +++++
 src/ui.data-list/tests/UDataList.test.ts | 77 ++++++++++++++++++++++++
 2 files changed, 93 insertions(+)

diff --git a/src/ui.data-list/storybook/stories.ts b/src/ui.data-list/storybook/stories.ts
index c75f39dfc..642676a85 100644
--- a/src/ui.data-list/storybook/stories.ts
+++ b/src/ui.data-list/storybook/stories.ts
@@ -118,6 +118,22 @@ Nesting.args = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const ForceFallback = DefaultTemplate.bind({});
+ForceFallback.args = {
+  forceFallback: true,
+  fallbackOnBody: true,
+  fallbackClass: "sortable-fallback",
+};
+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.ts b/src/ui.data-list/tests/UDataList.test.ts
index 5e9b53b39..41d2ae352 100644
--- a/src/ui.data-list/tests/UDataList.test.ts
+++ b/src/ui.data-list/tests/UDataList.test.ts
@@ -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 sortable-fallback", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("sortable-fallback");
+    });
+
     it("Nesting – renders nested items when children array is present", async () => {
       const component = mount(UDataList, {
         props: {

From 72277237e66b0564199de144cabe651a0ac2e5dc Mon Sep 17 00:00:00 2001
From: KinduD21 <KinduD21@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:43:14 +0000
Subject: [PATCH 10/73] Release v1.4.12-beta.2 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d50e45241..3bb70f5b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.1",
+  "version": "1.4.12-beta.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.1",
+      "version": "1.4.12-beta.2",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 5034fa259..c6a42e3b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.1",
+  "version": "1.4.12-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 69ba28f9c61d75f1af6a70d6ad45d8e27b8349d8 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Wed, 29 Jul 2026 19:09:42 +0300
Subject: [PATCH 11/73] refactor: update draggableGhost and fallbackClass
 styles in UDataList config

---
 src/ui.data-list/config.ts            | 4 ++--
 src/ui.data-list/storybook/stories.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui.data-list/config.ts b/src/ui.data-list/config.ts
index 0f161bc14..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: `
@@ -57,7 +57,7 @@ export default /*tw*/ {
     animationDuration: 200,
     forceFallback: false,
     fallbackOnBody: false,
-    fallbackClass: "sortable-fallback",
+    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 642676a85..99e56e462 100644
--- a/src/ui.data-list/storybook/stories.ts
+++ b/src/ui.data-list/storybook/stories.ts
@@ -122,7 +122,7 @@ export const ForceFallback = DefaultTemplate.bind({});
 ForceFallback.args = {
   forceFallback: true,
   fallbackOnBody: true,
-  fallbackClass: "sortable-fallback",
+  fallbackClass: "opacity-100!",
 };
 ForceFallback.parameters = {
   docs: {

From 7759e9893cbe0c232a55d7b3c72eaf2e82949df3 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Wed, 29 Jul 2026 19:13:58 +0300
Subject: [PATCH 12/73] test: update fallback class default in UDataList tests
 from sortable-fallback to shadow-sm

---
 src/ui.data-list/tests/UDataList.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui.data-list/tests/UDataList.test.ts b/src/ui.data-list/tests/UDataList.test.ts
index 41d2ae352..d820900bf 100644
--- a/src/ui.data-list/tests/UDataList.test.ts
+++ b/src/ui.data-list/tests/UDataList.test.ts
@@ -227,7 +227,7 @@ describe("UDataList.vue", () => {
       expect(draggableComponent.vm.$attrs["fallback-class"]).toBe(fallbackClass);
     });
 
-    it("Fallback Class – defaults to sortable-fallback", () => {
+    it("Fallback Class – defaults to shadow-sm", () => {
       const component = mount(UDataList, {
         props: {
           list: defaultList,
@@ -236,7 +236,7 @@ describe("UDataList.vue", () => {
 
       const draggableComponent = component.findComponent(draggable);
 
-      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("sortable-fallback");
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("shadow-sm");
     });
 
     it("Nesting – renders nested items when children array is present", async () => {

From 5846e602c20e2dd339c2d8b2aa1ed2a9d9e74e25 Mon Sep 17 00:00:00 2001
From: KinduD21 <KinduD21@users.noreply.github.com>
Date: Wed, 29 Jul 2026 16:16:32 +0000
Subject: [PATCH 13/73] Release v1.4.12-beta.3 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3bb70f5b9..8251de5f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.2",
+  "version": "1.4.12-beta.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.2",
+      "version": "1.4.12-beta.3",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index c6a42e3b9..6a532570f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.2",
+  "version": "1.4.12-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 0b481a99bfdd894e9ee254c1c4bc555623efc1f7 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Sat, 1 Aug 2026 03:22:19 +0000
Subject: [PATCH 14/73] Release v1.4.12-beta.4 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ed1dbe20..07aa71ba7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.3",
+  "version": "1.4.12-beta.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.3",
+      "version": "1.4.12-beta.4",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 1e30f198b..efa233268 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.3",
+  "version": "1.4.12-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From b31e01ff918a04839c71e533219d9a46cea3b8e1 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sat, 1 Aug 2026 12:05:39 +0800
Subject: [PATCH 15/73] chore: update dependencies (`brace-expansion` to v5.0.9
 & v2.1.4, `svgo` to v4.0.2) in `package-lock.json`

---
 package-lock.json | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4e264cf6e..1ba8f9ae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4603,16 +4603,16 @@
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
-      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+      "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": {
@@ -5608,9 +5608,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": {
@@ -6524,9 +6524,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": {
@@ -9844,9 +9844,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",

From ba1e3894b289803da481ce92a30ddfe24fc02bcb Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sat, 1 Aug 2026 12:06:29 +0800
Subject: [PATCH 16/73] chore: remove unnecessary newline in Storybook theme
 CSS file

---
 .storybook/theme/theme.css | 1 -
 1 file changed, 1 deletion(-)

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;
 }
-

From 3e7693a08fa637c7ce9b999c80de2625d38d2a40 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sat, 1 Aug 2026 12:07:59 +0800
Subject: [PATCH 17/73] chore: remove deprecated Storybook theme styles and
 configuration files

---
 .storybook/themes/theme.css      | 33 -------------------------------
 .storybook/themes/themeConfig.ts | 34 --------------------------------
 2 files changed, 67 deletions(-)
 delete mode 100644 .storybook/themes/theme.css
 delete mode 100644 .storybook/themes/themeConfig.ts

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",
-  },
-};

From 93c3615093620f9acd8197bea6f192cbfbabcc1e Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Sat, 1 Aug 2026 04:10:21 +0000
Subject: [PATCH 18/73] Release v1.4.12-beta.5 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ba8f9ae8..e96fdf925 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.4",
+  "version": "1.4.12-beta.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.4",
+      "version": "1.4.12-beta.5",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 6de8a18c0..127784ca7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.4",
+  "version": "1.4.12-beta.5",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 975467ac2de5860633431d85acc81739f5029276 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 25 Aug 2026 17:17:30 +0800
Subject: [PATCH 19/73] fix: UInput: add dynamic data-test attribute for label
 and ensure error block is targetable in tests

---
 src/ui.form-input/UInput.vue           |  1 +
 src/ui.form-input/tests/UInput.test.ts | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

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/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", () => {

From 111a6b6442b859a35859be0820a918ad3555dbbd Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 25 Aug 2026 17:27:16 +0800
Subject: [PATCH 20/73] feat: UTable: add skeleton loading support with
 configurable rows and widths

---
 src/ui.data-table/UTable.vue           | 73 ++++++++++++++++++---
 src/ui.data-table/config.ts            | 11 +++-
 src/ui.data-table/storybook/stories.ts | 30 +++++++++
 src/ui.data-table/tests/UTable.test.ts | 90 ++++++++++++++++++++++++--
 src/ui.data-table/types.ts             | 16 ++++-
 5 files changed, 203 insertions(+), 17 deletions(-)

diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 47b76cc55..796e39f71 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -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";
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   dateDivider: () => [],
   selectedRows: () => [],
   expandedRows: () => [],
+  skeletonWidths: () => defaultConfig.defaults.skeletonWidths,
 });
 
 const emit = defineEmits([
@@ -206,7 +208,9 @@ const isCheckedMoreOneTableItems = computed(() => {
   return Boolean(localSelectedRows.value.length);
 });
 
-const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
+const tableRowWidthStyle = computed(() => ({
+  width: `${tableWidth.value / PX_IN_REM}rem`,
+}));
 
 const flatTableRows = computed(() => getFlatRows(props.rows));
 
@@ -216,6 +220,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 +259,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();
 
@@ -663,7 +683,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[];
@@ -889,7 +911,7 @@ function getDateDividerConfig(row: Row, isSelected: boolean) {
     : bodyDateDividerAttrs.value.config;
 
   return getMergedConfig({
-    defaultConfig: defaultConfig,
+    defaultConfig,
     globalConfig: getDateDividerData(row.rowDate).config,
   }) as UDividerConfig;
 }
@@ -917,7 +939,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,6 +1060,8 @@ const {
   bodyCellSearchMatchTextAttrs,
   bodyCellSearchMatchActiveAttrs,
   bodyCellSearchMatchTextActiveAttrs,
+  skeletonCellAttrs,
+  skeletonCheckboxAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 
 /* Plain object — inner refs are already reactive. */
@@ -1171,7 +1197,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
         </template>
       </div>
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1203,7 +1229,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
       -->
       <slot name="header-actions" :selected-rows="localSelectedRows" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1235,7 +1261,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
       -->
       <slot name="header-actions" :selected-rows="localSelectedRows" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div ref="table-wrapper" v-bind="tableWrapperAttrs" @scroll="virtualScroll.onScroll">
@@ -1293,7 +1319,12 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
                 @binding {number} index
               -->
               <slot
-                v-if="hasSlotContent($slots[`header-${column.key}`], { column, index })"
+                v-if="
+                  hasSlotContent($slots[`header-${column.key}`], {
+                    column,
+                    index,
+                  })
+                "
                 :name="`header-${column.key}`"
                 :column="column"
                 :index="index"
@@ -1305,7 +1336,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             </th>
           </tr>
 
-          <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
+          <ULoaderProgress :loading="progressLoading" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody
@@ -1356,6 +1387,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/config.ts b/src/ui.data-table/config.ts
index b62af9afe..2adfde3e0 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",
@@ -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..9dfd369ec 100644
--- a/src/ui.data-table/storybook/stories.ts
+++ b/src/ui.data-table/storybook/stories.ts
@@ -182,6 +182,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.ts b/src/ui.data-table/tests/UTable.test.ts
index f64aa32a5..936f638a1 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,
@@ -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/types.ts b/src/ui.data-table/types.ts
index 9e5c5a51f..d63314cea 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";
@@ -117,6 +116,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.
    */

From b423a9bc9e8dee4198f079d77e63b1bf0c6c06b8 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 25 Aug 2026 17:27:39 +0800
Subject: [PATCH 21/73] test: UModal & UDrawer: replace `sleep` function with
 async loops for improved test clarity

---
 src/ui.container-drawer/tests/UDrawer.test.ts | 27 +++++++------------
 src/ui.container-modal/tests/UModal.test.ts   | 27 +++++++------------
 2 files changed, 20 insertions(+), 34 deletions(-)

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

From 5ddb063f878cfa8824e96381452cc2c40895e076 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 25 Aug 2026 09:30:18 +0000
Subject: [PATCH 22/73] Release v1.4.12-beta.6 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cead1cd50..c4be0ea1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.5",
+  "version": "1.4.12-beta.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.5",
+      "version": "1.4.12-beta.6",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index aef1aace4..667629419 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.5",
+  "version": "1.4.12-beta.6",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 19d2119e84b3fc77f3338eed6a4dc8e9dcd9f904 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Tue, 25 Aug 2026 13:56:37 +0300
Subject: [PATCH 23/73] feat: UTabs: allow dragging the tab list when
 scrollable

Scrollable tabs could only move via arrow buttons, which is awkward on pointer devices. Add pointer drag-to-scroll and give UTab inject defaults so it still renders as active when used outside UTabs.
---
 src/ui.navigation-tab/UTab.vue              |  23 ++--
 src/ui.navigation-tab/tests/UTab.test.ts    |  14 +++
 src/ui.navigation-tabs/UTabs.vue            | 133 +++++++++++++++++++-
 src/ui.navigation-tabs/config.ts            |   3 +-
 src/ui.navigation-tabs/constants.ts         |   2 +
 src/ui.navigation-tabs/storybook/stories.ts |   7 ++
 src/ui.navigation-tabs/tests/UTabs.test.ts  |  96 ++++++++++++++
 src/ui.navigation-tabs/types.ts             |   2 +-
 8 files changed, 267 insertions(+), 13 deletions(-)

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..702872639 100644
--- a/src/ui.navigation-tabs/UTabs.vue
+++ b/src/ui.navigation-tabs/UTabs.vue
@@ -7,7 +7,7 @@ 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";
@@ -37,6 +37,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,6 +68,112 @@ 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();
+}
+
 onMounted(() => {
   if (scrollContainerRef.value) {
     scrollContainerRef.value.addEventListener("scroll", checkScroll, { passive: true });
@@ -68,6 +183,10 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  stopDragListeners();
+  resetDragState();
+  clearSuppressClickTimer();
+
   if (scrollContainerRef.value) {
     scrollContainerRef.value.removeEventListener("scroll", checkScroll);
   }
@@ -79,6 +198,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 +217,7 @@ const {
   config,
   wrapperAttrs,
   tabsAttrs,
+  dragAttrs,
   tabAttrs,
   prevAttrs,
   nextAttrs,
@@ -117,7 +238,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..c5b8159a5 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 scroll-smooth 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..16df87ef4 100644
--- a/src/ui.navigation-tabs/storybook/stories.ts
+++ b/src/ui.navigation-tabs/storybook/stories.ts
@@ -89,6 +89,13 @@ Scrollable.args = {
   options: getOptionsArray(),
   scrollable: true,
 };
+Scrollable.parameters = {
+  docs: {
+    description: {
+      story: "Scroll overflowing tabs with the arrow buttons or by dragging the tab list.",
+    },
+  },
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };
diff --git a/src/ui.navigation-tabs/tests/UTabs.test.ts b/src/ui.navigation-tabs/tests/UTabs.test.ts
index 8c8c303f7..7566794a1 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";
 
@@ -134,6 +135,101 @@ 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;
+        },
+      });
+
+      await tabsContainer.trigger("pointerdown", { clientX: 200, clientY: 0, button: 0 });
+
+      document.dispatchEvent(
+        new PointerEvent("pointermove", {
+          clientX: 120,
+          clientY: 0,
+          bubbles: true,
+          cancelable: true,
+          buttons: 1,
+          pointerType: "mouse",
+        }),
+      );
+
+      await nextTick();
+
+      expect(scrollLeft).toBe(80);
+      expect(tabsContainer.classes()).toContain("cursor-move");
+      expect(tabsContainer.classes()).toContain("icon-drag");
+
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+    });
+
+    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,
+      });
+
+      await tabsContainer.trigger("pointerdown", { clientX: 200, clientY: 0, button: 0 });
+
+      document.dispatchEvent(
+        new PointerEvent("pointermove", {
+          clientX: 120,
+          clientY: 0,
+          bubbles: true,
+          cancelable: true,
+          buttons: 1,
+          pointerType: "mouse",
+        }),
+      );
+
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+
+      await component.findAllComponents(UTab)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+
     it("Block – provides block value to tabs", () => {
       const block = true;
 
diff --git a/src/ui.navigation-tabs/types.ts b/src/ui.navigation-tabs/types.ts
index 1c242280f..9daf5cb5a 100644
--- a/src/ui.navigation-tabs/types.ts
+++ b/src/ui.navigation-tabs/types.ts
@@ -31,7 +31,7 @@ export interface Props {
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Make the Tabs scrollable.
+   * Make the Tabs scrollable via arrow buttons and by dragging the tab list.
    */
   scrollable?: boolean;
 

From b2102f3fa25efde6909cb806a2cdf8798bf89822 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Tue, 25 Aug 2026 14:02:20 +0300
Subject: [PATCH 24/73] refactor: simplify pointer event handling in UTabs
 tests

Replaced direct PointerEvent dispatch calls with a reusable dispatchPointer function to improve test readability and maintainability. This change streamlines the pointer event simulation for drag interactions in the UTabs component tests.
---
 src/ui.navigation-tabs/tests/UTabs.test.ts | 52 +++++++++++-----------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/ui.navigation-tabs/tests/UTabs.test.ts b/src/ui.navigation-tabs/tests/UTabs.test.ts
index 7566794a1..f46cd3f04 100644
--- a/src/ui.navigation-tabs/tests/UTabs.test.ts
+++ b/src/ui.navigation-tabs/tests/UTabs.test.ts
@@ -8,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[] = [
@@ -163,18 +182,8 @@ describe("UTabs.vue", () => {
         },
       });
 
-      await tabsContainer.trigger("pointerdown", { clientX: 200, clientY: 0, button: 0 });
-
-      document.dispatchEvent(
-        new PointerEvent("pointermove", {
-          clientX: 120,
-          clientY: 0,
-          bubbles: true,
-          cancelable: true,
-          buttons: 1,
-          pointerType: "mouse",
-        }),
-      );
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
 
       await nextTick();
 
@@ -182,7 +191,7 @@ describe("UTabs.vue", () => {
       expect(tabsContainer.classes()).toContain("cursor-move");
       expect(tabsContainer.classes()).toContain("icon-drag");
 
-      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      dispatchPointer(document, "pointerup", 120);
     });
 
     it("Scrollable – does not select a tab after a drag gesture", async () => {
@@ -210,20 +219,9 @@ describe("UTabs.vue", () => {
         value: 0,
       });
 
-      await tabsContainer.trigger("pointerdown", { clientX: 200, clientY: 0, button: 0 });
-
-      document.dispatchEvent(
-        new PointerEvent("pointermove", {
-          clientX: 120,
-          clientY: 0,
-          bubbles: true,
-          cancelable: true,
-          buttons: 1,
-          pointerType: "mouse",
-        }),
-      );
-
-      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+      dispatchPointer(document, "pointerup", 120);
 
       await component.findAllComponents(UTab)[1].trigger("click");
 

From 57257572da095af40119b9a087ad9ebda369fce2 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Wed, 26 Aug 2026 19:27:16 +0300
Subject: [PATCH 25/73] feat: UTabs: scroll the tab list with horizontal wheel

Scrollable tabs already moved via arrows and pointer drag, but a trackpad swipe or Shift+wheel did nothing. Apply native wheel deltaX (and Shift+wheel deltaY from vertical mice) so hovering the list scrolls it horizontally without stealing vertical page scroll.
---
 src/ui.navigation-tabs/UTabs.vue            |  21 ++++
 src/ui.navigation-tabs/config.ts            |   2 +-
 src/ui.navigation-tabs/storybook/stories.ts |   3 +-
 src/ui.navigation-tabs/tests/UTabs.test.ts  | 120 +++++++++++++++++++-
 src/ui.navigation-tabs/types.ts             |   2 +-
 5 files changed, 144 insertions(+), 4 deletions(-)

diff --git a/src/ui.navigation-tabs/UTabs.vue b/src/ui.navigation-tabs/UTabs.vue
index 702872639..81d5c3233 100644
--- a/src/ui.navigation-tabs/UTabs.vue
+++ b/src/ui.navigation-tabs/UTabs.vue
@@ -174,9 +174,29 @@ function onClickCapture(event: MouseEvent) {
   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();
   }
@@ -189,6 +209,7 @@ onUnmounted(() => {
 
   if (scrollContainerRef.value) {
     scrollContainerRef.value.removeEventListener("scroll", checkScroll);
+    scrollContainerRef.value.removeEventListener("wheel", onWheel);
   }
 });
 
diff --git a/src/ui.navigation-tabs/config.ts b/src/ui.navigation-tabs/config.ts
index c5b8159a5..23dcb94f0 100644
--- a/src/ui.navigation-tabs/config.ts
+++ b/src/ui.navigation-tabs/config.ts
@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: "flex border-b border-default w-full",
     variants: {
       scrollable: {
-        true: "overflow-hidden flex-nowrap scroll-smooth touch-pan-y select-none",
+        true: "overflow-hidden flex-nowrap touch-pan-y select-none",
       },
     },
   },
diff --git a/src/ui.navigation-tabs/storybook/stories.ts b/src/ui.navigation-tabs/storybook/stories.ts
index 16df87ef4..7937445a1 100644
--- a/src/ui.navigation-tabs/storybook/stories.ts
+++ b/src/ui.navigation-tabs/storybook/stories.ts
@@ -92,7 +92,8 @@ Scrollable.args = {
 Scrollable.parameters = {
   docs: {
     description: {
-      story: "Scroll overflowing tabs with the arrow buttons or by dragging the tab list.",
+      story:
+        "Scroll overflowing tabs with the arrow buttons, by dragging the tab list, or with horizontal wheel.",
     },
   },
 };
diff --git a/src/ui.navigation-tabs/tests/UTabs.test.ts b/src/ui.navigation-tabs/tests/UTabs.test.ts
index f46cd3f04..b11bc9af9 100644
--- a/src/ui.navigation-tabs/tests/UTabs.test.ts
+++ b/src/ui.navigation-tabs/tests/UTabs.test.ts
@@ -114,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 () => {
@@ -228,6 +228,124 @@ describe("UTabs.vue", () => {
       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/types.ts b/src/ui.navigation-tabs/types.ts
index 9daf5cb5a..ccf1fd699 100644
--- a/src/ui.navigation-tabs/types.ts
+++ b/src/ui.navigation-tabs/types.ts
@@ -31,7 +31,7 @@ export interface Props {
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Make the Tabs scrollable via arrow buttons and by dragging the tab list.
+   * Make the Tabs scrollable via arrow buttons, dragging, or horizontal wheel.
    */
   scrollable?: boolean;
 

From c43d98752dfb5385f4234eefb049eea039c40818 Mon Sep 17 00:00:00 2001
From: KinduD21 <KinduD21@users.noreply.github.com>
Date: Wed, 26 Aug 2026 16:51:47 +0000
Subject: [PATCH 26/73] Release v1.4.12-beta.7 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4be0ea1b..8762a4e2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.6",
+  "version": "1.4.12-beta.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.6",
+      "version": "1.4.12-beta.7",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 667629419..8a72dee15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.6",
+  "version": "1.4.12-beta.7",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From bc025ec5b9219159edaa66e985c8b1f9f9055e29 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Mon, 31 Aug 2026 23:27:01 +0800
Subject: [PATCH 27/73] feat: UTable: optimize render performance with per-row
 VNode memoization and stable row identity

---
 src/composables/useUI.ts     | 20 +++++++++-
 src/ui.data-table/UTable.vue | 75 +++++++++++++++++++++++++++++++++---
 2 files changed, 89 insertions(+), 6 deletions(-)

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/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 796e39f71..33e6d68cc 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -1064,7 +1064,7 @@ const {
   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,
@@ -1111,8 +1111,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,
@@ -1138,13 +1170,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>
@@ -1362,9 +1429,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

From 9af2cd96b634d2f4fc80e8f7d859a2077680bb70 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:29:25 +0000
Subject: [PATCH 28/73] Release v1.4.12-beta.8 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8762a4e2f..8b0c51068 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.7",
+  "version": "1.4.12-beta.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.7",
+      "version": "1.4.12-beta.8",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 8a72dee15..fdc1b11d1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.7",
+  "version": "1.4.12-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From a6d2986fe41ec8f49850150c9eeb83bd3240d8d2 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 1 Sep 2026 22:34:16 +0800
Subject: [PATCH 29/73] fix: UTable: ensure proper column handling by using
 key-based lookup fallback to index-based lookup

---
 src/ui.data-table/UTableRow.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

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`),
     },

From ac48270c0ff94a99b9b7d8a41331f9f27c3d2185 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 1 Sep 2026 14:36:53 +0000
Subject: [PATCH 30/73] Release v1.4.12-beta.9 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b0c51068..feed0d06e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.8",
+  "version": "1.4.12-beta.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.8",
+      "version": "1.4.12-beta.9",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index fdc1b11d1..c3eb550c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.8",
+  "version": "1.4.12-beta.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 624fa47c7d18c2254940b4dbcd16a70183ba3c97 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 1 Sep 2026 22:58:57 +0800
Subject: [PATCH 31/73] feat: UTable: add double-tap on row support for touch
 devices to trigger

---
 src/ui.data-table/UTable.vue | 45 ++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 33e6d68cc..7779a5f65 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -838,6 +838,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];
@@ -1411,6 +1455,7 @@ const BodyRows = () =>
           v-bind="bodyAttrs"
           @click="onBodyClick"
           @dblclick="onBodyDoubleClick"
+          @touchend="onBodyTouchEnd"
         >
           <tr
             v-if="hasBeforeFirstRowSlot"

From d4a724e777900dc4fec1c1992f94ca3f06acb045 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:01:29 +0000
Subject: [PATCH 32/73] Release v1.4.12-beta.10 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index feed0d06e..7ebeb4bcc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.9",
+  "version": "1.4.12-beta.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.9",
+      "version": "1.4.12-beta.10",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index c3eb550c9..40ff9ebc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.9",
+  "version": "1.4.12-beta.10",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 2a6a0acf96fee64a669c2d109b60be94d311021d Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 2 Sep 2026 17:46:47 +0800
Subject: [PATCH 33/73] feat: URadioGroup: add support for label-dependent
 spacing

---
 src/ui.form-radio-group/URadioGroup.vue |  9 ++++++++-
 src/ui.form-radio-group/config.ts       | 11 ++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/ui.form-radio-group/URadioGroup.vue b/src/ui.form-radio-group/URadioGroup.vue
index 55773bb5f..ca9ba8ba9 100644
--- a/src/ui.form-radio-group/URadioGroup.vue
+++ b/src/ui.form-radio-group/URadioGroup.vue
@@ -57,7 +57,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>
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",

From 59db5e17a0831b88eab15f72e62ea38bf63e3863 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Wed, 2 Sep 2026 09:50:00 +0000
Subject: [PATCH 34/73] Release v1.4.12-beta.11 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7ebeb4bcc..1a41a4a71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.10",
+  "version": "1.4.12-beta.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.10",
+      "version": "1.4.12-beta.11",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 40ff9ebc6..2787a3d83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.10",
+  "version": "1.4.12-beta.11",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 03e2083a28b3d54957edd919fa25dcfbd7e33c44 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sun, 6 Sep 2026 22:51:21 +0800
Subject: [PATCH 35/73] fix: USelect: always deactivate dropdown when
 `closeOnSelect` is true

---
 src/ui.form-select/USelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui.form-select/USelect.vue b/src/ui.form-select/USelect.vue
index 978ba63ac..97f940a2b 100644
--- a/src/ui.form-select/USelect.vue
+++ b/src/ui.form-select/USelect.vue
@@ -135,7 +135,7 @@ const dropdownValue = computed({
     emit("update:modelValue", value);
     emit("change", { value, options: props.options });
 
-    if (!props.multiple && props.closeOnSelect) deactivate();
+    if (props.closeOnSelect) deactivate();
   },
 });
 

From b8a55c956ef00b124e7504f844eba0e6949945c2 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Sun, 6 Sep 2026 14:53:47 +0000
Subject: [PATCH 36/73] Release v1.4.12-beta.12 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a41a4a71..f1aa4f374 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.11",
+  "version": "1.4.12-beta.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.11",
+      "version": "1.4.12-beta.12",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 2787a3d83..462e589c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.11",
+  "version": "1.4.12-beta.12",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From b708a1b6126f6f6c775bad44fe296fef9871a9af Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sun, 6 Sep 2026 23:13:04 +0800
Subject: [PATCH 37/73] fix: UListbox: ensure no outline is shown on search
 input focus

---
 src/ui.form-listbox/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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: {

From a124655c89dbb72262716a07f0d20b0b36a6a299 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Sun, 6 Sep 2026 15:15:30 +0000
Subject: [PATCH 38/73] Release v1.4.12-beta.13 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f1aa4f374..351f7887e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.12",
+  "version": "1.4.12-beta.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.12",
+      "version": "1.4.12-beta.13",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 462e589c2..b0556ef26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.12",
+  "version": "1.4.12-beta.13",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 75f14fbc3539def7af08b3bcd7b70dadb8399446 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Mon, 7 Sep 2026 12:23:50 +0800
Subject: [PATCH 39/73] fix: loaderIcon: update regex to correctly match
 PascalCase component names

---
 src/utils/node/loaderIcon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"));
 

From 31c4c2cb9023ec52891b18f87184c6d22ef638bd Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Mon, 7 Sep 2026 18:13:20 +0800
Subject: [PATCH 40/73] feat: UDataList: add `nestedKey` prop to enable empty
 drop-zone rendering for nesting

---
 src/ui.data-list/UDataList.vue           | 32 +++++++++++++----
 src/ui.data-list/tests/UDataList.test.ts | 46 ++++++++++++++++++++++++
 src/ui.data-list/types.ts                |  6 ++++
 3 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/src/ui.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
index 227c5beac..886ac2c93 100644
--- a/src/ui.data-list/UDataList.vue
+++ b/src/ui.data-list/UDataList.vue
@@ -42,6 +42,10 @@ function isCrossed(element: DataListItem) {
   return Boolean(element.crossed);
 }
 
+function hasNestedList(element: DataListItem) {
+  return Boolean(element.children?.length || (props.nestedKey && element[props.nestedKey]));
+}
+
 function onDragEnd() {
   const sortData = prepareSortData(props.list);
 
@@ -181,14 +185,33 @@ 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 #drag="slotProps: { item: DataListItem; iconName: string }">
+              <!--
+                @slot Use it to add something instead of the drag icon.
+                @binding {object} item
+                @binding {string} icon-name
+              -->
+              <slot name="drag" :item="slotProps.item" :icon-name="slotProps.iconName" />
+            </template>
+
             <!-- @vue-ignore -->
             <template #label="slotProps: { item: DataListItem; crossed: boolean }">
               <!--
@@ -196,12 +219,7 @@ const {
                 @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" :crossed="slotProps.crossed" />
             </template>
 
             <!-- @vue-ignore -->
diff --git a/src/ui.data-list/tests/UDataList.test.ts b/src/ui.data-list/tests/UDataList.test.ts
index d820900bf..1bcc7d6f4 100644
--- a/src/ui.data-list/tests/UDataList.test.ts
+++ b/src/ui.data-list/tests/UDataList.test.ts
@@ -253,6 +253,52 @@ 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: DataListItem = { value: 1, label: "Leaf", canNest: true, children: [] };
+      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 DataListItem[];
+      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/types.ts b/src/ui.data-list/types.ts
index 78f02fbdb..04e460721 100644
--- a/src/ui.data-list/types.ts
+++ b/src/ui.data-list/types.ts
@@ -70,6 +70,12 @@ export interface Props {
    */
   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.
    */

From 851f4cdfb570213d3916ca6b8028f8ffb7c706be Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Mon, 7 Sep 2026 10:15:10 +0000
Subject: [PATCH 41/73] Release v1.4.12-beta.14 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 351f7887e..274a88885 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.13",
+  "version": "1.4.12-beta.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.13",
+      "version": "1.4.12-beta.14",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index b0556ef26..58fac8b5d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.13",
+  "version": "1.4.12-beta.14",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From fa386dc6b95c81af3cac8d3c4b605aefdd573afe Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sun, 13 Sep 2026 13:05:23 +0800
Subject: [PATCH 42/73] fix: vTooltip: check for `props` existence before
 accessing its properties

---
 src/v.tooltip/vTooltip.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 || {}));
   }
 }

From 0c8dee46015d1aaa934fd8ff26ed43951b83b842 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Sun, 13 Sep 2026 23:25:32 +0800
Subject: [PATCH 43/73] fix: USwitch: prevent double toggles and improve
 keyboard and click handling logic

---
 src/ui.form-switch/USwitch.vue           |  25 ++--
 src/ui.form-switch/tests/USwitch.test.ts | 151 +++++++++++++++++++++++
 2 files changed, 164 insertions(+), 12 deletions(-)

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/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";

From 58d82fb0c5aac4e0c27b7597f55b67e9eb36fef0 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Sun, 13 Sep 2026 15:27:49 +0000
Subject: [PATCH 44/73] Release v1.4.12-beta.15 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 274a88885..48598f2c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.14",
+  "version": "1.4.12-beta.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.14",
+      "version": "1.4.12-beta.15",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 58fac8b5d..c217a9e3c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.14",
+  "version": "1.4.12-beta.15",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From aae69b43941e4755a70026da5384fa521aedd175 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 19:11:56 +0800
Subject: [PATCH 45/73] fix: USelect: adjust tabindex logic to handle `isOpen`
 state properly

---
 src/ui.form-select/USelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui.form-select/USelect.vue b/src/ui.form-select/USelect.vue
index 97f940a2b..d514269ab 100644
--- a/src/ui.form-select/USelect.vue
+++ b/src/ui.form-select/USelect.vue
@@ -556,7 +556,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"

From b49c9be7308658b1ac55f1bd05205bed68e3ff6a Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 19:12:03 +0800
Subject: [PATCH 46/73] test: USelect: add tests for search input blur and
 focus behavior

---
 src/ui.form-select/tests/USelect.test.ts | 57 ++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/ui.form-select/tests/USelect.test.ts b/src/ui.form-select/tests/USelect.test.ts
index bd99f677f..497c4b4fd 100644
--- a/src/ui.form-select/tests/USelect.test.ts
+++ b/src/ui.form-select/tests/USelect.test.ts
@@ -255,6 +255,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: {

From ef0524d6c4b4bd12f7f3ba9db619aa26f911d2ca Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 19:12:13 +0800
Subject: [PATCH 47/73] fix: UListbox: remove tabindex from add-option button
 to prevent unintended focus behavior

---
 src/ui.form-listbox/UListbox.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui.form-listbox/UListbox.vue b/src/ui.form-listbox/UListbox.vue
index 8bd58d7dc..42a5a41df 100644
--- a/src/ui.form-listbox/UListbox.vue
+++ b/src/ui.form-listbox/UListbox.vue
@@ -580,6 +580,7 @@ const {
         <UButton
           round
           square
+          tabindex="-1"
           v-bind="addOptionButtonAttrs"
           :data-test="getDataTest('add-button')"
           @click="onClickAddOption"

From da998bf567ba4df15a120623dfa9a9a769a9d743 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 19:12:22 +0800
Subject: [PATCH 48/73] fix: UDatePicker: deactivate picker on blur events
 outside component

---
 src/ui.form-date-picker/UDatePicker.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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)"

From e9e0a3e5594d924f8dd9b68021860f1d82b09041 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 19:12:31 +0800
Subject: [PATCH 49/73] test: UDatePicker: add tests for component focus and
 calendar visibility behaviors

---
 .../tests/UDatePicker.test.ts                 | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

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: {

From a4c5a85c91711729fc781ef1789883e15d686adb Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 15 Sep 2026 11:15:18 +0000
Subject: [PATCH 50/73] Release v1.4.12-beta.16 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48598f2c1..d80c207b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.15",
+  "version": "1.4.12-beta.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.15",
+      "version": "1.4.12-beta.16",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index c217a9e3c..70d206812 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.15",
+  "version": "1.4.12-beta.16",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From 648a444ac5aa3def7f12e62ebc4e34991327708c Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 23:26:27 +0800
Subject: [PATCH 51/73] fix: consistently set outline styles across components
 to avoid outline blink on loosing focus

---
 src/ui.button-link/config.ts           | 2 +-
 src/ui.button/config.ts                | 2 +-
 src/ui.container-collapsible/config.ts | 2 +-
 src/ui.dropdown-link/config.ts         | 2 +-
 src/ui.form-calendar/config.ts         | 2 +-
 src/ui.form-checkbox/config.ts         | 2 +-
 src/ui.form-input-file/config.ts       | 2 +-
 src/ui.form-input/config.ts            | 2 +-
 src/ui.form-radio/config.ts            | 2 +-
 src/ui.form-select/config.ts           | 2 +-
 src/ui.form-switch/config.ts           | 2 +-
 src/ui.form-textarea/config.ts         | 2 +-
 src/ui.text-badge/config.ts            | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

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/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-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.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.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/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-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/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-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/config.ts b/src/ui.form-select/config.ts
index 795b625a0..07a5c2759 100644
--- a/src/ui.form-select/config.ts
+++ b/src/ui.form-select/config.ts
@@ -12,7 +12,7 @@ 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
+      rounded-medium border border-solid border-default bg-default outline-solid outline-small 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
     `,
diff --git a/src/ui.form-switch/config.ts b/src/ui.form-switch/config.ts
index 999fc44ca..5e8686ca8 100644
--- a/src/ui.form-switch/config.ts
+++ b/src/ui.form-switch/config.ts
@@ -6,7 +6,7 @@ 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 rounded-full outline-solid outline-medium outline-transparent cursor-pointer transition focus-within:transition
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {
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.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: {

From f1768474960c0d8874ee8eb75e94eebf439f8fc9 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 15 Sep 2026 23:28:13 +0800
Subject: [PATCH 52/73] fix: USelect: clean up redundant transitions in
 form-select wrapper styles

---
 src/ui.form-select/config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui.form-select/config.ts b/src/ui.form-select/config.ts
index 07a5c2759..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
+      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:transition hover:focus-within:border-primary focus-within:border-primary
-      focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
+      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: {

From c1db0b46846782dd18f4670a4f496921c4ce7e1b Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 16 Sep 2026 09:10:53 +0800
Subject: [PATCH 53/73] chore: USwitch: clean up wrapper styles by rearranging
 outline and layout classes

---
 src/ui.form-switch/config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui.form-switch/config.ts b/src/ui.form-switch/config.ts
index 5e8686ca8..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-medium 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: {

From ef4d730c506ce32a135f81ccf3c3eb960f6530c9 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Wed, 16 Sep 2026 01:13:40 +0000
Subject: [PATCH 54/73] Release v1.4.12-beta.17 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d80c207b2..56732702c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.16",
+  "version": "1.4.12-beta.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.16",
+      "version": "1.4.12-beta.17",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 70d206812..389eff265 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.16",
+  "version": "1.4.12-beta.17",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From fdafa7d87919df3b31d74bf944518f8ba5fe7b05 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Mon, 21 Sep 2026 19:27:37 +0800
Subject: [PATCH 55/73] fix: USelect: decouple select options type from listbox
 Option

- Introduce `SelectOption` in ui.form-select/types.ts, composed from
  `BaseOption` plus any object shape, so only reserved option keys are
  type checked and arbitrary user data is allowed on options.
- Change the `options` prop of USelect to `SelectOption[]`, removing the
  hard dependency on the listbox `Option` type.
- Add a `listboxOptions` computed in USelect.vue that casts options to
  `Option[]` in a single place, and use it for `getCurrentOption` lookups
  and for the options passed down to the listbox.
---
 src/ui.form-select/USelect.vue | 10 +++++++---
 src/ui.form-select/types.ts    |  9 ++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/ui.form-select/USelect.vue b/src/ui.form-select/USelect.vue
index d514269ab..26817fb66 100644
--- a/src/ui.form-select/USelect.vue
+++ b/src/ui.form-select/USelect.vue
@@ -151,16 +151,20 @@ const isMultipleBadgeVariant = computed(
   () => props.multiple && props.multipleVariant === MULTIPLE_VARIANTS.badge,
 );
 
+const listboxOptions = computed(() => props.options as Option[]);
+
 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[])
     : [];
 });
@@ -858,7 +862,7 @@ const {
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
-        :options="options"
+        :options="listboxOptions"
         :disabled="disabled"
         :size="size"
         :debounce="debounce"
diff --git a/src/ui.form-select/types.ts b/src/ui.form-select/types.ts
index 6cf8bb16a..3505de531 100644
--- a/src/ui.form-select/types.ts
+++ b/src/ui.form-select/types.ts
@@ -1,10 +1,13 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
-import type { ComponentConfig } from "../types";
+import type { BaseOption } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type SelectOption = BaseOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Select value.
@@ -14,7 +17,7 @@ export interface Props {
   /**
    * Select options.
    */
-  options?: Option[];
+  options?: SelectOption[];
 
   /**
    * Select label.

From 02d457466dc6cf7e2d758469dde3c939339acbc5 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 22 Sep 2026 11:23:29 +0800
Subject: [PATCH 56/73] feat(types): export component props and data types from
 package entry

Expose the public TypeScript surface of the library so consumers can
annotate variables, wrappers and composables without reaching into
internal component folders.

- Re-export every component's `Props` type under a namespaced alias
  (`UButtonProps`, `UInputProps`, `UTableProps`, ...) in both
  `src/index.ts` and the `src/index.d.ts` declaration entry, keeping
  the runtime entry and its type declarations in sync.
- Re-export the shared data-model types used in component APIs:
  table `Row`/`Column`/`Cell` families, listbox `Option` types,
  `SelectOption`, tabs, breadcrumbs, toggle, accordion, data list,
  checkbox, chip and avatar item types.
- Group the new exports under `component props` and
  `component data types` sections for readability.
---
 src/index.d.ts                                | 102 ++++++++++++++++++
 src/index.ts                                  | 102 ++++++++++++++++++
 src/ui.button-toggle/types.ts                 |  10 +-
 src/ui.container-accordion/types.ts           |   7 +-
 src/ui.data-list/UDataList.vue                |   7 +-
 src/ui.data-list/tests/UDataList.test.ts      |   9 +-
 src/ui.data-list/types.ts                     |   8 +-
 src/ui.data-table/UTable.vue                  |   4 +-
 src/ui.data-table/types.ts                    |  25 +++--
 src/ui.dropdown-badge/types.ts                |   4 +-
 src/ui.dropdown-button/types.ts               |   4 +-
 src/ui.dropdown-link/types.ts                 |   4 +-
 src/ui.dropdown/UDropdown.vue                 |   7 +-
 src/ui.dropdown/types.ts                      |   4 +-
 src/ui.form-checkbox-group/UCheckboxGroup.vue |  10 +-
 src/ui.form-checkbox/tests/UCheckbox.test.ts  |   8 +-
 src/ui.form-checkbox/types.ts                 |   6 +-
 src/ui.form-listbox/UListbox.vue              |  13 ++-
 src/ui.form-listbox/types.ts                  |   5 +-
 src/ui.form-radio-group/URadioGroup.vue       |   9 +-
 src/ui.form-radio-group/types.ts              |   5 +-
 src/ui.image-avatar-group/types.ts            |   7 +-
 src/ui.image-avatar/types.ts                  |   7 +-
 src/ui.image-icon/UIcon.vue                   |   5 +-
 src/ui.image-icon/types.ts                    |   4 +-
 src/ui.navigation-breadcrumbs/types.ts        |   7 +-
 src/ui.navigation-tabs/types.ts               |   5 +-
 src/ui.skeleton-text/constants.ts             |   2 +-
 28 files changed, 327 insertions(+), 63 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index ef9896889..454664bce 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -108,6 +108,108 @@ 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,
+} from "./ui.data-table/types";
+export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
+export type { SelectOption } from "./ui.form-select/types";
+export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type { DataListItem, BaseDataListItem } 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..4f8c7e74e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -114,6 +114,108 @@ 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,
+} from "./ui.data-table/types";
+export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
+export type { SelectOption } from "./ui.form-select/types";
+export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type { DataListItem, BaseDataListItem } 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/ui.button-toggle/types.ts b/src/ui.button-toggle/types.ts
index 044790158..3c42063d8 100644
--- a/src/ui.button-toggle/types.ts
+++ b/src/ui.button-toggle/types.ts
@@ -1,20 +1,22 @@
 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;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UToggleOption = BaseToggleOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Selected value.
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.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
index 886ac2c93..3cd73df8a 100644
--- a/src/ui.data-list/UDataList.vue
+++ b/src/ui.data-list/UDataList.vue
@@ -13,6 +13,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
+import type { UnknownObject } from "../types";
 import type { Props, DataListItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -43,7 +44,9 @@ function isCrossed(element: DataListItem) {
 }
 
 function hasNestedList(element: DataListItem) {
-  return Boolean(element.children?.length || (props.nestedKey && element[props.nestedKey]));
+  return Boolean(
+    element.children?.length || (props.nestedKey && (element as UnknownObject)[props.nestedKey]),
+  );
 }
 
 function onDragEnd() {
@@ -61,7 +64,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));
diff --git a/src/ui.data-list/tests/UDataList.test.ts b/src/ui.data-list/tests/UDataList.test.ts
index 1bcc7d6f4..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 },
@@ -280,7 +280,7 @@ describe("UDataList.vue", () => {
     });
 
     it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
-      const leaf: DataListItem = { value: 1, label: "Leaf", canNest: true, children: [] };
+      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, {
@@ -293,7 +293,10 @@ describe("UDataList.vue", () => {
 
       await component.findComponent(draggable).vm.$emit("end");
 
-      const sortData = component.emitted("dragSort")?.[0]?.[0] as DataListItem[];
+      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);
diff --git a/src/ui.data-list/types.ts b/src/ui.data-list/types.ts
index 04e460721..f63434c06 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,13 +11,15 @@ 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[];
 }
 
+/* Any object shape is a valid item, only reserved item keys are type checked. */
+export type DataListItem = BaseDataListItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Data item options.
diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 7779a5f65..cf0d0ca32 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -212,7 +212,7 @@ 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;
@@ -532,7 +532,7 @@ onBeforeUnmount(() => {
 
 function onChangeSelectedRows() {
   if (!isEqual(props.selectedRows, localSelectedRows.value)) {
-    localSelectedRows.value = props.selectedRows;
+    localSelectedRows.value = props.selectedRows as Row[];
   }
 }
 
diff --git a/src/ui.data-table/types.ts b/src/ui.data-table/types.ts
index d63314cea..bb4250978 100644
--- a/src/ui.data-table/types.ts
+++ b/src/ui.data-table/types.ts
@@ -25,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;
@@ -58,7 +68,10 @@ 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;
 
 export interface Props {
   /**
@@ -69,12 +82,12 @@ export interface Props {
   /**
    * Table rows data.
    */
-  rows: Row[];
+  rows: TableRow[];
 
   /**
    * Selected rows.
    */
-  selectedRows?: Row[];
+  selectedRows?: TableRow[];
 
   /**
    * Selected rows id.
diff --git a/src/ui.dropdown-badge/types.ts b/src/ui.dropdown-badge/types.ts
index c24255e07..855f4e91d 100644
--- a/src/ui.dropdown-badge/types.ts
+++ b/src/ui.dropdown-badge/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown-button/types.ts b/src/ui.dropdown-button/types.ts
index 75119fe5f..15ee36ee8 100644
--- a/src/ui.dropdown-button/types.ts
+++ b/src/ui.dropdown-button/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown-link/types.ts b/src/ui.dropdown-link/types.ts
index c91bdba91..453070cae 100644
--- a/src/ui.dropdown-link/types.ts
+++ b/src/ui.dropdown-link/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.
diff --git a/src/ui.dropdown/UDropdown.vue b/src/ui.dropdown/UDropdown.vue
index 9a96912aa..be38444d7 100644
--- a/src/ui.dropdown/UDropdown.vue
+++ b/src/ui.dropdown/UDropdown.vue
@@ -83,9 +83,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,7 +99,7 @@ const selectedOptions = computed(() => {
   }
 
   return [
-    props.options.find(
+    localOptions.value.find(
       (option) => option[props.valueKey] && isEqual(option[props.valueKey], dropdownValue.value),
     ),
   ].filter((option) => !!option);
diff --git a/src/ui.dropdown/types.ts b/src/ui.dropdown/types.ts
index fe880301b..7c46560cd 100644
--- a/src/ui.dropdown/types.ts
+++ b/src/ui.dropdown/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.
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/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-listbox/UListbox.vue b/src/ui.form-listbox/UListbox.vue
index 42a5a41df..294ea8587 100644
--- a/src/ui.form-listbox/UListbox.vue
+++ b/src/ui.form-listbox/UListbox.vue
@@ -75,8 +75,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();
 
@@ -126,7 +129,7 @@ const getOptionAriaSelected = (option: Option) => {
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
-  let options = [...props.options];
+  let options = [...localOptions.value];
 
   options = props.groupValueKey
     ? filterGroups(
@@ -324,9 +327,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();
diff --git a/src/ui.form-listbox/types.ts b/src/ui.form-listbox/types.ts
index f4b9a4661..04a5bd5d6 100644
--- a/src/ui.form-listbox/types.ts
+++ b/src/ui.form-listbox/types.ts
@@ -16,6 +16,9 @@ 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 {
@@ -32,7 +35,7 @@ export interface Props {
   /**
    * List options.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * 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 ca9ba8ba9..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),
@@ -106,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/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.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-tabs/types.ts b/src/ui.navigation-tabs/types.ts
index ccf1fd699..3cf065af6 100644
--- a/src/ui.navigation-tabs/types.ts
+++ b/src/ui.navigation-tabs/types.ts
@@ -8,12 +8,15 @@ export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
 ) => void;
 
-export interface UTabsOption {
+export interface BaseTabOption {
   value: string | number;
   label: string;
   disabled?: boolean;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UTabsOption = BaseTabOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Selected tab value.
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";

From bda1ed32794fe7c93b6199e0de171a3386f30f90 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 22 Sep 2026 11:39:38 +0800
Subject: [PATCH 57/73] docs(README): update component count to 74 in key
 features

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 6d0ba17d8ae8dc494e4d773409a37abeed4da616 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 22 Sep 2026 03:41:55 +0000
Subject: [PATCH 58/73] Release v1.4.12-beta.18 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 56732702c..bd154ce0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.17",
+  "version": "1.4.12-beta.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.17",
+      "version": "1.4.12-beta.18",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index 389eff265..beb29d3fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.17",
+  "version": "1.4.12-beta.18",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From dbb8996135a73d9067e7a61f0cf63f373941daa1 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 11:20:18 +0800
Subject: [PATCH 59/73] fix: UTable: add generic types for rows and slot
 bindings

---
 src/index.d.ts                         |  5 +++
 src/index.ts                           |  5 +++
 src/ui.data-table/UTable.vue           | 18 ++++++---
 src/ui.data-table/storybook/stories.ts |  5 ++-
 src/ui.data-table/tests/UTable.test.ts |  2 +-
 src/ui.data-table/types.ts             | 52 ++++++++++++++++++++++++--
 6 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 454664bce..e8c689357 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -199,6 +199,11 @@ export type {
   TableColumn,
   DateDivider,
   BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
 } from "./ui.data-table/types";
 export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
 export type { SelectOption } from "./ui.form-select/types";
diff --git a/src/index.ts b/src/index.ts
index 4f8c7e74e..5cdacc7c5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -205,6 +205,11 @@ export type {
   TableColumn,
   DateDivider,
   BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
 } from "./ui.data-table/types";
 export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
 export type { SelectOption } from "./ui.form-select/types";
diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index cf0d0ca32..388516106 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">
 import {
   shallowRef,
   ref,
@@ -47,13 +47,16 @@ 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>>(), {
+  ...getDefaults<Props<TRow>, Config>(defaultConfig, COMPONENT_NAME),
   columns: () => [],
   rows: () => [],
   dateDivider: () => [],
@@ -112,6 +115,8 @@ const emit = defineEmits([
   "search",
 ]);
 
+defineSlots<UTableSlots<TRow>>();
+
 const slots = useSlots();
 
 const selectAll = ref(false);
@@ -208,6 +213,9 @@ const isCheckedMoreOneTableItems = computed(() => {
   return Boolean(localSelectedRows.value.length);
 });
 
+/* 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`,
 }));
@@ -1338,7 +1346,7 @@ const BodyRows = () =>
         @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="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
@@ -1370,7 +1378,7 @@ const BodyRows = () =>
         @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="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
diff --git a/src/ui.data-table/storybook/stories.ts b/src/ui.data-table/storybook/stories.ts
index 9dfd369ec..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";
diff --git a/src/ui.data-table/tests/UTable.test.ts b/src/ui.data-table/tests/UTable.test.ts
index 936f638a1..29cfc1847 100644
--- a/src/ui.data-table/tests/UTable.test.ts
+++ b/src/ui.data-table/tests/UTable.test.ts
@@ -78,7 +78,7 @@ describe("UTable.vue", () => {
 
   function mountUTable(props: Props, options = {}) {
     return mount(UTable, {
-      props,
+      props: { ...props },
       global: getGlobalOptions(),
       ...options,
     });
diff --git a/src/ui.data-table/types.ts b/src/ui.data-table/types.ts
index bb4250978..13b428359 100644
--- a/src/ui.data-table/types.ts
+++ b/src/ui.data-table/types.ts
@@ -73,7 +73,7 @@ export type TableColumn = ColumnObject & (object | UnknownObject);
 
 export type Column = TableColumn | string;
 
-export interface Props {
+export interface Props<TRow extends TableRow = TableRow> {
   /**
    * Table columns (headers).
    */
@@ -82,12 +82,12 @@ export interface Props {
   /**
    * Table rows data.
    */
-  rows: TableRow[];
+  rows: TRow[];
 
   /**
    * Selected rows.
    */
-  selectedRows?: TableRow[];
+  selectedRows?: TRow[];
 
   /**
    * Selected rows id.
@@ -190,6 +190,52 @@ 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;
+}
+
+export type UTableDynamicSlots<TRow extends TableRow = TableRow> = {
+  [K in `cell-${string}`]?: (props: {
+    value: Cell;
+    row: SlotRow<TRow>;
+    index: number;
+    cellIndex: number;
+  }) => unknown;
+} & {
+  [K in `header-${string}`]?: (props: { column: ColumnObject; index: number }) => unknown;
+};
+
+export type UTableSlots<TRow extends TableRow = TableRow> = UTableStaticSlots<TRow> &
+  UTableDynamicSlots<TRow>;
+
 export interface UTableRowAttrs {
   bodyCellContentAttrs: Ref<UnknownObject>;
   bodyCellCheckboxAttrs: Ref<UnknownObject>;

From b2af116161ca397d90dfe1cb9c44d4aa8d4f9f0e Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:49:15 +0800
Subject: [PATCH 60/73] fix: UDataList: add generics for enhanced type safety
 in props and slots

- Introduced generic types to `UDataList` for better slot prop inference.
- Updated `Props` and slot bindings to utilize `TItem` for type flexibility.
- Added `SlotItem` and `UDataListSlots` for refined slot type definitions.
- Included type-level and runtime tests to validate `UDataList` generics functionality.
---
 src/ui.data-list/UDataList.vue             |  36 ++++---
 src/ui.data-list/storybook/stories.ts      |   5 +-
 src/ui.data-list/tests/UDataList.test-d.ts |  76 ++++++++++++++
 src/ui.data-list/tests/UDataListTypes.vue  | 110 +++++++++++++++++++++
 src/ui.data-list/types.ts                  |  28 +++++-
 5 files changed, 239 insertions(+), 16 deletions(-)
 create mode 100644 src/ui.data-list/tests/UDataList.test-d.ts
 create mode 100644 src/ui.data-list/tests/UDataListTypes.vue

diff --git a/src/ui.data-list/UDataList.vue b/src/ui.data-list/UDataList.vue
index 3cd73df8a..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";
 
@@ -14,15 +14,17 @@ import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import type { UnknownObject } from "../types";
-import type { Props, DataListItem, Config } 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).
@@ -205,33 +207,41 @@ const {
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
-            <!-- @vue-ignore -->
-            <template #drag="slotProps: { item: DataListItem; iconName: string }">
+            <!-- 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" :icon-name="slotProps.iconName" />
+              <slot
+                name="drag"
+                :item="slotProps.item as SlotItem<TItem>"
+                :icon-name="slotProps.iconName"
+              />
             </template>
 
-            <!-- @vue-ignore -->
-            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
+            <template #label="slotProps">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed" />
+              <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/storybook/stories.ts b/src/ui.data-list/storybook/stories.ts
index 99e56e462..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";
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/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 f63434c06..c555aa8aa 100644
--- a/src/ui.data-list/types.ts
+++ b/src/ui.data-list/types.ts
@@ -20,11 +20,35 @@ export interface BaseDataListItem {
 /* Any object shape is a valid item, only reserved item keys are type checked. */
 export type DataListItem = BaseDataListItem & (object | UnknownObject);
 
-export interface Props {
+/* 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.

From 6b4a65e74576bdfeca9cab45a062ff9f171a98d4 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:49:28 +0800
Subject: [PATCH 61/73] fix: UTable: enhance slot type safety with
 column-specific generics

- Introduced `TCol` generic to `UTable` for narrowing column keys in slot bindings.
- Updated `Props` and slot definitions to leverage `KeyedColumn` for stricter type checks.
- Added runtime and type-level regression tests to ensure compatibility and flexibility with dynamic and empty columns.
---
 src/ui.data-table/UTable.vue                  |  19 +-
 src/ui.data-table/config.ts                   |   2 +-
 src/ui.data-table/tests/UTable.test-d.ts      | 179 ++++++++++++++++
 .../tests/UTableEmptyColumnsTypes.vue         |  27 +++
 src/ui.data-table/tests/UTableTypes.vue       | 193 ++++++++++++++++++
 src/ui.data-table/types.ts                    |  38 +++-
 src/ui.data-table/utilTable.ts                |   2 +-
 7 files changed, 444 insertions(+), 16 deletions(-)
 create mode 100644 src/ui.data-table/tests/UTable.test-d.ts
 create mode 100644 src/ui.data-table/tests/UTableEmptyColumnsTypes.vue
 create mode 100644 src/ui.data-table/tests/UTableTypes.vue

diff --git a/src/ui.data-table/UTable.vue b/src/ui.data-table/UTable.vue
index 388516106..b1ff2ac70 100644
--- a/src/ui.data-table/UTable.vue
+++ b/src/ui.data-table/UTable.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="TRow extends TableRow">
+<script setup lang="ts" generic="TRow extends TableRow, TCol extends string = string">
 import {
   shallowRef,
   ref,
@@ -55,8 +55,8 @@ import type {
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props<TRow>>(), {
-  ...getDefaults<Props<TRow>, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TRow, TCol>>(), {
+  ...getDefaults<Props<TRow, TCol>, Config>(defaultConfig, COMPONENT_NAME),
   columns: () => [],
   rows: () => [],
   dateDivider: () => [],
@@ -115,7 +115,7 @@ const emit = defineEmits([
   "search",
 ]);
 
-defineSlots<UTableSlots<TRow>>();
+defineSlots<UTableSlots<TRow, TCol>>();
 
 const slots = useSlots();
 
@@ -150,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);
@@ -176,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);
 });
@@ -1308,7 +1313,7 @@ const BodyRows = () =>
             @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>
@@ -1444,7 +1449,7 @@ const BodyRows = () =>
                     index,
                   })
                 "
-                :name="`header-${column.key}`"
+                :name="headerSlotName(column.key)"
                 :column="column"
                 :index="index"
               />
diff --git a/src/ui.data-table/config.ts b/src/ui.data-table/config.ts
index 2adfde3e0..237ae2f36 100644
--- a/src/ui.data-table/config.ts
+++ b/src/ui.data-table/config.ts
@@ -45,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",
       },
     },
   },
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/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 13b428359..dda15c897 100644
--- a/src/ui.data-table/types.ts
+++ b/src/ui.data-table/types.ts
@@ -73,11 +73,15 @@ export type TableColumn = ColumnObject & (object | UnknownObject);
 
 export type Column = TableColumn | string;
 
-export interface Props<TRow extends TableRow = TableRow> {
+/* 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<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.
@@ -222,19 +226,39 @@ export interface UTableStaticSlots<TRow extends TableRow = TableRow> {
   "nested-row"?: (props: { index: number; row: SlotRow<TRow>; nestedLevel: number }) => unknown;
 }
 
-export type UTableDynamicSlots<TRow extends TableRow = TableRow> = {
-  [K in `cell-${string}`]?: (props: {
+/**
+ * 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-${string}`]?: (props: { column: ColumnObject; index: number }) => unknown;
+  [K in `header-${SlotKeySuffix<TCol>}`]?: (props: {
+    column: ColumnObject;
+    index: number;
+  }) => unknown;
 };
 
-export type UTableSlots<TRow extends TableRow = TableRow> = UTableStaticSlots<TRow> &
-  UTableDynamicSlots<TRow>;
+export type UTableSlots<
+  TRow extends TableRow = TableRow,
+  TCol extends string = string,
+> = UTableStaticSlots<TRow> & UTableDynamicSlots<TRow, TCol>;
 
 export interface UTableRowAttrs {
   bodyCellContentAttrs: 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,
   );

From 7ff7527d1d8a10e637b71e4a0f192a8924e6249e Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:50:21 +0800
Subject: [PATCH 62/73] fix: UListbox: add generics for enhanced type safety in
 props and slots

- Introduced `TOption` generic for `UListbox` to improve slot prop inference.
- Updated `Props` and slot definitions to utilize `SlotOption` and `UListboxSlots` for stricter type requirements.
- Implemented runtime and type-level regression tests to validate generic functionality.
- Enhanced `filterGroups` and slot binding logic to correctly handle flattened group options.
- Added Storybook tests to confirm compatibility with dynamic and typed options.
---
 src/ui.form-listbox/UListbox.vue             |  27 +++--
 src/ui.form-listbox/storybook/stories.ts     |   5 +-
 src/ui.form-listbox/tests/UListbox.test-d.ts |  63 +++++++++++
 src/ui.form-listbox/tests/UListboxTypes.vue  | 107 +++++++++++++++++++
 src/ui.form-listbox/types.ts                 |  33 +++++-
 5 files changed, 225 insertions(+), 10 deletions(-)
 create mode 100644 src/ui.form-listbox/tests/UListbox.test-d.ts
 create mode 100644 src/ui.form-listbox/tests/UListboxTypes.vue

diff --git a/src/ui.form-listbox/UListbox.vue b/src/ui.form-listbox/UListbox.vue
index 294ea8587..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");
@@ -126,6 +136,9 @@ 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();
 
@@ -499,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"
@@ -523,7 +536,7 @@ const {
           -->
           <slot
             name="after-option"
-            :option="option"
+            :option="getSlotOption(option)"
             :selected="isSelectedOption(option)"
             :index="index"
           >
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 04a5bd5d6..370c1412f 100644
--- a/src/ui.form-listbox/types.ts
+++ b/src/ui.form-listbox/types.ts
@@ -21,7 +21,36 @@ 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.
    */
@@ -35,7 +64,7 @@ export interface Props {
   /**
    * List options.
    */
-  options?: ListboxOption[];
+  options?: TOption[];
 
   /**
    * Shows input to search value in a list.

From 4905acd69089cf8195a313156639027528b83e24 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:50:48 +0800
Subject: [PATCH 63/73] chore: eslint: add custom rule config for type tests in
 vueless

---
 eslint.config.ts | 7 +++++++
 1 file changed, 7 insertions(+)

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.*"],

From 9bf77dc06e0e2464e107774b7e847c31032404fb Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:53:01 +0800
Subject: [PATCH 64/73] feat: types: expand type exports for enhanced slot and
 prop compatibility

- Re-export additional slot and prop types for Listbox, Select, Dropdown, Tabs, Toggle, and DataList components.
- Add `UListboxSlots`, `USelectSlots`, `UDropdownSlots`, `UTabsSlots`, `UToggleSlots`, `UDataListSlots`, and other related types to the package entry.
---
 src/index.d.ts | 31 ++++++++++++++++++++++++++-----
 src/index.ts   | 31 ++++++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index e8c689357..4f9fa1fd9 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -205,13 +205,34 @@ export type {
   UTableStaticSlots,
   UTableDynamicSlots,
 } from "./ui.data-table/types";
-export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
-export type { SelectOption } from "./ui.form-select/types";
-export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/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 } from "./ui.button-toggle/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
 export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
-export type { DataListItem, BaseDataListItem } from "./ui.data-list/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";
diff --git a/src/index.ts b/src/index.ts
index 5cdacc7c5..645a5344a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -211,13 +211,34 @@ export type {
   UTableStaticSlots,
   UTableDynamicSlots,
 } from "./ui.data-table/types";
-export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
-export type { SelectOption } from "./ui.form-select/types";
-export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/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 } from "./ui.button-toggle/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
 export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
-export type { DataListItem, BaseDataListItem } from "./ui.data-list/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";

From 23372d363a47c285eda9711150d61406248086fc Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:53:27 +0800
Subject: [PATCH 65/73] fix: UToggle: add generics for enhanced type safety in
 props and slots

- Introduced `TItem` generic to `UToggle` for improved slot prop inference.
- Updated `Props` and slot definitions to use `UToggleSlots` for stricter type checking.
- Implemented dedicated type-level tests and fixtures to validate generic functionality and slot typings.
- Adjusted Storybook imports and setup for consistency with new generic types.
---
 src/ui.button-toggle/UToggle.vue             | 10 ++--
 src/ui.button-toggle/storybook/stories.ts    |  5 +-
 src/ui.button-toggle/tests/UToggle.test-d.ts | 48 +++++++++++++++++
 src/ui.button-toggle/tests/UToggleTypes.vue  | 55 ++++++++++++++++++++
 src/ui.button-toggle/types.ts                | 14 ++++-
 5 files changed, 125 insertions(+), 7 deletions(-)
 create mode 100644 src/ui.button-toggle/tests/UToggle.test-d.ts
 create mode 100644 src/ui.button-toggle/tests/UToggleTypes.vue

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 3c42063d8..8dc8e7723 100644
--- a/src/ui.button-toggle/types.ts
+++ b/src/ui.button-toggle/types.ts
@@ -17,7 +17,17 @@ export interface BaseToggleOption {
 /* Any object shape is a valid option, only reserved option keys are type checked. */
 export type UToggleOption = BaseToggleOption & (object | UnknownObject);
 
-export interface Props {
+/**
+ * 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.
    */
@@ -26,7 +36,7 @@ export interface Props {
   /**
    * Toggle item options.
    */
-  options?: UToggleOption[];
+  options?: TItem[];
 
   /**
    * Toggle size.

From 137c73e7afd8fcfcfceab51413412f5d3da41b95 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:53:54 +0800
Subject: [PATCH 66/73] fix: UDropdown: add generics for enhanced type safety
 in props and slots

- Introduced `TOption` generic to `UDropdown` for improved slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `UDropdownSlots` for stricter type checking and compatibility.
- Implemented dedicated type-level tests and fixtures to validate slot and prop typings.
- Adjusted Storybook and test setup to handle generic SFC typings consistently.
- Improved handling of selected options and group flattening in line with `UListbox` behavior.
---
 src/ui.dropdown/UDropdown.vue             |  20 ++--
 src/ui.dropdown/storybook/stories.ts      |   5 +-
 src/ui.dropdown/tests/UDropdown.test-d.ts |  61 ++++++++++++
 src/ui.dropdown/tests/UDropdown.test.ts   |   9 +-
 src/ui.dropdown/tests/UDropdownTypes.vue  | 111 ++++++++++++++++++++++
 src/ui.dropdown/types.ts                  |  30 +++++-
 6 files changed, 225 insertions(+), 11 deletions(-)
 create mode 100644 src/ui.dropdown/tests/UDropdown.test-d.ts
 create mode 100644 src/ui.dropdown/tests/UDropdownTypes.vue

diff --git a/src/ui.dropdown/UDropdown.vue b/src/ui.dropdown/UDropdown.vue
index be38444d7..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);
@@ -105,6 +109,10 @@ const selectedOptions = computed(() => {
   ].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;
@@ -256,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 7c46560cd..3c22db329 100644
--- a/src/ui.dropdown/types.ts
+++ b/src/ui.dropdown/types.ts
@@ -1,11 +1,35 @@
 import defaultConfig from "./config";
 
-import type { ListboxOption } 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?: ListboxOption[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

From 3cec4fdcdf0e7309958fff41f2302af5a0397bb1 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:54:24 +0800
Subject: [PATCH 67/73] fix: UDropdownBadge: add generics for enhanced type
 safety in props and slots

- Introduced `TOption` generic to `UDropdownBadge` for refined slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `SlotOption` and `UDropdownBadgeSlots` for stricter type checking.
- Implemented type-level tests and fixtures to validate generic behavior, slot typings, and prop typings.
- Updated Storybook and test setup to handle generic SFCs consistently.
---
 src/ui.dropdown-badge/UDropdownBadge.vue      |  13 ++-
 src/ui.dropdown-badge/storybook/stories.ts    |   7 +-
 .../tests/UDropdownBadge.test-d.ts            |  55 +++++++++
 .../tests/UDropdownBadge.test.ts              |   9 +-
 .../tests/UDropdownBadgeTypes.vue             | 107 ++++++++++++++++++
 src/ui.dropdown-badge/types.ts                |  20 +++-
 6 files changed, 202 insertions(+), 9 deletions(-)
 create mode 100644 src/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts
 create mode 100644 src/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue

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 855f4e91d..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 { ListboxOption } 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?: ListboxOption[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

From 24478acf69bfb5cb14b41da131bd74e176c18589 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:54:43 +0800
Subject: [PATCH 68/73] fix: UDropdownButton: add generics for enhanced type
 safety in props and slots

- Introduced `TOption` generic to `UDropdownButton` for improved slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `SlotOption` and `UDropdownButtonSlots` for stricter type checking and compatibility.
- Added type-level tests and fixtures to validate slot and prop typings, including forwarded option shape and group flattening behavior.
- Adjusted Storybook and test setup for consistent handling of generic SFCs.
---
 src/ui.dropdown-button/UDropdownButton.vue    |  13 ++-
 src/ui.dropdown-button/storybook/stories.ts   |   7 +-
 .../tests/UDropdownButton.test-d.ts           |  57 ++++++++++
 .../tests/UDropdownButton.test.ts             |   9 +-
 .../tests/UDropdownButtonTypes.vue            | 107 ++++++++++++++++++
 src/ui.dropdown-button/types.ts               |  20 +++-
 6 files changed, 204 insertions(+), 9 deletions(-)
 create mode 100644 src/ui.dropdown-button/tests/UDropdownButton.test-d.ts
 create mode 100644 src/ui.dropdown-button/tests/UDropdownButtonTypes.vue

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 15ee36ee8..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 { ListboxOption } 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?: ListboxOption[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

From c37672c9e2b70ac53f8531803bdd2b1ea8b9c6d1 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:54:52 +0800
Subject: [PATCH 69/73] fix: UDropdownLink: add generics for enhanced type
 safety in props and slots

- Introduced `TOption` generic to `UDropdownLink` for improved slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `SlotOption` and `UDropdownLinkSlots` for stricter type checking and compatibility.
- Added type-level tests and fixtures to validate slot and prop typings, including forwarded option shape and group flattening behavior.
- Adjusted Storybook and test setup for consistent handling of generic SFCs.
---
 src/ui.dropdown-link/UDropdownLink.vue        |  13 ++-
 src/ui.dropdown-link/storybook/stories.ts     |   5 +-
 .../tests/UDropdownLink.test-d.ts             |  55 +++++++++
 .../tests/UDropdownLink.test.ts               |   9 +-
 .../tests/UDropdownLinkTypes.vue              | 107 ++++++++++++++++++
 src/ui.dropdown-link/types.ts                 |  20 +++-
 6 files changed, 200 insertions(+), 9 deletions(-)
 create mode 100644 src/ui.dropdown-link/tests/UDropdownLink.test-d.ts
 create mode 100644 src/ui.dropdown-link/tests/UDropdownLinkTypes.vue

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/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 453070cae..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 { ListboxOption } 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?: ListboxOption[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

From 1bdba108d9a298c043fa2cf53275e9254880620f Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:55:06 +0800
Subject: [PATCH 70/73] fix: USelect: add generics for enhanced type safety in
 props and slots

- Introduced `TOption` generic to `USelect` for improved slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `SlotOption` and `USelectSlots` for stricter type checking and compatibility.
- Added type-level tests, fixtures, and runtime tests to validate generic behavior, slot typings, and prop typings.
- Adjusted Storybook and test setup for consistent handling of generic SFCs.
- Enhanced handling of selected options and group flattening in line with `UListbox` behavior.
---
 src/ui.form-select/USelect.vue             |  54 +++++++---
 src/ui.form-select/storybook/stories.ts    |   5 +-
 src/ui.form-select/tests/USelect.test-d.ts |  76 ++++++++++++++
 src/ui.form-select/tests/USelect.test.ts   |   9 +-
 src/ui.form-select/tests/USelectTypes.vue  | 113 +++++++++++++++++++++
 src/ui.form-select/types.ts                |  54 +++++++++-
 6 files changed, 293 insertions(+), 18 deletions(-)
 create mode 100644 src/ui.form-select/tests/USelect.test-d.ts
 create mode 100644 src/ui.form-select/tests/USelectTypes.vue

diff --git a/src/ui.form-select/USelect.vue b/src/ui.form-select/USelect.vue
index 26817fb66..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");
@@ -151,8 +157,12 @@ 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];
@@ -183,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(", "),
@@ -593,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>
@@ -673,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.
@@ -685,7 +713,7 @@ const {
                 name="selected-option"
                 :label="selectedOption[labelKey]"
                 :value="selectedOption[valueKey]"
-                :option="localValue"
+                :option="slotSelectedOption"
               >
                 <div
                   :title="(selectedOption[labelKey] || '') as string"
@@ -709,7 +737,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{
                         option[labelKey] +
@@ -750,7 +778,7 @@ const {
                         name="selected-option"
                         :label="option[labelKey]"
                         :value="option[valueKey]"
-                        :option="option"
+                        :option="slotVisibleOptions[index]"
                       >
                         {{ option[labelKey] }}
                       </slot>
@@ -803,7 +831,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{ option[labelKey] }}
                     </slot>
@@ -862,7 +890,7 @@ const {
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
-        :options="listboxOptions"
+        :options="typedListboxOptions"
         :disabled="disabled"
         :size="size"
         :debounce="debounce"
@@ -930,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/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 497c4b4fd..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" },
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 3505de531..2ee939ef2 100644
--- a/src/ui.form-select/types.ts
+++ b/src/ui.form-select/types.ts
@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { BaseOption } from "../ui.form-listbox/types";
+import type { BaseOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -8,7 +8,55 @@ export type Config = typeof defaultConfig;
 /* Any object shape is a valid option, only reserved option keys are type checked. */
 export type SelectOption = BaseOption & (object | UnknownObject);
 
-export interface Props {
+/**
+ * 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.
    */
@@ -17,7 +65,7 @@ export interface Props {
   /**
    * Select options.
    */
-  options?: SelectOption[];
+  options?: TOption[];
 
   /**
    * Select label.

From 21f0149331802a51917f70567618f02590fc92f5 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Wed, 23 Sep 2026 16:55:41 +0800
Subject: [PATCH 71/73] fix: UTabs: add generics for enhanced type safety in
 props and slots

- Introduced `TItem` generic to `UTabs` for improved slot prop inference and flexible option typing.
- Updated `Props` and slot definitions to leverage `UTabsSlots` for stricter type checking and compatibility.
- Added type-level tests and fixtures to validate generic behavior and slot typings.
- Adjusted Storybook and test setup for consistent handling of generic SFCs.
---
 src/ui.navigation-tabs/UTabs.vue             | 10 +--
 src/ui.navigation-tabs/storybook/stories.ts  |  5 +-
 src/ui.navigation-tabs/tests/UTabs.test-d.ts | 50 +++++++++++++++
 src/ui.navigation-tabs/tests/UTabsTypes.vue  | 65 ++++++++++++++++++++
 src/ui.navigation-tabs/types.ts              | 23 ++++++-
 5 files changed, 146 insertions(+), 7 deletions(-)
 create mode 100644 src/ui.navigation-tabs/tests/UTabs.test-d.ts
 create mode 100644 src/ui.navigation-tabs/tests/UTabsTypes.vue

diff --git a/src/ui.navigation-tabs/UTabs.vue b/src/ui.navigation-tabs/UTabs.vue
index 81d5c3233..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";
@@ -10,16 +10,18 @@ import UButton from "../ui.button/UButton.vue";
 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.
diff --git a/src/ui.navigation-tabs/storybook/stories.ts b/src/ui.navigation-tabs/storybook/stories.ts
index 7937445a1..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";
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/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 3cf065af6..bc27accba 100644
--- a/src/ui.navigation-tabs/types.ts
+++ b/src/ui.navigation-tabs/types.ts
@@ -17,7 +17,26 @@ export interface BaseTabOption {
 /* Any object shape is a valid option, only reserved option keys are type checked. */
 export type UTabsOption = BaseTabOption & (object | UnknownObject);
 
-export interface Props {
+/**
+ * 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.
    */
@@ -26,7 +45,7 @@ export interface Props {
   /**
    * Tab options.
    */
-  options?: UTabsOption[];
+  options?: TItem[];
 
   /**
    * Tabs size.

From a021a5a8c8e3a997e30e9f6c919c6c1010b162dd Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Wed, 23 Sep 2026 08:57:51 +0000
Subject: [PATCH 72/73] Release v1.4.12-beta.19 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bd154ce0b..0995c2f17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.18",
+  "version": "1.4.12-beta.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.18",
+      "version": "1.4.12-beta.19",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index beb29d3fa..c86820756 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.18",
+  "version": "1.4.12-beta.19",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

From d7fa585841c9f33a941c6e28deceac585cb9dcc7 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Wed, 23 Sep 2026 09:19:29 +0000
Subject: [PATCH 73/73] Release v1.4.12-beta.20 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 381a68843..b8628772a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.19",
+  "version": "1.4.12-beta.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "1.4.12-beta.19",
+      "version": "1.4.12-beta.20",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.4",
diff --git a/package.json b/package.json
index e8351e2eb..e8a13da35 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.19",
+  "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",