vlite3 0.5.2 → 0.5.4

package/README.md

@@ -14,6 +14,10 @@ yarn add vlite3
 
 ```
 
+## Demo
+
+[Live Demo](https://vlite3.vercel.app/)
+
 ## 2. Tailwind CSS Setup (Tailwind v4)
 
 `vite.config.ts`
@@ -24,7 +28,6 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [vue(), tailwindcss()],
 })
-
 ```
 
 `style.css`
@@ -35,7 +38,6 @@ export default defineConfig({
 
 @import 'vlite3/style.css';
 @source "../node_modules/vlite3";
-
 ```
 
 ## 3. Usage
@@ -53,7 +55,6 @@ import { Button, Input } from 'vlite3'
     <Input placeholder="Type here..." />
   </div>
 </template>
-
 ```
 
 ## Global Configuration (Registry System)
@@ -117,21 +118,20 @@ const vlite = createVLite({
       return data.url // MUST return the file URL string
     },
   },
-  
+
   // Global UI Components Configuration
   components: {
     form: {
       variant: 'outline', // Applies 'outline' globally to all Form inputs ('solid' | 'outline' | 'floating' | etc.)
-      size: 'md',         // Global size for form inputs ('sm' | 'md' | 'lg')
-      rounded: 'md',      // Global border radius for forms
+      size: 'md', // Global size for form inputs ('sm' | 'md' | 'lg')
+      rounded: 'md', // Global border radius for forms
       showRequiredAsterisk: true, // Globally toggle the visibility of the required asterisk
-    }
-  }
+    },
+  },
 })
 
 app.use(vlite)
 app.mount('#app')
-
 ```
 
 ### How it works
@@ -184,11 +184,10 @@ const handleSubmit = (payload) => {
 <template>
   <div class="">
     <Form :schema="schema" @onSubmit="handleSubmit" />
-    
+
     <Form :schema="schema" variant="solid" size="lg" @onSubmit="handleSubmit" />
   </div>
 </template>
-
 ```
 
 # 🎨 Theming & Customization
@@ -203,23 +202,23 @@ All colors are defined as CSS variables, allowing you to customize the appearanc
 
 Override these variables in `:root` or within a `.dark` class (when using class-based dark mode) to adjust your theme.
 
-| Variable | Utility Class | Description | Recommended Usage |
-| --- | --- | --- | --- |
-| `--color-background` | `bg-background` | Default page background (white) | Main application background |
-| `--color-foreground` | `text-foreground` | Default text color (gray-900) | Primary content text |
-| `--color-card` | `bg-card` | Card background (gray-100) | Cards, containers, surfaces, panels, dialogs |
-| `--color-primary` | `bg-primary` | Primary brand color (blue) | Main actions, buttons, active states |
-| `--color-primary-foreground` | `text-primary-foreground` | Text on primary background (white) | Text/icons displayed on primary elements |
-| `--color-secondary` | `bg-secondary` | Secondary background (gray-200) | Secondary actions, muted sections |
-| `--color-secondary-foreground` | `text-secondary-foreground` | Text on secondary background (gray-900) | Content displayed on secondary elements |
-| `--color-muted` | `bg-muted` | Muted background (gray-150) | Subtle surfaces, table headers, disabled states |
-| `--color-muted` | `text-muted` | Muted text (gray-600) | Secondary text, inactive links, descriptions |
-| `--color-accent` | `bg-accent` | Accent background (gray-150) | Hover states, selection highlights |
-| `--color-accent-foreground` | `text-accent-foreground` | Text on accent background (gray-900) | Content displayed on accent elements |
-| `--color-destructive` | `bg-destructive` | Destructive color (red) | Errors, warnings, destructive actions |
-| `--color-destructive-foreground` | `text-destructive-foreground` | Text on destructive background (white) | Content displayed on destructive elements |
-| `--color-border` | `border` | Default border color (gray-250) | Inputs, cards, dividers |
-| `--radius` | `rounded` | Global border radius | Shared radius across components |
+| Variable                         | Utility Class                 | Description                             | Recommended Usage                               |
+| -------------------------------- | ----------------------------- | --------------------------------------- | ----------------------------------------------- |
+| `--color-background`             | `bg-background`               | Default page background (white)         | Main application background                     |
+| `--color-foreground`             | `text-foreground`             | Default text color (gray-900)           | Primary content text                            |
+| `--color-card`                   | `bg-card`                     | Card background (gray-100)              | Cards, containers, surfaces, panels, dialogs    |
+| `--color-primary`                | `bg-primary`                  | Primary brand color (blue)              | Main actions, buttons, active states            |
+| `--color-primary-foreground`     | `text-primary-foreground`     | Text on primary background (white)      | Text/icons displayed on primary elements        |
+| `--color-secondary`              | `bg-secondary`                | Secondary background (gray-200)         | Secondary actions, muted sections               |
+| `--color-secondary-foreground`   | `text-secondary-foreground`   | Text on secondary background (gray-900) | Content displayed on secondary elements         |
+| `--color-muted`                  | `bg-muted`                    | Muted background (gray-150)             | Subtle surfaces, table headers, disabled states |
+| `--color-muted`                  | `text-muted`                  | Muted text (gray-600)                   | Secondary text, inactive links, descriptions    |
+| `--color-accent`                 | `bg-accent`                   | Accent background (gray-150)            | Hover states, selection highlights              |
+| `--color-accent-foreground`      | `text-accent-foreground`      | Text on accent background (gray-900)    | Content displayed on accent elements            |
+| `--color-destructive`            | `bg-destructive`              | Destructive color (red)                 | Errors, warnings, destructive actions           |
+| `--color-destructive-foreground` | `text-destructive-foreground` | Text on destructive background (white)  | Content displayed on destructive elements       |
+| `--color-border`                 | `border`                      | Default border color (gray-250)         | Inputs, cards, dividers                         |
+| `--radius`                       | `rounded`                     | Global border radius                    | Shared radius across components                 |
 
 ---
 
