cisse-vue-ui 0.5.21 → 0.5.23

package/dist/{RangeSlider.vue_vue_type_script_setup_true_lang-ClH-pyK8.cjs → Combobox.vue_vue_type_script_setup_true_lang-D9TIId4E.cjs}

@@ -1,10 +1,12 @@
 "use strict";
 const vue = require("vue");
+const useId = require("./useId-nxrBaIC9.cjs");
 const vue$1 = require("@iconify/vue");
 const useDropdown = require("./useDropdown-DHFnd259.cjs");
 const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-DM9IkUGy.cjs");
-const _hoisted_1$c = ["data-error", "for"];
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const index = require("./index-CUNU12xk.cjs");
+const _hoisted_1$d = ["data-error", "for"];
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "FormLabel",
   props: {
     error: { type: [String, Boolean] },
@@ -18,32 +20,36 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
       }, [
         vue.renderSlot(_ctx.$slots, "default")
-      ], 8, _hoisted_1$c);
+      ], 8, _hoisted_1$d);
     };
   }
 });
-const _hoisted_1$b = ["data-error"];
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$c = ["id", "data-error", "role", "aria-live"];
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "FormHelp",
   props: {
+    id: {},
     error: { type: Boolean },
     text: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("p", {
+        id: __props.id,
         "data-error": __props.error,
+        role: __props.error ? "alert" : void 0,
+        "aria-live": __props.error ? "polite" : void 0,
         class: "mt-2 text-sm text-gray-400 peer-user-invalid:visible data-[error=true]:text-red-500 dark:text-gray-500"
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.createTextVNode(vue.toDisplayString(__props.text ?? ""), 1)
         ])
-      ], 8, _hoisted_1$b);
+      ], 8, _hoisted_1$c);
     };
   }
 });
-const _hoisted_1$a = ["id", "disabled", "name", "placeholder", "type"];
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$b = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "FormInput",
   props: /* @__PURE__ */ vue.mergeModels({
     type: { default: "text" },
@@ -52,49 +58,59 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean },
     invalid: { type: Boolean },
     id: {},
-    name: {}
+    name: {},
+    required: { type: Boolean },
+    describedBy: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
     const modelValue = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
-        id: __props.id ?? __props.name ?? "",
+        id: props.id ?? props.name ?? "",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-        disabled: __props.disabled,
-        name: __props.name ?? "",
-        placeholder: __props.placeholder,
-        type: __props.type,
+        disabled: props.disabled,
+        name: props.name ?? "",
+        placeholder: props.placeholder,
+        type: props.type,
+        required: props.required,
+        "aria-invalid": props.invalid || void 0,
+        "aria-required": props.required || void 0,
+        "aria-describedby": props.describedBy || void 0,
         class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm user-invalid:border-red-500 user-invalid:text-red-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none focus:user-invalid:border-red-500 focus:user-invalid:ring-red-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
-      }, _ctx.$attrs), null, 16, _hoisted_1$a)), [
+      }, _ctx.$attrs), null, 16, _hoisted_1$b)), [
         [vue.vModelDynamic, modelValue.value]
       ]);
     };
   }
 });
-const _hoisted_1$9 = { class: "relative" };
-const _hoisted_2$8 = ["id", "disabled"];
-const _hoisted_3$7 = { class: "flex-1 truncate" };
-const _hoisted_4$5 = {
+const _hoisted_1$a = { class: "relative" };
+const _hoisted_2$9 = ["id", "disabled", "aria-expanded", "aria-controls", "aria-invalid", "aria-describedby"];
+const _hoisted_3$8 = { class: "flex-1 truncate" };
+const _hoisted_4$6 = ["id", "aria-label"];
+const _hoisted_5$5 = {
   key: 0,
   class: "sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800"
 };
-const _hoisted_5$4 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
-const _hoisted_6$4 = {
+const _hoisted_6$5 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
+const _hoisted_7$5 = {
   key: 1,
-  class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+  class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400",
+  role: "status"
 };
-const _hoisted_7$4 = { class: "py-1" };
-const _hoisted_8$4 = ["data-index", "onClick", "onMouseenter"];
-const _hoisted_9$2 = {
+const _hoisted_8$4 = { class: "py-1" };
+const _hoisted_9$2 = ["aria-selected", "data-index", "onClick", "onMouseenter"];
+const _hoisted_10$2 = {
   key: 1,
-  class: "size-4 shrink-0"
+  class: "size-4 shrink-0",
+  "aria-hidden": "true"
 };
-const _hoisted_10$2 = { class: "flex-1" };
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_11$2 = { class: "flex-1" };
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "FormSelect",
   props: /* @__PURE__ */ vue.mergeModels({
     options: {},
@@ -105,6 +121,8 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     invalid: { type: Boolean },
     id: {},
     name: {},
+    required: { type: Boolean },
+    describedBy: {},
     teleport: { type: Boolean, default: true },
     searchable: { type: Boolean, default: false },
     noResultsText: { default: "No results found" },
@@ -116,6 +134,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
+    const { id: generatedId, related } = useId.useId({ prefix: "select", id: props.id });
+    const triggerId = vue.computed(() => props.id ?? props.name ?? generatedId.value);
+    const listboxId = vue.computed(() => related("listbox"));
     const modelValue = vue.useModel(__props, "modelValue");
     const searchQuery = vue.ref("");
     const triggerRef = vue.ref();
@@ -185,9 +206,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     const handleKeydown = (event) => {
       baseHandleKeydown(event, {
         itemCount: filteredOptions.value.length,
-        onSelect: (index) => {
-          if (filteredOptions.value[index]) {
-            selectOption(filteredOptions.value[index]);
+        onSelect: (index2) => {
+          if (filteredOptions.value[index2]) {
+            selectOption(filteredOptions.value[index2]);
           }
         },
         onOpen: open,
@@ -207,14 +228,19 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       return [base, state, text, props.triggerClass];
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
         vue.createElementVNode("button", {
-          id: __props.id ?? __props.name ?? void 0,
+          id: triggerId.value,
           ref_key: "triggerRef",
           ref: triggerRef,
           type: "button",
           disabled: __props.disabled,
           class: vue.normalizeClass(triggerClasses.value),
+          "aria-haspopup": "listbox",
+          "aria-expanded": vue.unref(isOpen),
+          "aria-controls": listboxId.value,
+          "aria-invalid": __props.invalid || void 0,
+          "aria-describedby": __props.describedBy || void 0,
           onClick: toggle,
           onKeydown: handleKeydown
         }, [
@@ -222,13 +248,14 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
             option: selectedOption.value,
             placeholder: __props.placeholder
           }, () => [
-            vue.createElementVNode("span", _hoisted_3$7, vue.toDisplayString(displayValue.value), 1)
+            vue.createElementVNode("span", _hoisted_3$8, vue.toDisplayString(displayValue.value), 1)
           ]),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "lucide:chevron-down",
-            class: vue.normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", vue.unref(isOpen) && "rotate-180"])
+            class: vue.normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", vue.unref(isOpen) && "rotate-180"]),
+            "aria-hidden": "true"
           }, null, 8, ["class"])
-        ], 42, _hoisted_2$8),
+        ], 42, _hoisted_2$9),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -244,19 +271,23 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
             default: vue.withCtx(() => [
               vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
+                id: listboxId.value,
                 ref_key: "dropdownRef",
                 ref: dropdownRef,
+                role: "listbox",
+                "aria-label": __props.placeholder || "Select an option",
                 style: vue.normalizeStyle(vue.unref(dropdownStyle)),
                 class: vue.normalizeClass([
                   "z-[9999] max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
                   !__props.teleport && "absolute mt-1 w-full"
                 ])
               }, [
-                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
-                  vue.createElementVNode("div", _hoisted_5$4, [
+                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, [
+                  vue.createElementVNode("div", _hoisted_6$5, [
                     vue.createVNode(vue.unref(vue$1.Icon), {
                       icon: "lucide:search",
-                      class: "size-4 text-gray-400"
+                      class: "size-4 text-gray-400",
+                      "aria-hidden": "true"
                     }),
                     vue.withDirectives(vue.createElementVNode("input", {
                       ref_key: "searchInputRef",
@@ -265,44 +296,48 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                       type: "text",
                       class: "flex-1 bg-transparent text-sm outline-none dark:text-white",
                       placeholder: "Search...",
+                      "aria-label": "Search options",
                       onKeydown: handleKeydown
                     }, null, 544), [
                       [vue.vModelText, searchQuery.value]
                     ])
                   ])
                 ])) : vue.createCommentVNode("", true),
-                filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$4, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true),
-                vue.createElementVNode("div", _hoisted_7$4, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index) => {
+                filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("div", _hoisted_8$4, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index2) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: String(option.value),
                       type: "button",
-                      "data-index": index,
+                      role: "option",
+                      "aria-selected": modelValue.value === option.value,
+                      "data-index": index2,
                       class: vue.normalizeClass([
                         "flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors",
-                        vue.unref(highlightedIndex) === index && "bg-gray-100 dark:bg-gray-700",
+                        vue.unref(highlightedIndex) === index2 && "bg-gray-100 dark:bg-gray-700",
                         modelValue.value === option.value && "bg-primary/10 text-primary",
                         modelValue.value !== option.value && "text-gray-700 dark:text-gray-200"
                       ]),
                       onClick: ($event) => selectOption(option),
-                      onMouseenter: ($event) => highlightedIndex.value = index
+                      onMouseenter: ($event) => highlightedIndex.value = index2
                     }, [
                       vue.renderSlot(_ctx.$slots, "option", {
                         option,
                         selected: modelValue.value === option.value,
-                        index
+                        index: index2
                       }, () => [
                         modelValue.value === option.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
                           key: 0,
                           icon: "lucide:check",
-                          class: "size-4 shrink-0 text-primary"
-                        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$2)),
-                        vue.createElementVNode("span", _hoisted_10$2, vue.toDisplayString(option.label), 1)
+                          class: "size-4 shrink-0 text-primary",
+                          "aria-hidden": "true"
+                        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$2)),
+                        vue.createElementVNode("span", _hoisted_11$2, vue.toDisplayString(option.label), 1)
                       ])
-                    ], 42, _hoisted_8$4);
+                    ], 42, _hoisted_9$2);
                   }), 128))
                 ])
-              ], 6)) : vue.createCommentVNode("", true)
+              ], 14, _hoisted_4$6)) : vue.createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -311,8 +346,8 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["hidden"];
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$9 = ["hidden"];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "FormGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -327,6 +362,8 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     invalid: { type: Boolean },
     id: {},
     name: {},
+    required: { type: Boolean },
+    describedBy: {},
     options: {}
   }, {
     "modelValue": {},
@@ -336,8 +373,12 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const modelValue = vue.useModel(__props, "modelValue");
+    const { id: generatedId, related } = useId.useId({ prefix: "field", id: props.id });
+    const inputId = vue.computed(() => props.id ?? props.name ?? generatedId.value);
+    const helpId = vue.computed(() => related("help"));
     const computedCols = vue.computed(() => `span ${props.cols} / span ${props.cols}`);
     const isSelect = vue.computed(() => props.select === true);
+    const hasError = vue.computed(() => props.error && typeof props.error === "string");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         style: vue.normalizeStyle({ gridColumn: computedCols.value }),
@@ -345,9 +386,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
-            __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$c, {
+            __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
               key: 0,
-              "html-for": __props.id ?? __props.name,
+              "html-for": inputId.value,
               error: __props.error
             }, {
               default: vue.withCtx(() => [
@@ -357,33 +398,42 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "input", {}, () => [
-            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, vue.mergeProps({
+            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$a, vue.mergeProps({
               key: 0,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
-            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"])) : (vue.openBlock(), vue.createBlock(_sfc_main$a, vue.mergeProps({
+            }, { ..._ctx.$attrs, ..._ctx.$props }, {
+              id: inputId.value,
+              invalid: Boolean(__props.error),
+              "described-by": hasError.value ? helpId.value : void 0
+            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (vue.openBlock(), vue.createBlock(_sfc_main$b, vue.mergeProps({
               key: 1,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
-            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"]))
+            }, { ..._ctx.$attrs, ..._ctx.$props }, {
+              id: inputId.value,
+              invalid: Boolean(__props.error),
+              "described-by": hasError.value ? helpId.value : void 0
+            }), null, 16, ["modelValue", "id", "invalid", "described-by"]))
           ]),
-          __props.error && typeof __props.error === "string" ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$c, {
             key: 0,
+            id: helpId.value,
             error: true
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(__props.error), 1)
             ]),
             _: 1
-          })) : vue.createCommentVNode("", true)
+          }, 8, ["id"])) : vue.createCommentVNode("", true)
         ])