@@ -227,9 +226,9 @@ Override these variables in `:root` or within a `.dark` class (when using class-
 
 For more complex components, vlite3 provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These are useful for building nuanced UIs with subtle backgrounds, hover states, and accessible text.
 
-| Base Color | Variant Variables | Usage Description |
-| --- | --- | --- |
-| **Primary** | `--color-primary-light`<br>
+| Base Color  | Variant Variables           | Usage Description |
+| ----------- | --------------------------- | ----------------- |
+| **Primary** | `--color-primary-light`<br> |
 
 <br>`--color-primary-dark`<br>
 
@@ -239,9 +238,9 @@ For more complex components, vlite3 provides extended variants for main semantic
 
 <br>**Dark**: Hover state for the main color.<br>
 
-<br>**Fg**: Text color on top of the *main* color.<br>
+<br>**Fg**: Text color on top of the _main_ color.<br>
 
-<br>**Fg-Light**: Text color on top of the *light* variant. |
+<br>**Fg-Light**: Text color on top of the _light_ variant. |
 | **Danger** | `--color-danger-light`<br>
 
 <br>`--color-danger-dark`<br>
@@ -303,19 +302,18 @@ For more complex components, vlite3 provides extended variants for main semantic
 </div>
 
 <button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
-
 ```
 
 ### Additional Colors
 
 vlite3 also provides additional utility colors for specific feedback states:
 
-| Variable | Class Name | Description |
-| --- | --- | --- |
-| `--color-success` | `text-success`, `bg-success` | For success messages/badges. |
-| `--color-warning` | `text-warning`, `bg-warning` | For warning messages/badges. |
-| `--color-info` | `text-info`, `bg-info` | For informational messages/badges. |
-| `--color-danger` | `text-danger`, `bg-danger` | Alias for destructive in some contexts. |
+| Variable          | Class Name                   | Description                             |
+| ----------------- | ---------------------------- | --------------------------------------- |
+| `--color-success` | `text-success`, `bg-success` | For success messages/badges.            |
+| `--color-warning` | `text-warning`, `bg-warning` | For warning messages/badges.            |
+| `--color-info`    | `text-info`, `bg-info`       | For informational messages/badges.      |
+| `--color-danger`  | `text-danger`, `bg-danger`   | Alias for destructive in some contexts. |
 
 ---
 
@@ -323,8 +321,8 @@ vlite3 also provides additional utility colors for specific feedback states:
 
 The typography system is organized into two complementary scales:
 
-* Compact scale (prefixed with `--text--fs-*`)
-* Progressive scale (prefixed with `--text-fs-*`)
+- Compact scale (prefixed with `--text--fs-*`)
+- Progressive scale (prefixed with `--text-fs-*`)
 
 Use the progressive scale only when you need finer visual control beyond the standard Tailwind size tokens.
 For most layout and content needs, prefer the default Tailwind text sizes to maintain consistency.
@@ -340,7 +338,6 @@ For most layout and content needs, prefer the default Tailwind text sizes to mai
 --text--fs-6: 0.6em;
 --text--fs-7: 0.55em;
 --text--fs-8: 0.5em;
-
 ```
 
 ### Progressive Text Scale
@@ -366,23 +363,13 @@ For most layout and content needs, prefer the default Tailwind text sizes to mai
 --text-fs-9: 1.8em;
 --text-fs-9.5: 2em;
 --text-fs-10: 2.5em;
-
 ```
 
 ### Tailwind Size Tokens
 
 ```css
---text-xs: 0.75rem
---text-sm: 0.875rem
---text-base: 1rem
---text-lg: 1.125rem
---text-xl: 1.25rem
---text-2xl: 1.5rem
---text-3xl: 1.875rem
---text-4xl: 2.25rem
---text-5xl: 3rem
---text-6xl: 4rem;
-
+--text-xs: 0.75rem --text-sm: 0.875rem --text-base: 1rem --text-lg: 1.125rem --text-xl: 1.25rem
+  --text-2xl: 1.5rem --text-3xl: 1.875rem --text-4xl: 2.25rem --text-5xl: 3rem --text-6xl: 4rem;
 ```
 
 ---
@@ -395,87 +382,105 @@ For most layout and content needs, prefer the default Tailwind text sizes to mai
 <span class="-text-fs-4 text-muted"> Caption text </span>
 
 <h1 class="text-xl font-semibold">Page Title</h1>
-
 ```
 
 ## Hard Rules
 
 Follow these rules strictly to ensure visual consistency and predictable styling across the system:
 
-* Use `border` instead of `border-border` (the default border color (gray-250) is already applied).
-* Use `rounded` instead of `rounded-rounded`.
-* Use `bg-muted` instead of `bg-secondary/20`.
-* Use `gap-x-*` instead of applying `ml-*` or `mr-*` directly on sibling items.
-* Use `gap-y-*` instead of applying `mt-*` or `mb-*` directly on sibling items.
+- Use `border` instead of `border-border` (the default border color (gray-250) is already applied).
+- Use `rounded` instead of `rounded-rounded`.
+- Use `bg-muted` instead of `bg-secondary/20`.
+- Use `gap-x-*` instead of applying `ml-*` or `mr-*` directly on sibling items.
+- Use `gap-y-*` instead of applying `mt-*` or `mb-*` directly on sibling items.
 
 ---
 
 ## ✅ Components
 
-* **Button**
-* **ButtonGroup**
-* **Icon**
-* **Label**
-* **Badge**
-* **Chip**
-* **Logo**
-* **Navbar**
-* **SidebarMenu**
-* **SidePanel**
-* **Masonry Grid**
-* **ThemeToggle**
+- [x] **Button**
+- [x] **ButtonGroup**
+- [x] **Icon**
+- [x] **Label**
+- [x] **Badge**
+- [x] **Chip**
+- [x] **Logo**
+- [x] **Navbar**
+- [x] **SidebarMenu**
+- [x] **SidePanel**
+- [x] **Breadcrumb**
+- [x] **List**
+- [x] **Masonry Grid**
+- [x] **Stats**
+- [x] **ThemeToggle**
+- [x] **Screen**
 
 ### Inputs & Forms
 
-* **Input**
-* **Textarea**
-* **CheckBox**
-* **Switch**
-* **ChoiceBox**
-* **Slider**
-* **OTPInput**
-* **DatePicker**
-* **ColorPicker**
-* **FilePicker**
-* **AvatarUploader**
-* **IconPicker**
-* **MultiSelect**
-* **Form**
-* **CustomFields**
-* **NumberInput**
-* **Google Login**
+- [x] **Input**
+- [x] **Textarea**
+- [x] **CheckBox**
+- [x] **Switch**
+- [x] **ChoiceBox**
+- [x] **Slider**
+- [x] **OTPInput**
+- [x] **NumberInput**
+- [x] **DatePicker**
+- [x] **DateRangePicker**
+- [x] **ColorPicker**
+- [x] **FilePicker**
+- [x] **AvatarUploader**
+- [x] **IconPicker**
+- [x] **MultiSelect**
+- [x] **Forms**
+- [x] **CustomFields**
+- [x] **GoogleLogin**
+- [x] **PermissionEditor**
 
 ### Data Display
 
-* **Avatar**
-* **Accordion**
-* **Carousel**
-* **DataTable**
-* **Pagination**
-* **Timeline**
-* **Heatmap**
-* **PricingPlan**
-* **FileTree**
-* **Workbook**
-* **Tabes**
+- [x] **Avatar**
+- [x] **Accordion**
+- [x] **Carousel**
+- [x] **DataTable**
+- [x] **DataList**
+- [x] **Pagination**
+- [x] **Timeline**
+- [x] **Heatmap**
+- [x] **PricingPlan**
+- [x] **FileTree**
+- [x] **Workbook**
+- [x] **Kanban**
+- [x] **Tabes**
+- [x] **Masonry**
+- [x] **Stats**
 
 ### Feedback & Overlays
 
-* **Alert**
-* **Modal**
-* **ConfirmationModal**
-* **ToastNotification**
-* **Tooltip**
-* **Dropdown**
-* **ProgressBar**
-* **Spinner**
+- [x] **Alert**
+- [x] **Modal**
+- [x] **ConfirmationModal**
+- [x] **ToastNotification**
+- [x] **Tooltip**
+- [x] **Dropdown**
+- [x] **ProgressBar**
+- [x] **Spinner**
+- [x] **CommandPalette**
+- [x] **SidePanel**
 
-## Complete reference for AI agents and developers:
+### Utilities & Tools
 
-* [1-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-setup.md)
-* [2-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-theming.md)
-* [3-all-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-all-components.md)
-* [4-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-forms.md)
-* [5-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-utility.md)
-* [6-advance-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/6-advance-components.md)
+- [x] **Barcode**
+- [x] **QRCode**
+- [x] **ImportData**
+- [x] **ExportData**
+
+## Complete reference for AI agents and developers:
 
+- [0-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/0-vlite3-setup.md)
+- [1-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-theming.md)
+- [2-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-all-components.md)
+- [3-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/components/Forms.md)
+- [3-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-utility.md)
+- [4-i18n.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-i18n.md)
+- [5-search-util.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-search-util.md)

package/components/Barcode/Barcode.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as d, ref as i, onMounted as f, watch as m, openBlock as r, createElementBlock as l, toDisplayString as p, createCommentVNode as v, withDirectives as h, vShow as g } from "vue";
-import w from "../../_virtual/JsBarcode.js";
+import w from "jsbarcode";
 import { barcodesConstants as b } from "./types.js";
 const y = { class: "inline-flex justify-center items-center max-w-full flex-col gap-2" }, x = {
   key: 0,

package/components/Dropdown/DropdownItem.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as k, computed as l, openBlock as o, createElementBlock as s, normalizeClass as h, renderSlot as g, normalizeProps as w, guardReactiveProps as I, createBlock as p, createCommentVNode as i, createElementVNode as a, toDisplayString as c } from "vue";
-import f from "../Icon.vue.js";
+import { defineComponent as g, computed as s, openBlock as n, createElementBlock as l, withKeys as k, withModifiers as w, normalizeClass as h, renderSlot as I, normalizeProps as $, guardReactiveProps as B, createBlock as b, createCommentVNode as i, createElementVNode as c, toDisplayString as a } from "vue";
+import v from "../Icon.vue.js";
 import { $t as d } from "../../utils/i18n.js";