-      ], 12, _hoisted_1$8);
+      ], 12, _hoisted_1$9);
     };
   }
 });
-const _hoisted_1$7 = { class: "relative" };
-const _hoisted_2$7 = ["disabled", "placeholder", "value"];
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$8 = { class: "relative" };
+const _hoisted_2$8 = ["disabled", "placeholder", "value"];
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchInput",
   props: {
     modelValue: {},
@@ -399,7 +449,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       emit("update:modelValue", target.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
         vue.createVNode(vue.unref(vue$1.Icon), {
           icon: __props.icon,
           class: "absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400"
@@ -411,37 +461,36 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
           class: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500",
           type: "text",
           onInput: handleInput
-        }, null, 40, _hoisted_2$7)
+        }, null, 40, _hoisted_2$8)
       ]);
     };
   }
 });
-const _hoisted_1$6 = ["aria-checked", "disabled"];
-const _hoisted_2$6 = {
+const _hoisted_1$7 = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
+const _hoisted_2$7 = {
   key: 0,
   class: "flex flex-col"
 };
-const _hoisted_3$6 = {
-  key: 0,
-  class: "text-sm font-medium text-gray-900 dark:text-white"
-};
-const _hoisted_4$4 = {
-  key: 1,
-  class: "text-sm text-gray-500 dark:text-gray-400"
-};
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$7 = ["id"];
+const _hoisted_4$5 = ["id"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
     label: {},
     description: {},
     disabled: { type: Boolean },
-    size: { default: "md" }
+    size: { default: "md" },
+    id: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const { id: generatedId, related } = useId.useId({ prefix: "switch", id: props.id });
+    const switchId = vue.computed(() => props.id ?? generatedId.value);
+    const labelId = vue.computed(() => related("label"));
+    const descriptionId = vue.computed(() => related("description"));
     const toggle = () => {
       if (props.disabled) return;
       emit("update:modelValue", !props.modelValue);
@@ -466,9 +515,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(["inline-flex items-start gap-3", __props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"])
       }, [
         vue.createElementVNode("button", {
+          id: switchId.value,
           type: "button",
           role: "switch",
           "aria-checked": __props.modelValue,
+          "aria-labelledby": __props.label ? labelId.value : void 0,
+          "aria-describedby": __props.description ? descriptionId.value : void 0,
           disabled: __props.disabled,
           class: vue.normalizeClass([
             "relative inline-flex shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
@@ -482,29 +534,38 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
               "inline-block transform rounded-full bg-white shadow-sm transition-transform",
               dotSizes[__props.size],
               __props.modelValue ? translateSizes[__props.size] : "translate-x-1"
-            ])
+            ]),
+            "aria-hidden": "true"
           }, null, 2)
-        ], 10, _hoisted_1$6),
-        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
-          __props.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$6, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
-          __props.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$4, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true)
+        ], 10, _hoisted_1$7),
+        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+          __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            id: labelId.value,
+            class: "text-sm font-medium text-gray-900 dark:text-white"
+          }, vue.toDisplayString(__props.label), 9, _hoisted_3$7)) : vue.createCommentVNode("", true),
+          __props.description ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 1,
+            id: descriptionId.value,
+            class: "text-sm text-gray-500 dark:text-gray-400"
+          }, vue.toDisplayString(__props.description), 9, _hoisted_4$5)) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$5 = { class: "w-full" };
-const _hoisted_2$5 = {
+const _hoisted_1$6 = { class: "w-full" };
+const _hoisted_2$6 = {
   key: 0,
   class: "mb-2 flex justify-between text-sm"
 };
-const _hoisted_3$5 = { class: "text-gray-600 dark:text-gray-400" };
-const _hoisted_4$3 = { class: "font-medium text-gray-900 dark:text-white" };
-const _hoisted_5$3 = { class: "text-gray-600 dark:text-gray-400" };
-const _hoisted_6$3 = { class: "relative" };
-const _hoisted_7$3 = ["value", "min", "max", "step", "disabled"];
+const _hoisted_3$6 = { class: "text-gray-600 dark:text-gray-400" };
+const _hoisted_4$4 = { class: "font-medium text-gray-900 dark:text-white" };
+const _hoisted_5$4 = { class: "text-gray-600 dark:text-gray-400" };
+const _hoisted_6$4 = { class: "relative" };
+const _hoisted_7$4 = ["value", "min", "max", "step", "disabled"];
 const _hoisted_8$3 = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center" };
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "Slider",
   props: /* @__PURE__ */ vue.mergeModels({
     min: { default: 0 },
@@ -535,13 +596,13 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       modelValue.value = Number(target.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
-          vue.createElementVNode("span", _hoisted_3$5, vue.toDisplayString(__props.min), 1),
-          vue.createElementVNode("span", _hoisted_4$3, vue.toDisplayString(displayValue.value), 1),
-          vue.createElementVNode("span", _hoisted_5$3, vue.toDisplayString(__props.max), 1)
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
+          vue.createElementVNode("span", _hoisted_3$6, vue.toDisplayString(__props.min), 1),
+          vue.createElementVNode("span", _hoisted_4$4, vue.toDisplayString(displayValue.value), 1),
+          vue.createElementVNode("span", _hoisted_5$4, vue.toDisplayString(__props.max), 1)
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_6$3, [
+        vue.createElementVNode("div", _hoisted_6$4, [
           vue.createElementVNode("input", {
             type: "range",
             value: modelValue.value,
@@ -551,7 +612,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             disabled: __props.disabled,
             class: "slider-input w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
             onInput: handleInput
-          }, null, 40, _hoisted_7$3),
+          }, null, 40, _hoisted_7$4),
           vue.createElementVNode("div", _hoisted_8$3, [
             vue.createElementVNode("div", {
               class: "h-2 rounded-full bg-primary",
@@ -563,18 +624,27 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Slider = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["__scopeId", "data-v-a411f1b4"]]);
-const _hoisted_1$4 = { class: "relative" };
-const _hoisted_2$4 = ["disabled"];
-const _hoisted_3$4 = { class: "flex-1 truncate" };
-const _hoisted_4$2 = { class: "flex items-center gap-1" };
-const _hoisted_5$2 = { class: "mb-4 flex items-center justify-between" };
-const _hoisted_6$2 = { class: "font-medium text-gray-900 dark:text-white" };
-const _hoisted_7$2 = { class: "mb-2 grid grid-cols-7 gap-1" };
-const _hoisted_8$2 = { class: "grid grid-cols-7 gap-1" };
-const _hoisted_9$1 = ["disabled", "onClick"];
-const _hoisted_10$1 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const Slider = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$6, [["__scopeId", "data-v-a411f1b4"]]);
+const _hoisted_1$5 = { class: "relative" };
+const _hoisted_2$5 = ["id", "disabled", "aria-expanded", "aria-controls"];
+const _hoisted_3$5 = { class: "flex-1 truncate" };
+const _hoisted_4$3 = { class: "flex items-center gap-1" };
+const _hoisted_5$3 = ["id", "aria-label"];
+const _hoisted_6$3 = { class: "mb-4 flex items-center justify-between" };
+const _hoisted_7$3 = {
+  class: "font-medium text-gray-900 dark:text-white",
+  "aria-live": "polite",
+  "aria-atomic": "true"
+};
+const _hoisted_8$2 = {
+  class: "mb-2 grid grid-cols-7 gap-1",
+  role: "row"
+};
+const _hoisted_9$1 = ["abbr"];
+const _hoisted_10$1 = ["id", "aria-label"];
+const _hoisted_11$1 = ["aria-label", "aria-selected", "aria-disabled", "disabled", "onClick"];
+const _hoisted_12 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Select date" },
@@ -583,7 +653,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     disabled: { type: Boolean, default: false },
     minDate: {},
     maxDate: {},
-    teleport: { type: Boolean, default: true }
+    teleport: { type: Boolean, default: true },
+    id: {}
   }, {
     "modelValue": { default: null },
     "modelModifiers": {}
@@ -591,6 +662,10 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
+    const { related } = useId.useId({ prefix: "datepicker", id: props.id });
+    const triggerId = vue.computed(() => related("trigger"));
+    const calendarId = vue.computed(() => related("calendar"));
+    const gridId = vue.computed(() => related("grid"));
     const modelValue = vue.useModel(__props, "modelValue");
     const triggerRef = vue.ref();
     const calendarRef = vue.ref();
@@ -683,13 +758,26 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const clear = () => {
       modelValue.value = null;
     };
+    const getDateLabel = (date) => {
+      const formatter = new Intl.DateTimeFormat(props.locale, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+      return formatter.format(date);
+    };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
         vue.createElementVNode("button", {
+          id: triggerId.value,
           ref_key: "triggerRef",
           ref: triggerRef,
           type: "button",
           disabled: __props.disabled,
+          "aria-expanded": vue.unref(isOpen),
+          "aria-haspopup": "dialog",
+          "aria-controls": calendarId.value,
           class: vue.normalizeClass([
             "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition",
             __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950" : vue.unref(isOpen) ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900",
@@ -698,25 +786,28 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
           onClick: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => vue.unref(toggle) && vue.unref(toggle)(...args))
         }, [
-          vue.createElementVNode("span", _hoisted_3$4, vue.toDisplayString(displayValue.value || __props.placeholder), 1),
-          vue.createElementVNode("div", _hoisted_4$2, [
+          vue.createElementVNode("span", _hoisted_3$5, vue.toDisplayString(displayValue.value || __props.placeholder), 1),
+          vue.createElementVNode("div", _hoisted_4$3, [
             modelValue.value ? (vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
               class: "rounded p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800",
+              "aria-label": "Clear date",
               onClick: vue.withModifiers(clear, ["stop"])
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: "lucide:x",
-                class: "size-4 text-gray-400"
+                class: "size-4 text-gray-400",
+                "aria-hidden": "true"
               })
             ])) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "lucide:calendar",
-              class: "size-4 text-gray-400"
+              class: "size-4 text-gray-400",
+              "aria-hidden": "true"
             })
           ])
-        ], 10, _hoisted_2$4),
+        ], 10, _hoisted_2$5),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -732,47 +823,66 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             default: vue.withCtx(() => [
               vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
+                id: calendarId.value,
                 ref_key: "calendarRef",
                 ref: calendarRef,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": `Choose date, ${monthYear.value}`,
                 style: vue.normalizeStyle(vue.unref(dropdownStyle)),
                 class: "z-[9999] w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
               }, [
-                vue.createElementVNode("div", _hoisted_5$2, [
+                vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
+                    "aria-label": "Previous month",
                     onClick: prevMonth
                   }, [
                     vue.createVNode(vue.unref(vue$1.Icon), {
                       icon: "lucide:chevron-left",
-                      class: "size-5 text-gray-600 dark:text-gray-400"
+                      class: "size-5 text-gray-600 dark:text-gray-400",
+                      "aria-hidden": "true"
                     })
                   ]),
-                  vue.createElementVNode("span", _hoisted_6$2, vue.toDisplayString(monthYear.value), 1),
+                  vue.createElementVNode("span", _hoisted_7$3, vue.toDisplayString(monthYear.value), 1),
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
+                    "aria-label": "Next month",
                     onClick: nextMonth
                   }, [
                     vue.createVNode(vue.unref(vue$1.Icon), {
                       icon: "lucide:chevron-right",
-                      class: "size-5 text-gray-600 dark:text-gray-400"
+                      class: "size-5 text-gray-600 dark:text-gray-400",
+                      "aria-hidden": "true"
                     })
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$2, [
+                vue.createElementVNode("div", _hoisted_8$2, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       key: day,
-                      class: "text-center text-xs font-medium text-gray-500 dark:text-gray-400"
-                    }, vue.toDisplayString(day), 1);
+                      class: "text-center text-xs font-medium text-gray-500 dark:text-gray-400",
+                      role: "columnheader",
+                      abbr: day
+                    }, vue.toDisplayString(day), 9, _hoisted_9$1);
                   }), 128))
                 ]),