-const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, j = { class: "flex items-center justify-between gap-2" }, C = { class: "truncate font-medium" }, D = {
+const j = ["data-disabled"], C = { class: "flex flex-col flex-1 min-w-0" }, D = { class: "flex items-center justify-between gap-2" }, S = { class: "truncate font-medium" }, z = {
   key: 0,
   class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
-}, S = {
+}, E = {
   key: 0,
   class: "text-[10px] text-muted-foreground truncate opacity-70"
-}, P = /* @__PURE__ */ k({
+}, P = /* @__PURE__ */ g({
   __name: "DropdownItem",
   props: {
     option: {},
@@ -17,40 +17,48 @@ const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, j =
     index: {}
   },
   emits: ["click", "mouseenter"],
-  setup(e, { emit: b }) {
-    const t = e, x = b, y = l(() => t.option.labelI18n ? d(t.option.labelI18n) : t.option.label), r = l(() => t.option.subtitleI18n ? d(t.option.subtitleI18n) : t.option.subtitle), u = l(() => t.option.descriptionI18n ? d(t.option.descriptionI18n) : t.option.description);
-    return (m, n) => (o(), s("div", {
+  setup(e, { emit: x }) {
+    const t = e, r = x, y = s(
+      () => t.option.labelI18n ? d(t.option.labelI18n) : t.option.label
+    ), u = s(
+      () => t.option.subtitleI18n ? d(t.option.subtitleI18n) : t.option.subtitle
+    ), m = s(
+      () => t.option.descriptionI18n ? d(t.option.descriptionI18n) : t.option.description
+    );
+    return (f, o) => (n(), l("div", {
+      tabindex: 0,
       "data-dropdown-item": "",
-      class: h(["relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50", [
+      class: h(["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1 data-disabled:pointer-events-none data-disabled:opacity-50", [
         e.selectable && e.selected && !e.option.children ? "bg-accent" : "",
         e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
         e.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       ]]),
       "data-disabled": e.option.disabled ? !0 : void 0,
-      onClick: n[0] || (n[0] = (v) => x("click", e.option)),
-      onMouseenter: n[1] || (n[1] = (v) => m.$emit("mouseenter", e.index ?? -1))
+      onClick: o[0] || (o[0] = (p) => r("click", e.option)),
+      onKeydown: o[1] || (o[1] = k(w((p) => r("click", e.option), ["prevent"]), ["enter"])),
+      onMouseenter: o[2] || (o[2] = (p) => f.$emit("mouseenter", e.index ?? -1))
     }, [
-      g(m.$slots, "default", w(I({ option: e.option, index: e.index, selected: e.selected })), () => [
-        e.option.icon || e.option.emoji ? (o(), p(f, {
+      I(f.$slots, "default", $(B({ option: e.option, index: e.index, selected: e.selected })), () => [
+        e.option.icon || e.option.emoji ? (n(), b(v, {
           key: 0,
           icon: e.option.icon,
           emoji: e.option.emoji,
           class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
         }, null, 8, ["icon", "emoji"])) : i("", !0),
-        a("div", $, [
-          a("div", j, [
-            a("span", C, c(y.value), 1),
-            r.value ? (o(), s("span", D, c(r.value), 1)) : i("", !0)
+        c("div", C, [
+          c("div", D, [
+            c("span", S, a(y.value), 1),
+            u.value ? (n(), l("span", z, a(u.value), 1)) : i("", !0)
           ]),
-          u.value ? (o(), s("span", S, c(u.value), 1)) : i("", !0)
+          m.value ? (n(), l("span", E, a(m.value), 1)) : i("", !0)
         ]),
-        e.selectable && e.selected ? (o(), p(f, {
+        e.selectable && e.selected ? (n(), b(v, {
           key: 1,
           icon: "lucide:check",
           class: "ml-2 h-4 w-4 shrink-0 text-primary"
         })) : i("", !0)
       ])
-    ], 42, B));
+    ], 42, j));
   }
 });
 export {

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as Z, defineAsyncComponent as ee, ref as j, computed as h, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as d, createVNode as S, createCommentVNode as u, renderSlot as b, unref as o, normalizeStyle as se, normalizeClass as _, toDisplayString as D, createBlock as v, Fragment as E, renderList as ne, withCtx as N, createElementVNode as $, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
+import { defineComponent as Z, defineAsyncComponent as ee, ref as j, computed as h, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as c, createVNode as S, createCommentVNode as u, renderSlot as b, unref as o, normalizeStyle as se, normalizeClass as _, toDisplayString as D, createBlock as v, Fragment as E, renderList as ne, withCtx as N, createElementVNode as $, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
 import I from "../Icon.vue.js";
-import de from "../Input.vue.js";
-import ce from "./DropdownItem.vue.js";
+import ce from "../Input.vue.js";
+import de from "./DropdownItem.vue.js";
 import ie from "./DropdownBooleanItem.vue.js";
 import ue from "./DropdownGroupedLayout.vue.js";
 import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
@@ -54,7 +54,7 @@ const he = ["dir"], ve = {
     }), L = h(() => {
       const e = M("vlite.dropdown.search");
       return e !== "vlite.dropdown.search" ? e : "Search...";
-    }), c = h(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), R = h(() => t.remote ? t.searchable : t.searchable && (c.value.length || 0) > 9);
+    }), d = h(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), R = h(() => t.remote ? t.searchable : t.searchable && (d.value.length || 0) > 9);
     let k = null;
     T(m, (e) => {
       t.remote && (k && clearTimeout(k), k = setTimeout(() => {
@@ -75,12 +75,12 @@ const he = ["dir"], ve = {
       onMouseEnterItem: x,
       scrollToIndex: U
     } = fe({
-      options: c,
+      options: d,
       searchQuery: m,
       containerRef: O,
       emit: (e, ...s) => f(e, ...s),
       handleSelect: (e, s) => w(e)
-    }), g = h(() => t.remote ? m.value ? c.value : t.cachedOptions.length ? t.cachedOptions : c.value : K.value), q = (e) => {
+    }), g = h(() => t.remote ? m.value ? d.value : t.cachedOptions.length ? t.cachedOptions : d.value : K.value), q = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
     }, G = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, J = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], Q = (e, s) => {
@@ -105,7 +105,7 @@ const he = ["dir"], ve = {
     }, X = async () => {
       await ae();
       let e = -1;
-      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = c.value.findIndex((s) => s.value === t.selected)), e !== -1 && U(e));
+      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = d.value.findIndex((s) => s.value === t.selected)), e !== -1 && U(e));
     };
     T(
       () => g.value,
@@ -118,12 +118,12 @@ const he = ["dir"], ve = {
       window.removeEventListener("keydown", B);
     });
     const Y = (e) => e.labelI18n ? M(e.labelI18n) : e.label;
-    return (e, s) => (n(), d("div", {
+    return (e, s) => (n(), c("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
       dir: r.direction
     }, [
-      R.value ? (n(), d("div", ve, [
-        S(de, {
+      R.value ? (n(), c("div", ve, [
+        S(ce, {
           modelValue: m.value,
           "onUpdate:modelValue": s[0] || (s[0] = (l) => m.value = l),
           placeholder: L.value,
@@ -136,10 +136,10 @@ const he = ["dir"], ve = {
           "show-clear-button": !1
         }, null, 8, ["modelValue", "placeholder"])
       ])) : u("", !0),
-      e.$slots.header ? (n(), d("div", ye, [
+      e.$slots.header ? (n(), c("div", ye, [
         b(e.$slots, "header")
       ])) : u("", !0),
-      c.value.length > 0 || e.$slots.menu ? (n(), d("div", {
+      d.value.length > 0 || e.$slots.menu ? (n(), c("div", {
         key: 2,
         ref_key: "containerRef",
         ref: O,
@@ -154,7 +154,7 @@ const he = ["dir"], ve = {
         (...l) => o(C) && o(C)(...l)),
         onScroll: F
       }, [
-        g.value.length === 0 && c.value.length > 0 && !r.loading ? (n(), d("div", ge, D(A.value), 1)) : u("", !0),
+        g.value.length === 0 && d.value.length > 0 && !r.loading ? (n(), c("div", ge, D(A.value), 1)) : u("", !0),
         r.layout === "grouped" ? (n(), v(ue, {
           key: 1,
           options: g.value,
@@ -162,8 +162,8 @@ const he = ["dir"], ve = {
           selectable: r.selectable,
           columns: r.columns,
           onSelect: w
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (n(!0), d(E, { key: 2 }, ne(g.value, (l, a) => (n(), d(E, { key: a }, [
-          l.label === "---" ? (n(), d("div", be)) : l.data?.isBoolean ? (n(), v(ie, {
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (n(!0), c(E, { key: 2 }, ne(g.value, (l, a) => (n(), c(E, { key: a }, [
+          l.label === "---" ? (n(), c("div", be)) : l.data?.isBoolean ? (n(), v(ie, {
             key: 1,
             option: l,
             value: J(l),
@@ -187,8 +187,9 @@ const he = ["dir"], ve = {
           }, {
             trigger: N(() => [
               $("div", {
+                tabindex: 0,
                 "data-dropdown-item": "",
-                class: _(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full", [
+                class: _(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
                   o(p) && o(y) === a ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : ""
                 ]]),
@@ -210,7 +211,7 @@ const he = ["dir"], ve = {
               ], 42, ke)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (n(), v(ce, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (n(), v(de, {
             key: 3,
             option: l,
             index: a,
@@ -229,7 +230,7 @@ const he = ["dir"], ve = {
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        r.loading ? (n(), d("div", xe, [
+        r.loading ? (n(), c("div", xe, [
           S(I, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
@@ -237,7 +238,7 @@ const he = ["dir"], ve = {
         ])) : u("", !0),
         b(e.$slots, "menu")
       ], 38)) : u("", !0),
-      e.$slots.footer ? (n(), d("div", Se, [
+      e.$slots.footer ? (n(), c("div", Se, [
         b(e.$slots, "footer")
       ])) : u("", !0)
     ], 8, he));