-                vue.createElementVNode("div", _hoisted_8$2, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(calendarDays.value, (day, index) => {
+                vue.createElementVNode("div", {
+                  id: gridId.value,
+                  class: "grid grid-cols-7 gap-1",
+                  role: "grid",
+                  "aria-label": monthYear.value
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(calendarDays.value, (day, index2) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
-                      key: index,
+                      key: index2,
                       type: "button",
+                      role: "gridcell",
+                      "aria-label": getDateLabel(day.date),
+                      "aria-selected": day.isSelected,
+                      "aria-disabled": day.isDisabled || void 0,
                       disabled: day.isDisabled,
                       class: vue.normalizeClass([
                         "h-8 w-8 rounded text-sm transition",
@@ -783,17 +893,17 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                         day.isSelected && "bg-primary text-white font-semibold"
                       ]),
                       onClick: ($event) => selectDate(day)
-                    }, vue.toDisplayString(day.date.getDate()), 11, _hoisted_9$1);
+                    }, vue.toDisplayString(day.date.getDate()), 11, _hoisted_11$1);
                   }), 128))
-                ]),
-                vue.createElementVNode("div", _hoisted_10$1, [
+                ], 8, _hoisted_10$1),
+                vue.createElementVNode("div", _hoisted_12, [
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "w-full rounded py-1.5 text-sm font-medium text-primary hover:bg-primary/10",
                     onClick: _cache[1] || (_cache[1] = ($event) => selectDate({ date: /* @__PURE__ */ new Date(), isDisabled: false }))
                   }, " Today ")
                 ])
-              ], 4)) : vue.createCommentVNode("", true)
+              ], 12, _hoisted_5$3)) : vue.createCommentVNode("", true)
             ]),
             _: 1
           })
@@ -802,19 +912,19 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "space-y-4" };
-const _hoisted_2$3 = ["accept", "multiple", "disabled"];
-const _hoisted_3$3 = { class: "space-y-2" };
-const _hoisted_4$1 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
-const _hoisted_5$1 = {
+const _hoisted_1$4 = { class: "space-y-4" };
+const _hoisted_2$4 = ["accept", "multiple", "disabled"];
+const _hoisted_3$4 = { class: "space-y-2" };
+const _hoisted_4$2 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
+const _hoisted_5$2 = {
   key: 0,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
   key: 1,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _hoisted_7$1 = {
+const _hoisted_7$2 = {
   key: 0,
   class: "space-y-2"
 };
@@ -822,7 +932,7 @@ const _hoisted_8$1 = { class: "flex-1 min-w-0" };
 const _hoisted_9 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate" };
 const _hoisted_10 = { class: "text-xs text-gray-500 dark:text-gray-400" };
 const _hoisted_11 = ["onClick"];
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: {
     accept: {},
@@ -897,9 +1007,9 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const removeFile = (id) => {
-      const index = files.value.findIndex((f) => f.id === id);
-      if (index > -1) {
-        const removed = files.value.splice(index, 1)[0];
+      const index2 = files.value.findIndex((f) => f.id === id);
+      if (index2 > -1) {
+        const removed = files.value.splice(index2, 1)[0];
         emit("file-removed", removed.file);
       }
     };
@@ -950,7 +1060,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       return "heroicons:document";
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(dropzoneClasses.value),
           onDrop: vue.withModifiers(handleDrop, ["prevent"]),
@@ -967,18 +1077,18 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             multiple: __props.multiple,
             disabled: __props.disabled,
             onChange: handleInputChange
-          }, null, 40, _hoisted_2$3),
-          vue.createElementVNode("div", _hoisted_3$3, [
+          }, null, 40, _hoisted_2$4),
+          vue.createElementVNode("div", _hoisted_3$4, [
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "heroicons:cloud-arrow-up",
               class: vue.normalizeClass(["w-12 h-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
             }, null, 8, ["class"]),
-            vue.createElementVNode("p", _hoisted_4$1, vue.toDisplayString(__props.label), 1),
-            __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$1, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
-            __props.maxSize ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$1, " Max size: " + vue.toDisplayString(formatSize(__props.maxSize)), 1)) : vue.createCommentVNode("", true)
+            vue.createElementVNode("p", _hoisted_4$2, vue.toDisplayString(__props.label), 1),
+            __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$2, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
+            __props.maxSize ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$2, " Max size: " + vue.toDisplayString(formatSize(__props.maxSize)), 1)) : vue.createCommentVNode("", true)
           ])
         ], 34),
-        files.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_7$1, [
+        files.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_7$2, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(files.value, (uploadedFile) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: uploadedFile.id,
@@ -1009,13 +1119,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "flex items-center gap-1" };
-const _hoisted_2$2 = ["disabled", "onClick", "onMousemove"];
-const _hoisted_3$2 = {
+const _hoisted_1$3 = { class: "flex items-center gap-1" };
+const _hoisted_2$3 = ["disabled", "onClick", "onMousemove"];
+const _hoisted_3$3 = {
   key: 0,
   class: "ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "Rating",
   props: {
     modelValue: { default: 0 },
@@ -1048,29 +1158,29 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           return "w-6 h-6";
       }
     });
-    const getStarState = (index) => {
+    const getStarState = (index2) => {
       const value = displayValue.value;
-      if (value >= index) return "full";
-      if (props.allowHalf && value >= index - 0.5) return "half";
+      if (value >= index2) return "full";
+      if (props.allowHalf && value >= index2 - 0.5) return "half";
       return "empty";
     };
-    const handleClick = (index, event) => {
+    const handleClick = (index2, event) => {
       if (props.readonly || props.disabled) return;
-      let value = index;
+      let value = index2;
       if (props.allowHalf) {
         const rect = event.target.getBoundingClientRect();
         const isLeftHalf = event.clientX - rect.left < rect.width / 2;
-        value = isLeftHalf ? index - 0.5 : index;
+        value = isLeftHalf ? index2 - 0.5 : index2;
       }
       emit("update:modelValue", value);
     };
-    const handleMouseMove = (index, event) => {
+    const handleMouseMove = (index2, event) => {
       if (props.readonly || props.disabled) return;
-      let value = index;
+      let value = index2;
       if (props.allowHalf) {
         const rect = event.target.getBoundingClientRect();
         const isLeftHalf = event.clientX - rect.left < rect.width / 2;
-        value = isLeftHalf ? index - 0.5 : index;
+        value = isLeftHalf ? index2 - 0.5 : index2;
       }
       hoverValue.value = value;
     };
@@ -1078,22 +1188,22 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       hoverValue.value = null;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
         vue.createElementVNode("div", {
           class: "flex items-center",
           onMouseleave: handleMouseLeave
         }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.max, (index) => {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.max, (index2) => {
             return vue.openBlock(), vue.createElementBlock("button", {
-              key: index,
+              key: index2,
               type: "button",
               class: vue.normalizeClass(["relative focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 rounded", [
                 __props.readonly || __props.disabled ? "cursor-default" : "cursor-pointer",
                 __props.disabled && "opacity-50"
               ]]),
               disabled: __props.readonly || __props.disabled,
-              onClick: ($event) => handleClick(index, $event),
-              onMousemove: ($event) => handleMouseMove(index, $event)
+              onClick: ($event) => handleClick(index2, $event),
+              onMousemove: ($event) => handleMouseMove(index2, $event)
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: __props.emptyIcon,
@@ -1102,7 +1212,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 class: "absolute inset-0 overflow-hidden",
                 style: vue.normalizeStyle({
-                  width: getStarState(index) === "full" ? "100%" : getStarState(index) === "half" ? "50%" : "0%"
+                  width: getStarState(index2) === "full" ? "100%" : getStarState(index2) === "half" ? "50%" : "0%"
                 })
               }, [
                 vue.createVNode(vue.unref(vue$1.Icon), {
@@ -1110,29 +1220,29 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
                   class: vue.normalizeClass([sizeClasses.value, __props.color])
                 }, null, 8, ["icon", "class"])
               ], 4)
-            ], 42, _hoisted_2$2);
+            ], 42, _hoisted_2$3);
           }), 128))
         ], 32),
-        __props.showValue ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : vue.createCommentVNode("", true)
+        __props.showValue ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, vue.toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : vue.createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$1 = { class: "relative inline-block" };
-const _hoisted_2$1 = {
+const _hoisted_1$2 = { class: "relative inline-block" };
+const _hoisted_2$2 = {
   key: 0,
   class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
 };
-const _hoisted_3$1 = ["disabled"];
-const _hoisted_4 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
-const _hoisted_5 = { class: "grid grid-cols-5 gap-2 mb-3" };
-const _hoisted_6 = ["title", "onClick"];
-const _hoisted_7 = {
+const _hoisted_3$2 = ["disabled"];
+const _hoisted_4$1 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
+const _hoisted_5$1 = { class: "grid grid-cols-5 gap-2 mb-3" };
+const _hoisted_6$1 = ["title", "onClick"];
+const _hoisted_7$1 = {
   key: 0,
   class: "flex items-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-700"
 };
 const _hoisted_8 = ["value"];
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#3b82f6" },
@@ -1160,11 +1270,14 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ] },
     showInput: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    label: {}
+    label: {},
+    teleport: { type: [String, Boolean], default: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const teleportDisabled = vue.computed(() => props.teleport === false);
+    const teleportTarget = vue.computed(() => props.teleport === false ? "body" : props.teleport);
     const emit = __emit;
     const isOpen = vue.ref(false);
     const inputValue = vue.ref(props.modelValue);
@@ -1198,8 +1311,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       isOpen.value = false;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$1, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$2, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("button", {
           type: "button",
           class: vue.normalizeClass(["flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", { "opacity-50 cursor-not-allowed": __props.disabled }]),
@@ -1210,90 +1323,95 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             class: "w-6 h-6 rounded border border-gray-200 dark:border-gray-600",
             style: vue.normalizeStyle({ backgroundColor: __props.modelValue })
           }, null, 4),
-          vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(__props.modelValue), 1),
+          vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString(__props.modelValue), 1),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "heroicons:chevron-down",
             class: vue.normalizeClass(["w-4 h-4 text-gray-400", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
-        ], 10, _hoisted_3$1),
-        vue.createVNode(vue.Transition, {
-          "enter-active-class": "transition duration-100 ease-out",
-          "enter-from-class": "opacity-0 scale-95",
-          "enter-to-class": "opacity-100 scale-100",
-          "leave-active-class": "transition duration-75 ease-in",
-          "leave-from-class": "opacity-100 scale-100",
-          "leave-to-class": "opacity-0 scale-95"
-        }, {
-          default: vue.withCtx(() => [
-            isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "absolute z-50 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg",
-              onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-              }, ["stop"]))
-            }, [
-              vue.createElementVNode("div", _hoisted_5, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.swatches, (color) => {
-                  return vue.openBlock(), vue.createElementBlock("button", {
-                    key: color,
-                    type: "button",
-                    class: vue.normalizeClass(["w-8 h-8 rounded-lg border-2 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1", [
-                      __props.modelValue === color ? "border-primary-500 ring-2 ring-primary-500 ring-offset-1" : "border-transparent"
-                    ]]),
-                    style: vue.normalizeStyle({ backgroundColor: color }),
-                    title: color,
-                    onClick: ($event) => selectColor(color)
-                  }, [
-                    __props.modelValue === color ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
-                      key: 0,
-                      icon: "heroicons:check",
-                      class: vue.normalizeClass(["w-4 h-4 mx-auto", [
-                        ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
-                      ]])
-                    }, null, 8, ["class"])) : vue.createCommentVNode("", true)
-                  ], 14, _hoisted_6);
-                }), 128))
-              ]),
-              __props.showInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                vue.createElementVNode("input", {
-                  type: "color",
-                  value: __props.modelValue,
-                  class: "w-8 h-8 rounded cursor-pointer border-0 p-0",
-                  onInput: handleNativeInput
-                }, null, 40, _hoisted_8),
-                vue.withDirectives(vue.createElementVNode("input", {
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
-                  type: "text",
-                  class: "flex-1 px-2 py-1 text-sm font-mono border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white",
-                  placeholder: "#000000",
-                  onChange: handleInputChange,
-                  onKeyup: vue.withKeys(handleInputChange, ["enter"])
-                }, null, 544), [
-                  [vue.vModelText, inputValue.value]
-                ])
+        ], 10, _hoisted_3$2),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: teleportTarget.value,
+          disabled: teleportDisabled.value
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition duration-100 ease-out",
+            "enter-from-class": "opacity-0 scale-95",
+            "enter-to-class": "opacity-100 scale-100",
+            "leave-active-class": "transition duration-75 ease-in",
+            "leave-from-class": "opacity-100 scale-100",
+            "leave-to-class": "opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "absolute z-50 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg",
+                onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, [
+                vue.createElementVNode("div", _hoisted_5$1, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.swatches, (color) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: color,
+                      type: "button",
+                      class: vue.normalizeClass(["w-8 h-8 rounded-lg border-2 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1", [
+                        __props.modelValue === color ? "border-primary-500 ring-2 ring-primary-500 ring-offset-1" : "border-transparent"
+                      ]]),
+                      style: vue.normalizeStyle({ backgroundColor: color }),
+                      title: color,
+                      onClick: ($event) => selectColor(color)
+                    }, [
+                      __props.modelValue === color ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                        key: 0,
+                        icon: "heroicons:check",
+                        class: vue.normalizeClass(["w-4 h-4 mx-auto", [
+                          ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
+                        ]])
+                      }, null, 8, ["class"])) : vue.createCommentVNode("", true)
+                    ], 14, _hoisted_6$1);
+                  }), 128))
+                ]),
+                __props.showInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+                  vue.createElementVNode("input", {
+                    type: "color",
+                    value: __props.modelValue,
+                    class: "w-8 h-8 rounded cursor-pointer border-0 p-0",
+                    onInput: handleNativeInput
+                  }, null, 40, _hoisted_8),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+                    type: "text",
+                    class: "flex-1 px-2 py-1 text-sm font-mono border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white",
+                    placeholder: "#000000",
+                    onChange: handleInputChange,
+                    onKeyup: vue.withKeys(handleInputChange, ["enter"])
+                  }, null, 544), [
+                    [vue.vModelText, inputValue.value]
+                  ])
+                ])) : vue.createCommentVNode("", true)
               ])) : vue.createCommentVNode("", true)
-            ])) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        }),
-        isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "fixed inset-0 z-40",
-          onClick: closePicker
-        })) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "fixed inset-0 z-40",
+            onClick: closePicker
+          })) : vue.createCommentVNode("", true)
+        ], 8, ["to", "disabled"]))
       ]);
     };
   }
 });
-const _hoisted_1 = { class: "space-y-2" };
-const _hoisted_2 = {
+const _hoisted_1$1 = { class: "space-y-2" };
+const _hoisted_2$1 = {
   key: 0,
   class: "flex justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_3 = {
+const _hoisted_3$1 = {
   key: 1,
   class: "flex justify-between text-xs text-gray-500 dark:text-gray-400"
 };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeSlider",
   props: {
     modelValue: { default: () => [25, 75] },
@@ -1371,8 +1489,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(minValue.value)), 1),
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(maxValue.value)), 1)
         ])) : vue.createCommentVNode("", true),
@@ -1405,7 +1523,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             onMousedown: _cache[1] || (_cache[1] = ($event) => handleMouseDown("max"))
           }, null, 38)
         ], 2),
-        __props.showMinMax ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+        __props.showMinMax ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(__props.min)), 1),
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(__props.max)), 1)
         ])) : vue.createCommentVNode("", true)
@@ -1413,17 +1531,254 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1 = ["aria-expanded", "aria-controls"];
+const _hoisted_2 = ["id", "name", "placeholder", "disabled", "aria-controls"];
+const _hoisted_3 = { class: "flex items-center gap-1" };
+const _hoisted_4 = ["id", "aria-label", "aria-multiselectable"];
+const _hoisted_5 = ["aria-selected", "aria-disabled", "disabled", "onClick"];
+const _hoisted_6 = { class: "flex-1" };
+const _hoisted_7 = {
+  key: 1,
+  class: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400",
+  role: "status"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Combobox",
+  props: {
+    modelValue: {},
+    options: {},
+    placeholder: { default: "Select..." },
+    searchPlaceholder: { default: "Search..." },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    noResultsText: { default: "No results found" },
+    name: {},
+    id: {},
+    teleport: { type: [String, Boolean], default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const { id: generatedId, related } = useId.useId({ prefix: "combobox", id: props.id });
+    const inputId = vue.computed(() => props.id ?? generatedId.value);
+    const listboxId = vue.computed(() => related("listbox"));
+    const teleportDisabled = vue.computed(() => props.teleport === false);
+    const teleportTarget = vue.computed(() => props.teleport === false ? "body" : props.teleport);
+    const emit = __emit;
+    const containerRef = vue.ref();
+    const inputRef = vue.ref();
+    const isOpen = vue.ref(false);
+    const search = vue.ref("");
+    index.onClickOutside(containerRef, () => {
+      isOpen.value = false;
+    });
+    const filteredOptions = vue.computed(() => {
+      if (!search.value) return props.options;
+      const query = search.value.toLowerCase();
+      return props.options.filter(
+        (opt) => opt.label.toLowerCase().includes(query)
+      );
+    });
+    const selectedOptions = vue.computed(() => {
+      if (props.modelValue === null || props.modelValue === void 0) return [];
+      const values = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
+      return props.options.filter((opt) => values.includes(opt.value));
+    });
+    const displayValue = vue.computed(() => {
+      var _a;
+      if (selectedOptions.value.length === 0) return "";
+      if (props.multiple) {
+        return selectedOptions.value.map((o) => o.label).join(", ");
+      }
+      return ((_a = selectedOptions.value[0]) == null ? void 0 : _a.label) || "";
+    });
+    const isSelected = (option) => {
+      if (props.modelValue === null || props.modelValue === void 0) return false;
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(option.value);
+      }
+      return props.modelValue === option.value;
+    };
+    const toggleOption = (option) => {
+      if (option.disabled) return;
+      if (props.multiple) {
+        const currentValues = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+        const index2 = currentValues.indexOf(option.value);
+        if (index2 === -1) {
+          currentValues.push(option.value);
+        } else {
+          currentValues.splice(index2, 1);
+        }
+        emit("update:modelValue", currentValues);
+      } else {
+        emit("update:modelValue", option.value);
+        isOpen.value = false;
+        search.value = "";
+      }
+    };
+    const clear = () => {
+      emit("update:modelValue", props.multiple ? [] : null);
+      search.value = "";
+    };
+    const openDropdown = () => {
+      if (props.disabled) return;
+      isOpen.value = true;
+      vue.nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
+    vue.watch(isOpen, (open) => {
+      if (!open) {
+        search.value = "";
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "relative"
+      }, [
+        vue.createElementVNode("div", {
+          role: "combobox",
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": "listbox",
+          "aria-controls": listboxId.value,
+          class: vue.normalizeClass([
+            "flex min-h-[42px] w-full cursor-pointer items-center rounded-lg border bg-white px-3 py-2 transition-colors",
+            "dark:bg-gray-900",
+            __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800" : isOpen.value ? "border-primary ring-2 ring-primary/20" : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+          ]),
+          onClick: openDropdown
+        }, [
+          !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: vue.normalizeClass([
+              "flex-1 truncate text-sm",
+              selectedOptions.value.length ? "text-gray-900 dark:text-gray-100" : "text-gray-400 dark:text-gray-500"
+            ])
+          }, vue.toDisplayString(displayValue.value || __props.placeholder), 3)) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+            key: 1,
+            id: inputId.value,
+            ref_key: "inputRef",
+            ref: inputRef,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+            type: "text",
+            name: __props.name,
+            placeholder: __props.searchPlaceholder,
+            disabled: __props.disabled,
+            "aria-autocomplete": "list",
+            "aria-controls": listboxId.value,
+            class: "flex-1 border-none bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500",
+            onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            }, ["stop"]))
+          }, null, 8, _hoisted_2)), [
+            [vue.vModelText, search.value]
+          ]),
+          vue.createElementVNode("div", _hoisted_3, [
+            __props.clearable && selectedOptions.value.length > 0 && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "rounded p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+              "aria-label": "Clear selection",
+              onClick: vue.withModifiers(clear, ["stop"])
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:x",
+                class: "h-4 w-4",
+                "aria-hidden": "true"
+              })
+            ])) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              icon: "lucide:chevron-down",
+              class: vue.normalizeClass([
+                "h-4 w-4 text-gray-400 transition-transform",
+                isOpen.value && "rotate-180"
+              ]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])
+          ])
+        ], 10, _hoisted_1),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: teleportTarget.value,
+          disabled: teleportDisabled.value
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition duration-100 ease-out",
+            "enter-from-class": "transform scale-95 opacity-0",
+            "enter-to-class": "transform scale-100 opacity-100",
+            "leave-active-class": "transition duration-75 ease-in",
+            "leave-from-class": "transform scale-100 opacity-100",
+            "leave-to-class": "transform scale-95 opacity-0"
+          }, {
+            default: vue.withCtx(() => [
+              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                id: listboxId.value,
+                role: "listbox",
+                "aria-label": __props.placeholder,
+                "aria-multiselectable": __props.multiple || void 0,
+                class: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
+              }, [
+                filteredOptions.value.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(filteredOptions.value, (option) => {
+                  return vue.openBlock(), vue.createElementBlock("button", {
+                    key: option.value,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected(option),
+                    "aria-disabled": option.disabled || void 0,
+                    disabled: option.disabled,
+                    class: vue.normalizeClass([
+                      "flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors",
+                      option.disabled ? "cursor-not-allowed text-gray-400 dark:text-gray-500" : isSelected(option) ? "bg-primary/10 text-primary dark:bg-primary/20" : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                    ]),
+                    onClick: ($event) => toggleOption(option)
+                  }, [
+                    __props.multiple ? (vue.openBlock(), vue.createElementBlock("span", {
+                      key: 0,
+                      class: vue.normalizeClass([
+                        "flex h-4 w-4 items-center justify-center rounded border",
+                        isSelected(option) ? "border-primary bg-primary text-white" : "border-gray-300 dark:border-gray-600"
+                      ]),
+                      "aria-hidden": "true"
+                    }, [
+                      isSelected(option) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                        key: 0,
+                        icon: "lucide:check",
+                        class: "h-3 w-3"
+                      })) : vue.createCommentVNode("", true)
+                    ], 2)) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(option.label), 1),
+                    !__props.multiple && isSelected(option) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                      key: 1,
+                      icon: "lucide:check",
+                      class: "h-4 w-4 text-primary",
+                      "aria-hidden": "true"
+                    })) : vue.createCommentVNode("", true)
+                  ], 10, _hoisted_5);
+                }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, vue.toDisplayString(__props.noResultsText), 1))
+              ], 8, _hoisted_4)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 8, ["to", "disabled"]))
+      ], 512);
+    };
+  }
+});
 exports.Slider = Slider;
-exports._sfc_main = _sfc_main$c;
-exports._sfc_main$1 = _sfc_main$b;
-exports._sfc_main$10 = _sfc_main$1;
-exports._sfc_main$11 = _sfc_main;
-exports._sfc_main$2 = _sfc_main$a;
-exports._sfc_main$3 = _sfc_main$9;
-exports._sfc_main$4 = _sfc_main$8;
-exports._sfc_main$5 = _sfc_main$7;
-exports._sfc_main$6 = _sfc_main$6;
-exports._sfc_main$7 = _sfc_main$4;
-exports._sfc_main$8 = _sfc_main$3;
-exports._sfc_main$9 = _sfc_main$2;
-//# sourceMappingURL=RangeSlider.vue_vue_type_script_setup_true_lang-ClH-pyK8.cjs.map
+exports._sfc_main = _sfc_main$d;
+exports._sfc_main$1 = _sfc_main$c;
+exports._sfc_main$10 = _sfc_main$2;
+exports._sfc_main$11 = _sfc_main$1;
+exports._sfc_main$12 = _sfc_main;
+exports._sfc_main$2 = _sfc_main$b;
+exports._sfc_main$3 = _sfc_main$a;
+exports._sfc_main$4 = _sfc_main$9;
+exports._sfc_main$5 = _sfc_main$8;
+exports._sfc_main$6 = _sfc_main$7;
+exports._sfc_main$7 = _sfc_main$5;
+exports._sfc_main$8 = _sfc_main$4;
+exports._sfc_main$9 = _sfc_main$3;
+//# sourceMappingURL=Combobox.vue_vue_type_script_setup_true_lang-D9TIId4E.cjs.map