cognova 0.2.19 → 0.2.21

package/.output/server/chunks/build/SelectMenu-DPssg6zD.mjs

@@ -430,20 +430,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         }
       }
     });
-    const ui = computed(() => {
-      var _a;
-      return tv({ extend: tv(theme), ...((_a = appConfig.ui) == null ? void 0 : _a.selectMenu) || {} })({
-        color: color.value,
-        variant: props.variant,
-        size: selectSize == null ? void 0 : selectSize.value,
-        loading: props.loading,
-        highlight: highlight.value,
-        leading: isLeading.value || !!props.avatar || !!slots.leading,
-        trailing: isTrailing.value || !!slots.trailing,
-        fieldGroup: orientation.value,
-        virtualize: !!props.virtualize
-      });
-    });
+    const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} })({
+      color: color.value,
+      variant: props.variant,
+      size: selectSize?.value,
+      loading: props.loading,
+      highlight: highlight.value,
+      leading: isLeading.value || !!props.avatar || !!slots.leading,
+      trailing: isTrailing.value || !!slots.trailing,
+      fieldGroup: orientation.value,
+      virtualize: !!props.virtualize
+    }));
     function displayValue(value) {
       if (props.multiple && Array.isArray(value)) {
         const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
@@ -458,10 +455,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       });
     }
     const groups = computed(
-      () => {
-        var _a;
-        return ((_a = props.items) == null ? void 0 : _a.length) ? isArrayOfArray(props.items) ? props.items : [props.items] : [];
-      }
+      () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
     );
     const items = computed(() => groups.value.flatMap((group) => group));
     const filteredGroups = computed(() => {
@@ -501,21 +495,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const createItemPosition = computed(() => typeof props.createItem === "object" ? props.createItem.position : "bottom");
     const triggerRef = useTemplateRef("triggerRef");
     function onUpdate(value) {
-      var _a, _b, _c, _d, _e;
       if (toRaw(props.modelValue) === value) {
         return;
       }
-      if ((_a = props.modelModifiers) == null ? void 0 : _a.trim) {
-        value = (_b = value == null ? void 0 : value.trim()) != null ? _b : null;
+      if (props.modelModifiers?.trim) {
+        value = value?.trim() ?? null;
       }
-      if ((_c = props.modelModifiers) == null ? void 0 : _c.number) {
+      if (props.modelModifiers?.number) {
         value = looseToNumber(value);
       }
-      if ((_d = props.modelModifiers) == null ? void 0 : _d.nullable) {
-        value != null ? value : value = null;
+      if (props.modelModifiers?.nullable) {
+        value ??= null;
       }
-      if ((_e = props.modelModifiers) == null ? void 0 : _e.optional) {
-        value != null ? value : value = void 0;
+      if (props.modelModifiers?.optional) {
+        value ??= void 0;
       }
       const event = new Event("change", { target: { value } });
       emits("change", event);
@@ -550,7 +543,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       emits("create", searchTerm.value);
     }
     function onSelect(e, item) {
-      var _a;
       if (!isSelectItem(item)) {
         return;
       }
@@ -558,33 +550,28 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         e.preventDefault();
         return;
       }
-      (_a = item.onSelect) == null ? void 0 : _a.call(item, e);
+      item.onSelect?.(e);
     }
     function isSelectItem(item) {
       return typeof item === "object" && item !== null;
     }
     __expose({
-      triggerRef: toRef(() => {
-        var _a;
-        return (_a = triggerRef.value) == null ? void 0 : _a.$el;
-      })
+      triggerRef: toRef(() => triggerRef.value?.$el)
     });
     return (_ctx, _push, _parent, _attrs) => {
       _push(`<!--[-->`);
       _push(ssrRenderComponent(unref(DefineCreateItemTemplate), null, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
-          var _a, _b;
           if (_push2) {
             _push2(ssrRenderComponent(unref(ComboboxItem), {
               "data-slot": "item",
-              class: ui.value.item({ class: (_a = props.ui) == null ? void 0 : _a.item }),
+              class: ui.value.item({ class: props.ui?.item }),
               value: searchTerm.value,
               onSelect: onCreate
             }, {
               default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                var _a2, _b2;
                 if (_push3) {
-                  _push3(`<span data-slot="itemLabel" class="${ssrRenderClass(ui.value.itemLabel({ class: (_a2 = props.ui) == null ? void 0 : _a2.itemLabel }))}"${_scopeId2}>`);
+                  _push3(`<span data-slot="itemLabel" class="${ssrRenderClass(ui.value.itemLabel({ class: props.ui?.itemLabel }))}"${_scopeId2}>`);
                   ssrRenderSlot(_ctx.$slots, "create-item-label", { item: searchTerm.value }, () => {
                     _push3(`${ssrInterpolate(unref(t)("selectMenu.create", { label: searchTerm.value }))}`);
                   }, _push3, _parent3, _scopeId2);
@@ -593,7 +580,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   return [
                     createVNode("span", {
                       "data-slot": "itemLabel",
-                      class: ui.value.itemLabel({ class: (_b2 = props.ui) == null ? void 0 : _b2.itemLabel })
+                      class: ui.value.itemLabel({ class: props.ui?.itemLabel })
                     }, [
                       renderSlot(_ctx.$slots, "create-item-label", { item: searchTerm.value }, () => [
                         createTextVNode(toDisplayString(unref(t)("selectMenu.create", { label: searchTerm.value })), 1)
@@ -608,23 +595,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             return [
               createVNode(unref(ComboboxItem), {
                 "data-slot": "item",
-                class: ui.value.item({ class: (_b = props.ui) == null ? void 0 : _b.item }),
+                class: ui.value.item({ class: props.ui?.item }),
                 value: searchTerm.value,
                 onSelect: onCreate
               }, {
-                default: withCtx(() => {
-                  var _a2;
-                  return [
-                    createVNode("span", {
-                      "data-slot": "itemLabel",
-                      class: ui.value.itemLabel({ class: (_a2 = props.ui) == null ? void 0 : _a2.itemLabel })
-                    }, [
-                      renderSlot(_ctx.$slots, "create-item-label", { item: searchTerm.value }, () => [
-                        createTextVNode(toDisplayString(unref(t)("selectMenu.create", { label: searchTerm.value })), 1)
-                      ])
-                    ], 2)
-                  ];
-                }),
+                default: withCtx(() => [
+                  createVNode("span", {
+                    "data-slot": "itemLabel",
+                    class: ui.value.itemLabel({ class: props.ui?.itemLabel })
+                  }, [
+                    renderSlot(_ctx.$slots, "create-item-label", { item: searchTerm.value }, () => [
+                      createTextVNode(toDisplayString(unref(t)("selectMenu.create", { label: searchTerm.value })), 1)
+                    ])
+                  ], 2)
+                ]),
                 _: 3
               }, 8, ["class", "value"])
             ];
@@ -634,12 +618,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       }, _parent));
       _push(ssrRenderComponent(unref(DefineItemTemplate), null, {
         default: withCtx(({ item, index }, _push2, _parent2, _scopeId) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
           if (_push2) {
             if (isSelectItem(item) && item.type === "label") {
               _push2(ssrRenderComponent(unref(ComboboxLabel), {
                 "data-slot": "label",
-                class: ui.value.label({ class: [(_a = props.ui) == null ? void 0 : _a.label, (_b = item.ui) == null ? void 0 : _b.label, item.class] })
+                class: ui.value.label({ class: [props.ui?.label, item.ui?.label, item.class] })
               }, {
                 default: withCtx((_, _push3, _parent3, _scopeId2) => {
                   if (_push3) {
@@ -655,12 +638,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             } else if (isSelectItem(item) && item.type === "separator") {
               _push2(ssrRenderComponent(unref(ComboboxSeparator), {
                 "data-slot": "separator",
-                class: ui.value.separator({ class: [(_c = props.ui) == null ? void 0 : _c.separator, (_d = item.ui) == null ? void 0 : _d.separator, item.class] })
+                class: ui.value.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })
               }, null, _parent2, _scopeId));
             } else {
               _push2(ssrRenderComponent(unref(ComboboxItem), {
                 "data-slot": "item",
-                class: ui.value.item({ class: [(_e = props.ui) == null ? void 0 : _e.item, isSelectItem(item) && ((_f = item.ui) == null ? void 0 : _f.item), isSelectItem(item) && item.class] }),
+                class: ui.value.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] }),
                 disabled: isSelectItem(item) && item.disabled,
                 value: props.valueKey && isSelectItem(item) ? unref(get)(item, props.valueKey) : item,
                 onSelect: ($event) => onSelect($event, item)
@@ -672,40 +655,38 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       index,
                       ui: ui.value
                     }, () => {
-                      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
                       ssrRenderSlot(_ctx.$slots, "item-leading", {
                         item,
                         index,
                         ui: ui.value
                       }, () => {
-                        var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i2;
                         if (isSelectItem(item) && item.icon) {
                           _push3(ssrRenderComponent(_sfc_main$d, {
                             name: item.icon,
                             "data-slot": "itemLeadingIcon",
-                            class: ui.value.itemLeadingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemLeadingIcon, (_b3 = item.ui) == null ? void 0 : _b3.itemLeadingIcon] })
+                            class: ui.value.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })
                           }, null, _parent3, _scopeId2));
                         } else if (isSelectItem(item) && item.avatar) {
                           _push3(ssrRenderComponent(_sfc_main$b, mergeProps({
-                            size: ((_c3 = item.ui) == null ? void 0 : _c3.itemLeadingAvatarSize) || ((_d3 = props.ui) == null ? void 0 : _d3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
+                            size: item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
                           }, item.avatar, {
                             "data-slot": "itemLeadingAvatar",
-                            class: ui.value.itemLeadingAvatar({ class: [(_e3 = props.ui) == null ? void 0 : _e3.itemLeadingAvatar, (_f3 = item.ui) == null ? void 0 : _f3.itemLeadingAvatar] })
+                            class: ui.value.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })
                           }), null, _parent3, _scopeId2));
                         } else if (isSelectItem(item) && item.chip) {
                           _push3(ssrRenderComponent(_sfc_main$c, mergeProps({
-                            size: ((_g3 = props.ui) == null ? void 0 : _g3.itemLeadingChipSize) || ui.value.itemLeadingChipSize(),
+                            size: props.ui?.itemLeadingChipSize || ui.value.itemLeadingChipSize(),
                             inset: "",
                             standalone: ""
                           }, item.chip, {
                             "data-slot": "itemLeadingChip",
-                            class: ui.value.itemLeadingChip({ class: [(_h3 = props.ui) == null ? void 0 : _h3.itemLeadingChip, (_i2 = item.ui) == null ? void 0 : _i2.itemLeadingChip] })
+                            class: ui.value.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })
                           }), null, _parent3, _scopeId2));
                         } else {
                           _push3(`<!---->`);
                         }
                       }, _push3, _parent3, _scopeId2);
-                      _push3(`<span data-slot="itemWrapper" class="${ssrRenderClass(ui.value.itemWrapper({ class: [(_a2 = props.ui) == null ? void 0 : _a2.itemWrapper, isSelectItem(item) && ((_b2 = item.ui) == null ? void 0 : _b2.itemWrapper)] }))}"${_scopeId2}><span data-slot="itemLabel" class="${ssrRenderClass(ui.value.itemLabel({ class: [(_c2 = props.ui) == null ? void 0 : _c2.itemLabel, isSelectItem(item) && ((_d2 = item.ui) == null ? void 0 : _d2.itemLabel)] }))}"${_scopeId2}>`);
+                      _push3(`<span data-slot="itemWrapper" class="${ssrRenderClass(ui.value.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] }))}"${_scopeId2}><span data-slot="itemLabel" class="${ssrRenderClass(ui.value.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] }))}"${_scopeId2}>`);
                       ssrRenderSlot(_ctx.$slots, "item-label", {
                         item,
                         index
@@ -714,7 +695,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       }, _push3, _parent3, _scopeId2);
                       _push3(`</span>`);
                       if (isSelectItem(item) && (unref(get)(item, props.descriptionKey) || !!slots["item-description"])) {
-                        _push3(`<span data-slot="itemDescription" class="${ssrRenderClass(ui.value.itemDescription({ class: [(_e2 = props.ui) == null ? void 0 : _e2.itemDescription, isSelectItem(item) && ((_f2 = item.ui) == null ? void 0 : _f2.itemDescription)] }))}"${_scopeId2}>`);
+                        _push3(`<span data-slot="itemDescription" class="${ssrRenderClass(ui.value.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] }))}"${_scopeId2}>`);
                         ssrRenderSlot(_ctx.$slots, "item-description", {
                           item,
                           index
@@ -725,7 +706,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       } else {
                         _push3(`<!---->`);
                       }
-                      _push3(`</span><span data-slot="itemTrailing" class="${ssrRenderClass(ui.value.itemTrailing({ class: [(_g2 = props.ui) == null ? void 0 : _g2.itemTrailing, isSelectItem(item) && ((_h2 = item.ui) == null ? void 0 : _h2.itemTrailing)] }))}"${_scopeId2}>`);
+                      _push3(`</span><span data-slot="itemTrailing" class="${ssrRenderClass(ui.value.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] }))}"${_scopeId2}>`);
                       ssrRenderSlot(_ctx.$slots, "item-trailing", {
                         item,
                         index,
@@ -733,19 +714,18 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       }, null, _push3, _parent3, _scopeId2);
                       _push3(ssrRenderComponent(unref(ComboboxItemIndicator), { "as-child": "" }, {
                         default: withCtx((_2, _push4, _parent4, _scopeId3) => {
-                          var _a3, _b3, _c3, _d3;
                           if (_push4) {
                             _push4(ssrRenderComponent(_sfc_main$d, {
                               name: __props.selectedIcon || unref(appConfig).ui.icons.check,
                               "data-slot": "itemTrailingIcon",
-                              class: ui.value.itemTrailingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemTrailingIcon, isSelectItem(item) && ((_b3 = item.ui) == null ? void 0 : _b3.itemTrailingIcon)] })
+                              class: ui.value.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })
                             }, null, _parent4, _scopeId3));
                           } else {
                             return [
                               createVNode(_sfc_main$d, {
                                 name: __props.selectedIcon || unref(appConfig).ui.icons.check,
                                 "data-slot": "itemTrailingIcon",
-                                class: ui.value.itemTrailingIcon({ class: [(_c3 = props.ui) == null ? void 0 : _c3.itemTrailingIcon, isSelectItem(item) && ((_d3 = item.ui) == null ? void 0 : _d3.itemTrailingIcon)] })
+                                class: ui.value.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })
                               }, null, 8, ["name", "class"])
                             ];
                           }
@@ -760,91 +740,82 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         item,
                         index,
                         ui: ui.value
-                      }, () => {
-                        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-                        return [
-                          renderSlot(_ctx.$slots, "item-leading", {
-                            item,
-                            index,
-                            ui: ui.value
-                          }, () => {
-                            var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i2;
-                            return [
-                              isSelectItem(item) && item.icon ? (openBlock(), createBlock(_sfc_main$d, {
-                                key: 0,
-                                name: item.icon,
-                                "data-slot": "itemLeadingIcon",
-                                class: ui.value.itemLeadingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemLeadingIcon, (_b3 = item.ui) == null ? void 0 : _b3.itemLeadingIcon] })
-                              }, null, 8, ["name", "class"])) : isSelectItem(item) && item.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
-                                key: 1,
-                                size: ((_c3 = item.ui) == null ? void 0 : _c3.itemLeadingAvatarSize) || ((_d3 = props.ui) == null ? void 0 : _d3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
-                              }, item.avatar, {
-                                "data-slot": "itemLeadingAvatar",
-                                class: ui.value.itemLeadingAvatar({ class: [(_e3 = props.ui) == null ? void 0 : _e3.itemLeadingAvatar, (_f3 = item.ui) == null ? void 0 : _f3.itemLeadingAvatar] })
-                              }), null, 16, ["size", "class"])) : isSelectItem(item) && item.chip ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
-                                key: 2,
-                                size: ((_g3 = props.ui) == null ? void 0 : _g3.itemLeadingChipSize) || ui.value.itemLeadingChipSize(),
-                                inset: "",
-                                standalone: ""
-                              }, item.chip, {
-                                "data-slot": "itemLeadingChip",
-                                class: ui.value.itemLeadingChip({ class: [(_h3 = props.ui) == null ? void 0 : _h3.itemLeadingChip, (_i2 = item.ui) == null ? void 0 : _i2.itemLeadingChip] })
-                              }), null, 16, ["size", "class"])) : createCommentVNode("", true)
-                            ];
-                          }),
+                      }, () => [
+                        renderSlot(_ctx.$slots, "item-leading", {
+                          item,
+                          index,
+                          ui: ui.value
+                        }, () => [
+                          isSelectItem(item) && item.icon ? (openBlock(), createBlock(_sfc_main$d, {
+                            key: 0,
+                            name: item.icon,
+                            "data-slot": "itemLeadingIcon",
+                            class: ui.value.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })
+                          }, null, 8, ["name", "class"])) : isSelectItem(item) && item.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
+                            key: 1,
+                            size: item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
+                          }, item.avatar, {
+                            "data-slot": "itemLeadingAvatar",
+                            class: ui.value.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })
+                          }), null, 16, ["size", "class"])) : isSelectItem(item) && item.chip ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
+                            key: 2,
+                            size: props.ui?.itemLeadingChipSize || ui.value.itemLeadingChipSize(),
+                            inset: "",
+                            standalone: ""
+                          }, item.chip, {
+                            "data-slot": "itemLeadingChip",
+                            class: ui.value.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })
+                          }), null, 16, ["size", "class"])) : createCommentVNode("", true)
+                        ]),
+                        createVNode("span", {
+                          "data-slot": "itemWrapper",
+                          class: ui.value.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })
+                        }, [
                           createVNode("span", {
-                            "data-slot": "itemWrapper",
-                            class: ui.value.itemWrapper({ class: [(_a2 = props.ui) == null ? void 0 : _a2.itemWrapper, isSelectItem(item) && ((_b2 = item.ui) == null ? void 0 : _b2.itemWrapper)] })
+                            "data-slot": "itemLabel",
+                            class: ui.value.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })
                           }, [
-                            createVNode("span", {
-                              "data-slot": "itemLabel",
-                              class: ui.value.itemLabel({ class: [(_c2 = props.ui) == null ? void 0 : _c2.itemLabel, isSelectItem(item) && ((_d2 = item.ui) == null ? void 0 : _d2.itemLabel)] })
-                            }, [
-                              renderSlot(_ctx.$slots, "item-label", {
-                                item,
-                                index
-                              }, () => [
-                                createTextVNode(toDisplayString(isSelectItem(item) ? unref(get)(item, props.labelKey) : item), 1)
-                              ])
-                            ], 2),
-                            isSelectItem(item) && (unref(get)(item, props.descriptionKey) || !!slots["item-description"]) ? (openBlock(), createBlock("span", {
-                              key: 0,
-                              "data-slot": "itemDescription",
-                              class: ui.value.itemDescription({ class: [(_e2 = props.ui) == null ? void 0 : _e2.itemDescription, isSelectItem(item) && ((_f2 = item.ui) == null ? void 0 : _f2.itemDescription)] })
-                            }, [
-                              renderSlot(_ctx.$slots, "item-description", {
-                                item,
-                                index
-                              }, () => [
-                                createTextVNode(toDisplayString(unref(get)(item, props.descriptionKey)), 1)
-                              ])
-                            ], 2)) : createCommentVNode("", true)
+                            renderSlot(_ctx.$slots, "item-label", {
+                              item,
+                              index
+                            }, () => [
+                              createTextVNode(toDisplayString(isSelectItem(item) ? unref(get)(item, props.labelKey) : item), 1)
+                            ])
                           ], 2),
-                          createVNode("span", {
-                            "data-slot": "itemTrailing",
-                            class: ui.value.itemTrailing({ class: [(_g2 = props.ui) == null ? void 0 : _g2.itemTrailing, isSelectItem(item) && ((_h2 = item.ui) == null ? void 0 : _h2.itemTrailing)] })
+                          isSelectItem(item) && (unref(get)(item, props.descriptionKey) || !!slots["item-description"]) ? (openBlock(), createBlock("span", {
+                            key: 0,
+                            "data-slot": "itemDescription",
+                            class: ui.value.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })
                           }, [
-                            renderSlot(_ctx.$slots, "item-trailing", {
+                            renderSlot(_ctx.$slots, "item-description", {
                               item,
-                              index,
-                              ui: ui.value
-                            }),
-                            createVNode(unref(ComboboxItemIndicator), { "as-child": "" }, {
-                              default: withCtx(() => {
-                                var _a3, _b3;
-                                return [
-                                  createVNode(_sfc_main$d, {
-                                    name: __props.selectedIcon || unref(appConfig).ui.icons.check,
-                                    "data-slot": "itemTrailingIcon",
-                                    class: ui.value.itemTrailingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemTrailingIcon, isSelectItem(item) && ((_b3 = item.ui) == null ? void 0 : _b3.itemTrailingIcon)] })
-                                  }, null, 8, ["name", "class"])
-                                ];
-                              }),
-                              _: 2
-                            }, 1024)
-                          ], 2)
-                        ];
-                      })
+                              index
+                            }, () => [
+                              createTextVNode(toDisplayString(unref(get)(item, props.descriptionKey)), 1)
+                            ])
+                          ], 2)) : createCommentVNode("", true)
+                        ], 2),
+                        createVNode("span", {
+                          "data-slot": "itemTrailing",
+                          class: ui.value.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })
+                        }, [
+                          renderSlot(_ctx.$slots, "item-trailing", {
+                            item,
+                            index,
+                            ui: ui.value
+                          }),
+                          createVNode(unref(ComboboxItemIndicator), { "as-child": "" }, {
+                            default: withCtx(() => [
+                              createVNode(_sfc_main$d, {
+                                name: __props.selectedIcon || unref(appConfig).ui.icons.check,
+                                "data-slot": "itemTrailingIcon",
+                                class: ui.value.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })
+                              }, null, 8, ["name", "class"])
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ], 2)
+                      ])
                     ];
                   }
                 }),
@@ -856,7 +827,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               isSelectItem(item) && item.type === "label" ? (openBlock(), createBlock(unref(ComboboxLabel), {
                 key: 0,
                 "data-slot": "label",
-                class: ui.value.label({ class: [(_g = props.ui) == null ? void 0 : _g.label, (_h = item.ui) == null ? void 0 : _h.label, item.class] })
+                class: ui.value.label({ class: [props.ui?.label, item.ui?.label, item.class] })
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(get)(item, props.labelKey)), 1)
@@ -865,11 +836,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
               }, 1032, ["class"])) : isSelectItem(item) && item.type === "separator" ? (openBlock(), createBlock(unref(ComboboxSeparator), {
                 key: 1,
                 "data-slot": "separator",
-                class: ui.value.separator({ class: [(_i = props.ui) == null ? void 0 : _i.separator, (_j = item.ui) == null ? void 0 : _j.separator, item.class] })
+                class: ui.value.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })
               }, null, 8, ["class"])) : (openBlock(), createBlock(unref(ComboboxItem), {
                 key: 2,
                 "data-slot": "item",
-                class: ui.value.item({ class: [(_k = props.ui) == null ? void 0 : _k.item, isSelectItem(item) && ((_l = item.ui) == null ? void 0 : _l.item), isSelectItem(item) && item.class] }),
+                class: ui.value.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] }),
                 disabled: isSelectItem(item) && item.disabled,
                 value: props.valueKey && isSelectItem(item) ? unref(get)(item, props.valueKey) : item,
                 onSelect: ($event) => onSelect($event, item)
@@ -879,91 +850,82 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                     item,
                     index,
                     ui: ui.value
-                  }, () => {
-                    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-                    return [
-                      renderSlot(_ctx.$slots, "item-leading", {
-                        item,
-                        index,
-                        ui: ui.value
-                      }, () => {
-                        var _a3, _b3, _c3, _d3, _e3, _f3, _g3, _h3, _i2;
-                        return [
-                          isSelectItem(item) && item.icon ? (openBlock(), createBlock(_sfc_main$d, {
-                            key: 0,
-                            name: item.icon,
-                            "data-slot": "itemLeadingIcon",
-                            class: ui.value.itemLeadingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemLeadingIcon, (_b3 = item.ui) == null ? void 0 : _b3.itemLeadingIcon] })
-                          }, null, 8, ["name", "class"])) : isSelectItem(item) && item.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
-                            key: 1,
-                            size: ((_c3 = item.ui) == null ? void 0 : _c3.itemLeadingAvatarSize) || ((_d3 = props.ui) == null ? void 0 : _d3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
-                          }, item.avatar, {
-                            "data-slot": "itemLeadingAvatar",
-                            class: ui.value.itemLeadingAvatar({ class: [(_e3 = props.ui) == null ? void 0 : _e3.itemLeadingAvatar, (_f3 = item.ui) == null ? void 0 : _f3.itemLeadingAvatar] })
-                          }), null, 16, ["size", "class"])) : isSelectItem(item) && item.chip ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
-                            key: 2,
-                            size: ((_g3 = props.ui) == null ? void 0 : _g3.itemLeadingChipSize) || ui.value.itemLeadingChipSize(),
-                            inset: "",
-                            standalone: ""
-                          }, item.chip, {
-                            "data-slot": "itemLeadingChip",
-                            class: ui.value.itemLeadingChip({ class: [(_h3 = props.ui) == null ? void 0 : _h3.itemLeadingChip, (_i2 = item.ui) == null ? void 0 : _i2.itemLeadingChip] })
-                          }), null, 16, ["size", "class"])) : createCommentVNode("", true)
-                        ];
-                      }),
+                  }, () => [
+                    renderSlot(_ctx.$slots, "item-leading", {
+                      item,
+                      index,
+                      ui: ui.value
+                    }, () => [
+                      isSelectItem(item) && item.icon ? (openBlock(), createBlock(_sfc_main$d, {
+                        key: 0,
+                        name: item.icon,
+                        "data-slot": "itemLeadingIcon",
+                        class: ui.value.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })
+                      }, null, 8, ["name", "class"])) : isSelectItem(item) && item.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
+                        key: 1,
+                        size: item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
+                      }, item.avatar, {
+                        "data-slot": "itemLeadingAvatar",
+                        class: ui.value.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })
+                      }), null, 16, ["size", "class"])) : isSelectItem(item) && item.chip ? (openBlock(), createBlock(_sfc_main$c, mergeProps({
+                        key: 2,
+                        size: props.ui?.itemLeadingChipSize || ui.value.itemLeadingChipSize(),
+                        inset: "",
+                        standalone: ""
+                      }, item.chip, {
+                        "data-slot": "itemLeadingChip",
+                        class: ui.value.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })
+                      }), null, 16, ["size", "class"])) : createCommentVNode("", true)
+                    ]),
+                    createVNode("span", {
+                      "data-slot": "itemWrapper",
+                      class: ui.value.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })
+                    }, [
                       createVNode("span", {
-                        "data-slot": "itemWrapper",
-                        class: ui.value.itemWrapper({ class: [(_a2 = props.ui) == null ? void 0 : _a2.itemWrapper, isSelectItem(item) && ((_b2 = item.ui) == null ? void 0 : _b2.itemWrapper)] })
+                        "data-slot": "itemLabel",
+                        class: ui.value.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })
                       }, [
-                        createVNode("span", {
-                          "data-slot": "itemLabel",
-                          class: ui.value.itemLabel({ class: [(_c2 = props.ui) == null ? void 0 : _c2.itemLabel, isSelectItem(item) && ((_d2 = item.ui) == null ? void 0 : _d2.itemLabel)] })
-                        }, [
-                          renderSlot(_ctx.$slots, "item-label", {
-                            item,
-                            index
-                          }, () => [
-                            createTextVNode(toDisplayString(isSelectItem(item) ? unref(get)(item, props.labelKey) : item), 1)
-                          ])
-                        ], 2),
-                        isSelectItem(item) && (unref(get)(item, props.descriptionKey) || !!slots["item-description"]) ? (openBlock(), createBlock("span", {
-                          key: 0,
-                          "data-slot": "itemDescription",
-                          class: ui.value.itemDescription({ class: [(_e2 = props.ui) == null ? void 0 : _e2.itemDescription, isSelectItem(item) && ((_f2 = item.ui) == null ? void 0 : _f2.itemDescription)] })
-                        }, [
-                          renderSlot(_ctx.$slots, "item-description", {
-                            item,
-                            index
-                          }, () => [
-                            createTextVNode(toDisplayString(unref(get)(item, props.descriptionKey)), 1)
-                          ])
-                        ], 2)) : createCommentVNode("", true)
+                        renderSlot(_ctx.$slots, "item-label", {
+                          item,
+                          index
+                        }, () => [
+                          createTextVNode(toDisplayString(isSelectItem(item) ? unref(get)(item, props.labelKey) : item), 1)
+                        ])
                       ], 2),
-                      createVNode("span", {
-                        "data-slot": "itemTrailing",
-                        class: ui.value.itemTrailing({ class: [(_g2 = props.ui) == null ? void 0 : _g2.itemTrailing, isSelectItem(item) && ((_h2 = item.ui) == null ? void 0 : _h2.itemTrailing)] })
+                      isSelectItem(item) && (unref(get)(item, props.descriptionKey) || !!slots["item-description"]) ? (openBlock(), createBlock("span", {
+                        key: 0,
+                        "data-slot": "itemDescription",
+                        class: ui.value.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })
                       }, [
-                        renderSlot(_ctx.$slots, "item-trailing", {
+                        renderSlot(_ctx.$slots, "item-description", {
                           item,
-                          index,
-                          ui: ui.value
-                        }),
-                        createVNode(unref(ComboboxItemIndicator), { "as-child": "" }, {
-                          default: withCtx(() => {
-                            var _a3, _b3;
-                            return [
-                              createVNode(_sfc_main$d, {
-                                name: __props.selectedIcon || unref(appConfig).ui.icons.check,
-                                "data-slot": "itemTrailingIcon",
-                                class: ui.value.itemTrailingIcon({ class: [(_a3 = props.ui) == null ? void 0 : _a3.itemTrailingIcon, isSelectItem(item) && ((_b3 = item.ui) == null ? void 0 : _b3.itemTrailingIcon)] })
-                              }, null, 8, ["name", "class"])
-                            ];
-                          }),
-                          _: 2
-                        }, 1024)
-                      ], 2)
-                    ];
-                  })
+                          index
+                        }, () => [
+                          createTextVNode(toDisplayString(unref(get)(item, props.descriptionKey)), 1)
+                        ])
+                      ], 2)) : createCommentVNode("", true)
+                    ], 2),
+                    createVNode("span", {
+                      "data-slot": "itemTrailing",
+                      class: ui.value.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })
+                    }, [
+                      renderSlot(_ctx.$slots, "item-trailing", {
+                        item,
+                        index,
+                        ui: ui.value
+                      }),
+                      createVNode(unref(ComboboxItemIndicator), { "as-child": "" }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$d, {
+                            name: __props.selectedIcon || unref(appConfig).ui.icons.check,
+                            "data-slot": "itemTrailingIcon",
+                            class: ui.value.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })
+                          }, null, 8, ["name", "class"])
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ], 2)
+                  ])
                 ]),
                 _: 2
               }, 1032, ["class", "disabled", "value", "onSelect"]))
@@ -984,38 +946,35 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           if (_push2) {
             _push2(ssrRenderComponent(unref(ComboboxAnchor), { "as-child": "" }, {
               default: withCtx((_, _push3, _parent3, _scopeId2) => {
-                var _a, _b;
                 if (_push3) {
                   _push3(ssrRenderComponent(unref(ComboboxTrigger), {
                     ref_key: "triggerRef",
                     ref: triggerRef,
                     "data-slot": "base",
-                    class: ui.value.base({ class: [(_a = props.ui) == null ? void 0 : _a.base, props.class] }),
+                    class: ui.value.base({ class: [props.ui?.base, props.class] }),
                     tabindex: "0"
                   }, {
                     default: withCtx((_2, _push4, _parent4, _scopeId3) => {
-                      var _a2, _b2, _c, _d;
                       if (_push4) {
                         if (unref(isLeading) || !!__props.avatar || !!slots.leading) {
-                          _push4(`<span data-slot="leading" class="${ssrRenderClass(ui.value.leading({ class: (_a2 = props.ui) == null ? void 0 : _a2.leading }))}"${_scopeId3}>`);
+                          _push4(`<span data-slot="leading" class="${ssrRenderClass(ui.value.leading({ class: props.ui?.leading }))}"${_scopeId3}>`);
                           ssrRenderSlot(_ctx.$slots, "leading", {
                             modelValue,
                             open,
                             ui: ui.value
                           }, () => {
-                            var _a3, _b3, _c2;
                             if (unref(isLeading) && unref(leadingIconName)) {
                               _push4(ssrRenderComponent(_sfc_main$d, {
                                 name: unref(leadingIconName),
                                 "data-slot": "leadingIcon",
-                                class: ui.value.leadingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.leadingIcon })
+                                class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
                               }, null, _parent4, _scopeId3));
                             } else if (!!__props.avatar) {
                               _push4(ssrRenderComponent(_sfc_main$b, mergeProps({
-                                size: ((_b3 = props.ui) == null ? void 0 : _b3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
+                                size: props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
                               }, __props.avatar, {
                                 "data-slot": "itemLeadingAvatar",
-                                class: ui.value.itemLeadingAvatar({ class: (_c2 = props.ui) == null ? void 0 : _c2.itemLeadingAvatar })
+                                class: ui.value.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })
                               }), null, _parent4, _scopeId3));
                             } else {
                               _push4(`<!---->`);
@@ -1032,30 +991,28 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         }, () => {
                           _push4(`<!--[-->`);
                           ssrRenderList([displayValue(modelValue)], (displayedModelValue) => {
-                            var _a3, _b3, _c2;
                             _push4(`<!--[-->`);
                             if (displayedModelValue !== void 0 && displayedModelValue !== null) {
-                              _push4(`<span data-slot="value" class="${ssrRenderClass(ui.value.value({ class: (_a3 = props.ui) == null ? void 0 : _a3.value }))}"${_scopeId3}>${ssrInterpolate(displayedModelValue)}</span>`);
+                              _push4(`<span data-slot="value" class="${ssrRenderClass(ui.value.value({ class: props.ui?.value }))}"${_scopeId3}>${ssrInterpolate(displayedModelValue)}</span>`);
                             } else {
-                              _push4(`<span data-slot="placeholder" class="${ssrRenderClass(ui.value.placeholder({ class: (_b3 = props.ui) == null ? void 0 : _b3.placeholder }))}"${_scopeId3}>${ssrInterpolate((_c2 = __props.placeholder) != null ? _c2 : "\xA0")}</span>`);
+                              _push4(`<span data-slot="placeholder" class="${ssrRenderClass(ui.value.placeholder({ class: props.ui?.placeholder }))}"${_scopeId3}>${ssrInterpolate(__props.placeholder ?? " ")}</span>`);
                             }
                             _push4(`<!--]-->`);
                           });
                           _push4(`<!--]-->`);
                         }, _push4, _parent4, _scopeId3);
                         if (unref(isTrailing) || !!slots.trailing) {
-                          _push4(`<span data-slot="trailing" class="${ssrRenderClass(ui.value.trailing({ class: (_b2 = props.ui) == null ? void 0 : _b2.trailing }))}"${_scopeId3}>`);
+                          _push4(`<span data-slot="trailing" class="${ssrRenderClass(ui.value.trailing({ class: props.ui?.trailing }))}"${_scopeId3}>`);
                           ssrRenderSlot(_ctx.$slots, "trailing", {
                             modelValue,
                             open,
                             ui: ui.value
                           }, () => {
-                            var _a3;
                             if (unref(trailingIconName)) {
                               _push4(ssrRenderComponent(_sfc_main$d, {
                                 name: unref(trailingIconName),
                                 "data-slot": "trailingIcon",
-                                class: ui.value.trailingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.trailingIcon })
+                                class: ui.value.trailingIcon({ class: props.ui?.trailingIcon })
                               }, null, _parent4, _scopeId3));
                             } else {
                               _push4(`<!---->`);
@@ -1070,29 +1027,26 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                           unref(isLeading) || !!__props.avatar || !!slots.leading ? (openBlock(), createBlock("span", {
                             key: 0,
                             "data-slot": "leading",
-                            class: ui.value.leading({ class: (_c = props.ui) == null ? void 0 : _c.leading })
+                            class: ui.value.leading({ class: props.ui?.leading })
                           }, [
                             renderSlot(_ctx.$slots, "leading", {
                               modelValue,
                               open,
                               ui: ui.value
-                            }, () => {
-                              var _a3, _b3, _c2;
-                              return [
-                                unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(leadingIconName),
-                                  "data-slot": "leadingIcon",
-                                  class: ui.value.leadingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.leadingIcon })
-                                }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
-                                  key: 1,
-                                  size: ((_b3 = props.ui) == null ? void 0 : _b3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
-                                }, __props.avatar, {
-                                  "data-slot": "itemLeadingAvatar",
-                                  class: ui.value.itemLeadingAvatar({ class: (_c2 = props.ui) == null ? void 0 : _c2.itemLeadingAvatar })
-                                }), null, 16, ["size", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
+                            }, () => [
+                              unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
+                                key: 0,
+                                name: unref(leadingIconName),
+                                "data-slot": "leadingIcon",
+                                class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
+                              }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
+                                key: 1,
+                                size: props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
+                              }, __props.avatar, {
+                                "data-slot": "itemLeadingAvatar",
+                                class: ui.value.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })
+                              }), null, 16, ["size", "class"])) : createCommentVNode("", true)
+                            ])
                           ], 2)) : createCommentVNode("", true),
                           renderSlot(_ctx.$slots, "default", {
                             modelValue,
@@ -1100,40 +1054,36 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                             ui: ui.value
                           }, () => [
                             (openBlock(true), createBlock(Fragment, null, renderList([displayValue(modelValue)], (displayedModelValue) => {
-                              var _a3, _b3, _c2;
                               return openBlock(), createBlock(Fragment, { key: displayedModelValue }, [
                                 displayedModelValue !== void 0 && displayedModelValue !== null ? (openBlock(), createBlock("span", {
                                   key: 0,
                                   "data-slot": "value",
-                                  class: ui.value.value({ class: (_a3 = props.ui) == null ? void 0 : _a3.value })
+                                  class: ui.value.value({ class: props.ui?.value })
                                 }, toDisplayString(displayedModelValue), 3)) : (openBlock(), createBlock("span", {
                                   key: 1,
                                   "data-slot": "placeholder",
-                                  class: ui.value.placeholder({ class: (_b3 = props.ui) == null ? void 0 : _b3.placeholder })
-                                }, toDisplayString((_c2 = __props.placeholder) != null ? _c2 : "\xA0"), 3))
+                                  class: ui.value.placeholder({ class: props.ui?.placeholder })
+                                }, toDisplayString(__props.placeholder ?? " "), 3))
                               ], 64);
                             }), 128))
                           ]),
                           unref(isTrailing) || !!slots.trailing ? (openBlock(), createBlock("span", {
                             key: 1,
                             "data-slot": "trailing",
-                            class: ui.value.trailing({ class: (_d = props.ui) == null ? void 0 : _d.trailing })
+                            class: ui.value.trailing({ class: props.ui?.trailing })
                           }, [
                             renderSlot(_ctx.$slots, "trailing", {
                               modelValue,
                               open,
                               ui: ui.value
-                            }, () => {
-                              var _a3;
-                              return [
-                                unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(trailingIconName),
-                                  "data-slot": "trailingIcon",
-                                  class: ui.value.trailingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.trailingIcon })
-                                }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
+                            }, () => [
+                              unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
+                                key: 0,
+                                name: unref(trailingIconName),
+                                "data-slot": "trailingIcon",
+                                class: ui.value.trailingIcon({ class: props.ui?.trailingIcon })
+                              }, null, 8, ["name", "class"])) : createCommentVNode("", true)
+                            ])
                           ], 2)) : createCommentVNode("", true)
                         ];
                       }
@@ -1146,82 +1096,72 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                       ref_key: "triggerRef",
                       ref: triggerRef,
                       "data-slot": "base",
-                      class: ui.value.base({ class: [(_b = props.ui) == null ? void 0 : _b.base, props.class] }),
+                      class: ui.value.base({ class: [props.ui?.base, props.class] }),
                       tabindex: "0"
                     }, {
-                      default: withCtx(() => {
-                        var _a2, _b2;
-                        return [
-                          unref(isLeading) || !!__props.avatar || !!slots.leading ? (openBlock(), createBlock("span", {
-                            key: 0,
-                            "data-slot": "leading",
-                            class: ui.value.leading({ class: (_a2 = props.ui) == null ? void 0 : _a2.leading })
-                          }, [
-                            renderSlot(_ctx.$slots, "leading", {
-                              modelValue,
-                              open,
-                              ui: ui.value
-                            }, () => {
-                              var _a3, _b3, _c;
-                              return [
-                                unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(leadingIconName),
-                                  "data-slot": "leadingIcon",
-                                  class: ui.value.leadingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.leadingIcon })
-                                }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
-                                  key: 1,
-                                  size: ((_b3 = props.ui) == null ? void 0 : _b3.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
-                                }, __props.avatar, {
-                                  "data-slot": "itemLeadingAvatar",
-                                  class: ui.value.itemLeadingAvatar({ class: (_c = props.ui) == null ? void 0 : _c.itemLeadingAvatar })
-                                }), null, 16, ["size", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
-                          ], 2)) : createCommentVNode("", true),
-                          renderSlot(_ctx.$slots, "default", {
+                      default: withCtx(() => [
+                        unref(isLeading) || !!__props.avatar || !!slots.leading ? (openBlock(), createBlock("span", {
+                          key: 0,
+                          "data-slot": "leading",
+                          class: ui.value.leading({ class: props.ui?.leading })
+                        }, [
+                          renderSlot(_ctx.$slots, "leading", {
                             modelValue,
                             open,
                             ui: ui.value
                           }, () => [
-                            (openBlock(true), createBlock(Fragment, null, renderList([displayValue(modelValue)], (displayedModelValue) => {
-                              var _a3, _b3, _c;
-                              return openBlock(), createBlock(Fragment, { key: displayedModelValue }, [
-                                displayedModelValue !== void 0 && displayedModelValue !== null ? (openBlock(), createBlock("span", {
-                                  key: 0,
-                                  "data-slot": "value",
-                                  class: ui.value.value({ class: (_a3 = props.ui) == null ? void 0 : _a3.value })
-                                }, toDisplayString(displayedModelValue), 3)) : (openBlock(), createBlock("span", {
-                                  key: 1,
-                                  "data-slot": "placeholder",
-                                  class: ui.value.placeholder({ class: (_b3 = props.ui) == null ? void 0 : _b3.placeholder })
-                                }, toDisplayString((_c = __props.placeholder) != null ? _c : "\xA0"), 3))
-                              ], 64);
-                            }), 128))
-                          ]),
-                          unref(isTrailing) || !!slots.trailing ? (openBlock(), createBlock("span", {
-                            key: 1,
-                            "data-slot": "trailing",
-                            class: ui.value.trailing({ class: (_b2 = props.ui) == null ? void 0 : _b2.trailing })
-                          }, [
-                            renderSlot(_ctx.$slots, "trailing", {
-                              modelValue,
-                              open,
-                              ui: ui.value
-                            }, () => {
-                              var _a3;
-                              return [
-                                unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(trailingIconName),
-                                  "data-slot": "trailingIcon",
-                                  class: ui.value.trailingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.trailingIcon })
-                                }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
-                          ], 2)) : createCommentVNode("", true)
-                        ];
-                      }),
+                            unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
+                              key: 0,
+                              name: unref(leadingIconName),
+                              "data-slot": "leadingIcon",
+                              class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
+                            }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
+                              key: 1,
+                              size: props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
+                            }, __props.avatar, {
+                              "data-slot": "itemLeadingAvatar",
+                              class: ui.value.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })
+                            }), null, 16, ["size", "class"])) : createCommentVNode("", true)
+                          ])
+                        ], 2)) : createCommentVNode("", true),
+                        renderSlot(_ctx.$slots, "default", {
+                          modelValue,
+                          open,
+                          ui: ui.value
+                        }, () => [
+                          (openBlock(true), createBlock(Fragment, null, renderList([displayValue(modelValue)], (displayedModelValue) => {
+                            return openBlock(), createBlock(Fragment, { key: displayedModelValue }, [
+                              displayedModelValue !== void 0 && displayedModelValue !== null ? (openBlock(), createBlock("span", {
+                                key: 0,
+                                "data-slot": "value",
+                                class: ui.value.value({ class: props.ui?.value })
+                              }, toDisplayString(displayedModelValue), 3)) : (openBlock(), createBlock("span", {
+                                key: 1,
+                                "data-slot": "placeholder",
+                                class: ui.value.placeholder({ class: props.ui?.placeholder })
+                              }, toDisplayString(__props.placeholder ?? " "), 3))
+                            ], 64);
+                          }), 128))
+                        ]),
+                        unref(isTrailing) || !!slots.trailing ? (openBlock(), createBlock("span", {
+                          key: 1,
+                          "data-slot": "trailing",
+                          class: ui.value.trailing({ class: props.ui?.trailing })
+                        }, [
+                          renderSlot(_ctx.$slots, "trailing", {
+                            modelValue,
+                            open,
+                            ui: ui.value
+                          }, () => [
+                            unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
+                              key: 0,
+                              name: unref(trailingIconName),
+                              "data-slot": "trailingIcon",
+                              class: ui.value.trailingIcon({ class: props.ui?.trailingIcon })
+                            }, null, 8, ["name", "class"])) : createCommentVNode("", true)
+                          ])
+                        ], 2)) : createCommentVNode("", true)
+                      ]),
                       _: 2
                     }, 1032, ["class"])
                   ];
@@ -1231,22 +1171,19 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             }, _parent2, _scopeId));
             _push2(ssrRenderComponent(unref(ComboboxPortal), unref(portalProps), {
               default: withCtx((_, _push3, _parent3, _scopeId2) => {
-                var _a, _b;
                 if (_push3) {
                   _push3(ssrRenderComponent(unref(ComboboxContent), mergeProps({
                     "data-slot": "content",
-                    class: ui.value.content({ class: (_a = props.ui) == null ? void 0 : _a.content })
+                    class: ui.value.content({ class: props.ui?.content })
                   }, contentProps.value), {
                     default: withCtx((_2, _push4, _parent4, _scopeId3) => {
-                      var _a2, _b2, _c, _d;
                       if (_push4) {
                         _push4(ssrRenderComponent(unref(FocusScope), {
                           trapped: "",
                           "data-slot": "focusScope",
-                          class: ui.value.focusScope({ class: (_a2 = props.ui) == null ? void 0 : _a2.focusScope })
+                          class: ui.value.focusScope({ class: props.ui?.focusScope })
                         }, {
                           default: withCtx((_3, _push5, _parent5, _scopeId4) => {
-                            var _a3, _b3, _c2, _d2, _e, _f, _g, _h;
                             if (_push5) {
                               ssrRenderSlot(_ctx.$slots, "content-top", {}, null, _push5, _parent5, _scopeId4);
                               if (!!__props.searchInput) {
@@ -1257,7 +1194,6 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                   "as-child": ""
                                 }, {
                                   default: withCtx((_4, _push6, _parent6, _scopeId5) => {
-                                    var _a4, _b4;
                                     if (_push6) {
                                       _push6(ssrRenderComponent(_sfc_main$1, mergeProps({
                                         autofocus: "",
@@ -1265,7 +1201,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                         size: __props.size
                                       }, searchInputProps.value, {
                                         "data-slot": "input",
-                                        class: ui.value.input({ class: (_a4 = props.ui) == null ? void 0 : _a4.input }),
+                                        class: ui.value.input({ class: props.ui?.input }),
                                         onChange: () => {
                                         }
                                       }), null, _parent6, _scopeId5));
@@ -1277,7 +1213,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                           size: __props.size
                                         }, searchInputProps.value, {
                                           "data-slot": "input",
-                                          class: ui.value.input({ class: (_b4 = props.ui) == null ? void 0 : _b4.input }),
+                                          class: ui.value.input({ class: props.ui?.input }),
                                           onChange: withModifiers(() => {
                                           }, ["stop"])
                                         }), null, 16, ["size", "class", "onChange"])
@@ -1291,7 +1227,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                               }
                               _push5(ssrRenderComponent(unref(ComboboxEmpty), {
                                 "data-slot": "empty",
-                                class: ui.value.empty({ class: (_a3 = props.ui) == null ? void 0 : _a3.empty })
+                                class: ui.value.empty({ class: props.ui?.empty })
                               }, {
                                 default: withCtx((_4, _push6, _parent6, _scopeId5) => {
                                   if (_push6) {
@@ -1308,7 +1244,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                 }),
                                 _: 2
                               }, _parent5, _scopeId4));
-                              _push5(`<div role="presentation" data-slot="viewport" class="${ssrRenderClass(ui.value.viewport({ class: (_b3 = props.ui) == null ? void 0 : _b3.viewport }))}"${_scopeId4}>`);
+                              _push5(`<div role="presentation" data-slot="viewport" class="${ssrRenderClass(ui.value.viewport({ class: props.ui?.viewport }))}"${_scopeId4}>`);
                               if (!!__props.virtualize) {
                                 _push5(`<!--[-->`);
                                 if (createItem.value && createItemPosition.value === "top") {
@@ -1348,7 +1284,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                 if (createItem.value && createItemPosition.value === "top") {
                                   _push5(ssrRenderComponent(unref(ComboboxGroup), {
                                     "data-slot": "group",
-                                    class: ui.value.group({ class: (_c2 = props.ui) == null ? void 0 : _c2.group })
+                                    class: ui.value.group({ class: props.ui?.group })
                                   }, {
                                     default: withCtx((_4, _push6, _parent6, _scopeId5) => {
                                       if (_push6) {
@@ -1366,11 +1302,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                 }
                                 _push5(`<!--[-->`);
                                 ssrRenderList(filteredGroups.value, (group, groupIndex) => {
-                                  var _a4;
                                   _push5(ssrRenderComponent(unref(ComboboxGroup), {
                                     key: `group-${groupIndex}`,
                                     "data-slot": "group",
-                                    class: ui.value.group({ class: (_a4 = props.ui) == null ? void 0 : _a4.group })
+                                    class: ui.value.group({ class: props.ui?.group })
                                   }, {
                                     default: withCtx((_4, _push6, _parent6, _scopeId5) => {
                                       if (_push6) {
@@ -1402,7 +1337,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                 if (createItem.value && createItemPosition.value === "bottom") {
                                   _push5(ssrRenderComponent(unref(ComboboxGroup), {
                                     "data-slot": "group",
-                                    class: ui.value.group({ class: (_d2 = props.ui) == null ? void 0 : _d2.group })
+                                    class: ui.value.group({ class: props.ui?.group })
                                   }, {
                                     default: withCtx((_4, _push6, _parent6, _scopeId5) => {
                                       if (_push6) {
@@ -1432,26 +1367,23 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                   "display-value": () => searchTerm.value,
                                   "as-child": ""
                                 }, {
-                                  default: withCtx(() => {
-                                    var _a4;
-                                    return [
-                                      createVNode(_sfc_main$1, mergeProps({
-                                        autofocus: "",
-                                        autocomplete: "off",
-                                        size: __props.size
-                                      }, searchInputProps.value, {
-                                        "data-slot": "input",
-                                        class: ui.value.input({ class: (_a4 = props.ui) == null ? void 0 : _a4.input }),
-                                        onChange: withModifiers(() => {
-                                        }, ["stop"])
-                                      }), null, 16, ["size", "class", "onChange"])
-                                    ];
-                                  }),
+                                  default: withCtx(() => [
+                                    createVNode(_sfc_main$1, mergeProps({
+                                      autofocus: "",
+                                      autocomplete: "off",
+                                      size: __props.size
+                                    }, searchInputProps.value, {
+                                      "data-slot": "input",
+                                      class: ui.value.input({ class: props.ui?.input }),
+                                      onChange: withModifiers(() => {
+                                      }, ["stop"])
+                                    }), null, 16, ["size", "class", "onChange"])
+                                  ]),
                                   _: 1
                                 }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
                                 createVNode(unref(ComboboxEmpty), {
                                   "data-slot": "empty",
-                                  class: ui.value.empty({ class: (_e = props.ui) == null ? void 0 : _e.empty })
+                                  class: ui.value.empty({ class: props.ui?.empty })
                                 }, {
                                   default: withCtx(() => [
                                     renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
@@ -1463,7 +1395,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                 createVNode("div", {
                                   role: "presentation",
                                   "data-slot": "viewport",
-                                  class: ui.value.viewport({ class: (_f = props.ui) == null ? void 0 : _f.viewport })
+                                  class: ui.value.viewport({ class: props.ui?.viewport })
                                 }, [
                                   !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
                                     createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
@@ -1484,7 +1416,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                     createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
                                       key: 0,
                                       "data-slot": "group",
-                                      class: ui.value.group({ class: (_g = props.ui) == null ? void 0 : _g.group })
+                                      class: ui.value.group({ class: props.ui?.group })
                                     }, {
                                       default: withCtx(() => [
                                         createVNode(unref(ReuseCreateItemTemplate))
@@ -1492,11 +1424,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                       _: 1
                                     }, 8, ["class"])) : createCommentVNode("", true),
                                     (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
-                                      var _a4;
                                       return openBlock(), createBlock(unref(ComboboxGroup), {
                                         key: `group-${groupIndex}`,
                                         "data-slot": "group",
-                                        class: ui.value.group({ class: (_a4 = props.ui) == null ? void 0 : _a4.group })
+                                        class: ui.value.group({ class: props.ui?.group })
                                       }, {
                                         default: withCtx(() => [
                                           (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
@@ -1513,7 +1444,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                                     createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
                                       key: 1,
                                       "data-slot": "group",
-                                      class: ui.value.group({ class: (_h = props.ui) == null ? void 0 : _h.group })
+                                      class: ui.value.group({ class: props.ui?.group })
                                     }, {
                                       default: withCtx(() => [
                                         createVNode(unref(ReuseCreateItemTemplate))
@@ -1531,7 +1462,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         if (!!__props.arrow) {
                           _push4(ssrRenderComponent(unref(ComboboxArrow), mergeProps(arrowProps.value, {
                             "data-slot": "arrow",
-                            class: ui.value.arrow({ class: (_b2 = props.ui) == null ? void 0 : _b2.arrow })
+                            class: ui.value.arrow({ class: props.ui?.arrow })
                           }), null, _parent4, _scopeId3));
                         } else {
                           _push4(`<!---->`);
@@ -1541,117 +1472,110 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                           createVNode(unref(FocusScope), {
                             trapped: "",
                             "data-slot": "focusScope",
-                            class: ui.value.focusScope({ class: (_c = props.ui) == null ? void 0 : _c.focusScope })
+                            class: ui.value.focusScope({ class: props.ui?.focusScope })
                           }, {
-                            default: withCtx(() => {
-                              var _a3, _b3, _c2, _d2;
-                              return [
-                                renderSlot(_ctx.$slots, "content-top"),
-                                !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
-                                  key: 0,
-                                  modelValue: searchTerm.value,
-                                  "onUpdate:modelValue": ($event) => searchTerm.value = $event,
-                                  "display-value": () => searchTerm.value,
-                                  "as-child": ""
-                                }, {
-                                  default: withCtx(() => {
-                                    var _a4;
-                                    return [
-                                      createVNode(_sfc_main$1, mergeProps({
-                                        autofocus: "",
-                                        autocomplete: "off",
-                                        size: __props.size
-                                      }, searchInputProps.value, {
-                                        "data-slot": "input",
-                                        class: ui.value.input({ class: (_a4 = props.ui) == null ? void 0 : _a4.input }),
-                                        onChange: withModifiers(() => {
-                                        }, ["stop"])
-                                      }), null, 16, ["size", "class", "onChange"])
-                                    ];
-                                  }),
-                                  _: 1
-                                }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
-                                createVNode(unref(ComboboxEmpty), {
-                                  "data-slot": "empty",
-                                  class: ui.value.empty({ class: (_a3 = props.ui) == null ? void 0 : _a3.empty })
-                                }, {
-                                  default: withCtx(() => [
-                                    renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
-                                      createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
-                                    ])
-                                  ]),
-                                  _: 3
-                                }, 8, ["class"]),
-                                createVNode("div", {
-                                  role: "presentation",
-                                  "data-slot": "viewport",
-                                  class: ui.value.viewport({ class: (_b3 = props.ui) == null ? void 0 : _b3.viewport })
-                                }, [
-                                  !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
-                                    createVNode(unref(ComboboxVirtualizer), mergeProps({
-                                      options: filteredItems.value,
-                                      "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
-                                    }, virtualizerProps.value), {
-                                      default: withCtx(({ option: item, virtualItem }) => [
-                                        createVNode(unref(ReuseItemTemplate), {
-                                          item,
-                                          index: virtualItem.index
-                                        }, null, 8, ["item", "index"])
-                                      ]),
-                                      _: 1
-                                    }, 16, ["options", "text-content"]),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
-                                  ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 0,
-                                      "data-slot": "group",
-                                      class: ui.value.group({ class: (_c2 = props.ui) == null ? void 0 : _c2.group })
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
-                                      ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true),
-                                    (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
-                                      var _a4;
-                                      return openBlock(), createBlock(unref(ComboboxGroup), {
-                                        key: `group-${groupIndex}`,
-                                        "data-slot": "group",
-                                        class: ui.value.group({ class: (_a4 = props.ui) == null ? void 0 : _a4.group })
-                                      }, {
-                                        default: withCtx(() => [
-                                          (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
-                                            return openBlock(), createBlock(unref(ReuseItemTemplate), {
-                                              key: `group-${groupIndex}-${index}`,
-                                              item,
-                                              index
-                                            }, null, 8, ["item", "index"]);
-                                          }), 128))
-                                        ]),
-                                        _: 2
-                                      }, 1032, ["class"]);
-                                    }), 128)),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 1,
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "content-top"),
+                              !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
+                                key: 0,
+                                modelValue: searchTerm.value,
+                                "onUpdate:modelValue": ($event) => searchTerm.value = $event,
+                                "display-value": () => searchTerm.value,
+                                "as-child": ""
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_sfc_main$1, mergeProps({
+                                    autofocus: "",
+                                    autocomplete: "off",
+                                    size: __props.size
+                                  }, searchInputProps.value, {
+                                    "data-slot": "input",
+                                    class: ui.value.input({ class: props.ui?.input }),
+                                    onChange: withModifiers(() => {
+                                    }, ["stop"])
+                                  }), null, 16, ["size", "class", "onChange"])
+                                ]),
+                                _: 1
+                              }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
+                              createVNode(unref(ComboboxEmpty), {
+                                "data-slot": "empty",
+                                class: ui.value.empty({ class: props.ui?.empty })
+                              }, {
+                                default: withCtx(() => [
+                                  renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
+                                    createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
+                                  ])
+                                ]),
+                                _: 3
+                              }, 8, ["class"]),
+                              createVNode("div", {
+                                role: "presentation",
+                                "data-slot": "viewport",
+                                class: ui.value.viewport({ class: props.ui?.viewport })
+                              }, [
+                                !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                  createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
+                                  createVNode(unref(ComboboxVirtualizer), mergeProps({
+                                    options: filteredItems.value,
+                                    "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
+                                  }, virtualizerProps.value), {
+                                    default: withCtx(({ option: item, virtualItem }) => [
+                                      createVNode(unref(ReuseItemTemplate), {
+                                        item,
+                                        index: virtualItem.index
+                                      }, null, 8, ["item", "index"])
+                                    ]),
+                                    _: 1
+                                  }, 16, ["options", "text-content"]),
+                                  createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
+                                ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                  createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
+                                    key: 0,
+                                    "data-slot": "group",
+                                    class: ui.value.group({ class: props.ui?.group })
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(unref(ReuseCreateItemTemplate))
+                                    ]),
+                                    _: 1
+                                  }, 8, ["class"])) : createCommentVNode("", true),
+                                  (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
+                                    return openBlock(), createBlock(unref(ComboboxGroup), {
+                                      key: `group-${groupIndex}`,
                                       "data-slot": "group",
-                                      class: ui.value.group({ class: (_d2 = props.ui) == null ? void 0 : _d2.group })
+                                      class: ui.value.group({ class: props.ui?.group })
                                     }, {
                                       default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
+                                        (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
+                                          return openBlock(), createBlock(unref(ReuseItemTemplate), {
+                                            key: `group-${groupIndex}-${index}`,
+                                            item,
+                                            index
+                                          }, null, 8, ["item", "index"]);
+                                        }), 128))
                                       ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true)
-                                  ], 64))
-                                ], 2),
-                                renderSlot(_ctx.$slots, "content-bottom")
-                              ];
-                            }),
+                                      _: 2
+                                    }, 1032, ["class"]);
+                                  }), 128)),
+                                  createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
+                                    key: 1,
+                                    "data-slot": "group",
+                                    class: ui.value.group({ class: props.ui?.group })
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(unref(ReuseCreateItemTemplate))
+                                    ]),
+                                    _: 1
+                                  }, 8, ["class"])) : createCommentVNode("", true)
+                                ], 64))
+                              ], 2),
+                              renderSlot(_ctx.$slots, "content-bottom")
+                            ]),
                             _: 3
                           }, 8, ["class"]),
                           !!__props.arrow ? (openBlock(), createBlock(unref(ComboboxArrow), mergeProps({ key: 0 }, arrowProps.value, {
                             "data-slot": "arrow",
-                            class: ui.value.arrow({ class: (_d = props.ui) == null ? void 0 : _d.arrow })
+                            class: ui.value.arrow({ class: props.ui?.arrow })
                           }), null, 16, ["class"])) : createCommentVNode("", true)
                         ];
                       }
@@ -1662,128 +1586,118 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                   return [
                     createVNode(unref(ComboboxContent), mergeProps({
                       "data-slot": "content",
-                      class: ui.value.content({ class: (_b = props.ui) == null ? void 0 : _b.content })
+                      class: ui.value.content({ class: props.ui?.content })
                     }, contentProps.value), {
-                      default: withCtx(() => {
-                        var _a2, _b2;
-                        return [
-                          createVNode(unref(FocusScope), {
-                            trapped: "",
-                            "data-slot": "focusScope",
-                            class: ui.value.focusScope({ class: (_a2 = props.ui) == null ? void 0 : _a2.focusScope })
-                          }, {
-                            default: withCtx(() => {
-                              var _a3, _b3, _c, _d;
-                              return [
-                                renderSlot(_ctx.$slots, "content-top"),
-                                !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
+                      default: withCtx(() => [
+                        createVNode(unref(FocusScope), {
+                          trapped: "",
+                          "data-slot": "focusScope",
+                          class: ui.value.focusScope({ class: props.ui?.focusScope })
+                        }, {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "content-top"),
+                            !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
+                              key: 0,
+                              modelValue: searchTerm.value,
+                              "onUpdate:modelValue": ($event) => searchTerm.value = $event,
+                              "display-value": () => searchTerm.value,
+                              "as-child": ""
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_sfc_main$1, mergeProps({
+                                  autofocus: "",
+                                  autocomplete: "off",
+                                  size: __props.size
+                                }, searchInputProps.value, {
+                                  "data-slot": "input",
+                                  class: ui.value.input({ class: props.ui?.input }),
+                                  onChange: withModifiers(() => {
+                                  }, ["stop"])
+                                }), null, 16, ["size", "class", "onChange"])
+                              ]),
+                              _: 1
+                            }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
+                            createVNode(unref(ComboboxEmpty), {
+                              "data-slot": "empty",
+                              class: ui.value.empty({ class: props.ui?.empty })
+                            }, {
+                              default: withCtx(() => [
+                                renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
+                                  createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
+                                ])
+                              ]),
+                              _: 3
+                            }, 8, ["class"]),
+                            createVNode("div", {
+                              role: "presentation",
+                              "data-slot": "viewport",
+                              class: ui.value.viewport({ class: props.ui?.viewport })
+                            }, [
+                              !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
+                                createVNode(unref(ComboboxVirtualizer), mergeProps({
+                                  options: filteredItems.value,
+                                  "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
+                                }, virtualizerProps.value), {
+                                  default: withCtx(({ option: item, virtualItem }) => [
+                                    createVNode(unref(ReuseItemTemplate), {
+                                      item,
+                                      index: virtualItem.index
+                                    }, null, 8, ["item", "index"])
+                                  ]),
+                                  _: 1
+                                }, 16, ["options", "text-content"]),
+                                createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
+                              ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
                                   key: 0,
-                                  modelValue: searchTerm.value,
-                                  "onUpdate:modelValue": ($event) => searchTerm.value = $event,
-                                  "display-value": () => searchTerm.value,
-                                  "as-child": ""
+                                  "data-slot": "group",
+                                  class: ui.value.group({ class: props.ui?.group })
                                 }, {
-                                  default: withCtx(() => {
-                                    var _a4;
-                                    return [
-                                      createVNode(_sfc_main$1, mergeProps({
-                                        autofocus: "",
-                                        autocomplete: "off",
-                                        size: __props.size
-                                      }, searchInputProps.value, {
-                                        "data-slot": "input",
-                                        class: ui.value.input({ class: (_a4 = props.ui) == null ? void 0 : _a4.input }),
-                                        onChange: withModifiers(() => {
-                                        }, ["stop"])
-                                      }), null, 16, ["size", "class", "onChange"])
-                                    ];
-                                  }),
+                                  default: withCtx(() => [
+                                    createVNode(unref(ReuseCreateItemTemplate))
+                                  ]),
                                   _: 1
-                                }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
-                                createVNode(unref(ComboboxEmpty), {
-                                  "data-slot": "empty",
-                                  class: ui.value.empty({ class: (_a3 = props.ui) == null ? void 0 : _a3.empty })
+                                }, 8, ["class"])) : createCommentVNode("", true),
+                                (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
+                                  return openBlock(), createBlock(unref(ComboboxGroup), {
+                                    key: `group-${groupIndex}`,
+                                    "data-slot": "group",
+                                    class: ui.value.group({ class: props.ui?.group })
+                                  }, {
+                                    default: withCtx(() => [
+                                      (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
+                                        return openBlock(), createBlock(unref(ReuseItemTemplate), {
+                                          key: `group-${groupIndex}-${index}`,
+                                          item,
+                                          index
+                                        }, null, 8, ["item", "index"]);
+                                      }), 128))
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["class"]);
+                                }), 128)),
+                                createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
+                                  key: 1,
+                                  "data-slot": "group",
+                                  class: ui.value.group({ class: props.ui?.group })
                                 }, {
                                   default: withCtx(() => [
-                                    renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
-                                      createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
-                                    ])
+                                    createVNode(unref(ReuseCreateItemTemplate))
                                   ]),
-                                  _: 3
-                                }, 8, ["class"]),
-                                createVNode("div", {
-                                  role: "presentation",
-                                  "data-slot": "viewport",
-                                  class: ui.value.viewport({ class: (_b3 = props.ui) == null ? void 0 : _b3.viewport })
-                                }, [
-                                  !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
-                                    createVNode(unref(ComboboxVirtualizer), mergeProps({
-                                      options: filteredItems.value,
-                                      "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
-                                    }, virtualizerProps.value), {
-                                      default: withCtx(({ option: item, virtualItem }) => [
-                                        createVNode(unref(ReuseItemTemplate), {
-                                          item,
-                                          index: virtualItem.index
-                                        }, null, 8, ["item", "index"])
-                                      ]),
-                                      _: 1
-                                    }, 16, ["options", "text-content"]),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
-                                  ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 0,
-                                      "data-slot": "group",
-                                      class: ui.value.group({ class: (_c = props.ui) == null ? void 0 : _c.group })
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
-                                      ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true),
-                                    (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
-                                      var _a4;
-                                      return openBlock(), createBlock(unref(ComboboxGroup), {
-                                        key: `group-${groupIndex}`,
-                                        "data-slot": "group",
-                                        class: ui.value.group({ class: (_a4 = props.ui) == null ? void 0 : _a4.group })
-                                      }, {
-                                        default: withCtx(() => [
-                                          (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
-                                            return openBlock(), createBlock(unref(ReuseItemTemplate), {
-                                              key: `group-${groupIndex}-${index}`,
-                                              item,
-                                              index
-                                            }, null, 8, ["item", "index"]);
-                                          }), 128))
-                                        ]),
-                                        _: 2
-                                      }, 1032, ["class"]);
-                                    }), 128)),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 1,
-                                      "data-slot": "group",
-                                      class: ui.value.group({ class: (_d = props.ui) == null ? void 0 : _d.group })
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
-                                      ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true)
-                                  ], 64))
-                                ], 2),
-                                renderSlot(_ctx.$slots, "content-bottom")
-                              ];
-                            }),
-                            _: 3
-                          }, 8, ["class"]),
-                          !!__props.arrow ? (openBlock(), createBlock(unref(ComboboxArrow), mergeProps({ key: 0 }, arrowProps.value, {
-                            "data-slot": "arrow",
-                            class: ui.value.arrow({ class: (_b2 = props.ui) == null ? void 0 : _b2.arrow })
-                          }), null, 16, ["class"])) : createCommentVNode("", true)
-                        ];
-                      }),
+                                  _: 1
+                                }, 8, ["class"])) : createCommentVNode("", true)
+                              ], 64))
+                            ], 2),
+                            renderSlot(_ctx.$slots, "content-bottom")
+                          ]),
+                          _: 3
+                        }, 8, ["class"]),
+                        !!__props.arrow ? (openBlock(), createBlock(unref(ComboboxArrow), mergeProps({ key: 0 }, arrowProps.value, {
+                          "data-slot": "arrow",
+                          class: ui.value.arrow({ class: props.ui?.arrow })
+                        }), null, 16, ["class"])) : createCommentVNode("", true)
+                      ]),
                       _: 3
                     }, 16, ["class"])
                   ];
@@ -1794,227 +1708,201 @@ const _sfc_main = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           } else {
             return [
               createVNode(unref(ComboboxAnchor), { "as-child": "" }, {
-                default: withCtx(() => {
-                  var _a;
-                  return [
-                    createVNode(unref(ComboboxTrigger), {
-                      ref_key: "triggerRef",
-                      ref: triggerRef,
-                      "data-slot": "base",
-                      class: ui.value.base({ class: [(_a = props.ui) == null ? void 0 : _a.base, props.class] }),
-                      tabindex: "0"
-                    }, {
-                      default: withCtx(() => {
-                        var _a2, _b;
-                        return [
-                          unref(isLeading) || !!__props.avatar || !!slots.leading ? (openBlock(), createBlock("span", {
+                default: withCtx(() => [
+                  createVNode(unref(ComboboxTrigger), {
+                    ref_key: "triggerRef",
+                    ref: triggerRef,
+                    "data-slot": "base",
+                    class: ui.value.base({ class: [props.ui?.base, props.class] }),
+                    tabindex: "0"
+                  }, {
+                    default: withCtx(() => [
+                      unref(isLeading) || !!__props.avatar || !!slots.leading ? (openBlock(), createBlock("span", {
+                        key: 0,
+                        "data-slot": "leading",
+                        class: ui.value.leading({ class: props.ui?.leading })
+                      }, [
+                        renderSlot(_ctx.$slots, "leading", {
+                          modelValue,
+                          open,
+                          ui: ui.value
+                        }, () => [
+                          unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
                             key: 0,
-                            "data-slot": "leading",
-                            class: ui.value.leading({ class: (_a2 = props.ui) == null ? void 0 : _a2.leading })
-                          }, [
-                            renderSlot(_ctx.$slots, "leading", {
-                              modelValue,
-                              open,
-                              ui: ui.value
-                            }, () => {
-                              var _a3, _b2, _c;
-                              return [
-                                unref(isLeading) && unref(leadingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(leadingIconName),
-                                  "data-slot": "leadingIcon",
-                                  class: ui.value.leadingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.leadingIcon })
-                                }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
-                                  key: 1,
-                                  size: ((_b2 = props.ui) == null ? void 0 : _b2.itemLeadingAvatarSize) || ui.value.itemLeadingAvatarSize()
-                                }, __props.avatar, {
-                                  "data-slot": "itemLeadingAvatar",
-                                  class: ui.value.itemLeadingAvatar({ class: (_c = props.ui) == null ? void 0 : _c.itemLeadingAvatar })
-                                }), null, 16, ["size", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
-                          ], 2)) : createCommentVNode("", true),
-                          renderSlot(_ctx.$slots, "default", {
-                            modelValue,
-                            open,
-                            ui: ui.value
-                          }, () => [
-                            (openBlock(true), createBlock(Fragment, null, renderList([displayValue(modelValue)], (displayedModelValue) => {
-                              var _a3, _b2, _c;
-                              return openBlock(), createBlock(Fragment, { key: displayedModelValue }, [
-                                displayedModelValue !== void 0 && displayedModelValue !== null ? (openBlock(), createBlock("span", {
-                                  key: 0,
-                                  "data-slot": "value",
-                                  class: ui.value.value({ class: (_a3 = props.ui) == null ? void 0 : _a3.value })
-                                }, toDisplayString(displayedModelValue), 3)) : (openBlock(), createBlock("span", {
-                                  key: 1,
-                                  "data-slot": "placeholder",
-                                  class: ui.value.placeholder({ class: (_b2 = props.ui) == null ? void 0 : _b2.placeholder })
-                                }, toDisplayString((_c = __props.placeholder) != null ? _c : "\xA0"), 3))
-                              ], 64);
-                            }), 128))
-                          ]),
-                          unref(isTrailing) || !!slots.trailing ? (openBlock(), createBlock("span", {
+                            name: unref(leadingIconName),
+                            "data-slot": "leadingIcon",
+                            class: ui.value.leadingIcon({ class: props.ui?.leadingIcon })
+                          }, null, 8, ["name", "class"])) : !!__props.avatar ? (openBlock(), createBlock(_sfc_main$b, mergeProps({
                             key: 1,
-                            "data-slot": "trailing",
-                            class: ui.value.trailing({ class: (_b = props.ui) == null ? void 0 : _b.trailing })
-                          }, [
-                            renderSlot(_ctx.$slots, "trailing", {
-                              modelValue,
-                              open,
-                              ui: ui.value
-                            }, () => {
-                              var _a3;
-                              return [
-                                unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
-                                  key: 0,
-                                  name: unref(trailingIconName),
-                                  "data-slot": "trailingIcon",
-                                  class: ui.value.trailingIcon({ class: (_a3 = props.ui) == null ? void 0 : _a3.trailingIcon })
-                                }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                              ];
-                            })
-                          ], 2)) : createCommentVNode("", true)
-                        ];
-                      }),
-                      _: 2
-                    }, 1032, ["class"])
-                  ];
-                }),
+                            size: props.ui?.itemLeadingAvatarSize || ui.value.itemLeadingAvatarSize()
+                          }, __props.avatar, {
+                            "data-slot": "itemLeadingAvatar",
+                            class: ui.value.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })
+                          }), null, 16, ["size", "class"])) : createCommentVNode("", true)
+                        ])
+                      ], 2)) : createCommentVNode("", true),
+                      renderSlot(_ctx.$slots, "default", {
+                        modelValue,
+                        open,
+                        ui: ui.value
+                      }, () => [
+                        (openBlock(true), createBlock(Fragment, null, renderList([displayValue(modelValue)], (displayedModelValue) => {
+                          return openBlock(), createBlock(Fragment, { key: displayedModelValue }, [
+                            displayedModelValue !== void 0 && displayedModelValue !== null ? (openBlock(), createBlock("span", {
+                              key: 0,
+                              "data-slot": "value",
+                              class: ui.value.value({ class: props.ui?.value })
+                            }, toDisplayString(displayedModelValue), 3)) : (openBlock(), createBlock("span", {
+                              key: 1,
+                              "data-slot": "placeholder",
+                              class: ui.value.placeholder({ class: props.ui?.placeholder })
+                            }, toDisplayString(__props.placeholder ?? " "), 3))
+                          ], 64);
+                        }), 128))
+                      ]),
+                      unref(isTrailing) || !!slots.trailing ? (openBlock(), createBlock("span", {
+                        key: 1,
+                        "data-slot": "trailing",
+                        class: ui.value.trailing({ class: props.ui?.trailing })
+                      }, [
+                        renderSlot(_ctx.$slots, "trailing", {
+                          modelValue,
+                          open,
+                          ui: ui.value
+                        }, () => [
+                          unref(trailingIconName) ? (openBlock(), createBlock(_sfc_main$d, {
+                            key: 0,
+                            name: unref(trailingIconName),
+                            "data-slot": "trailingIcon",
+                            class: ui.value.trailingIcon({ class: props.ui?.trailingIcon })
+                          }, null, 8, ["name", "class"])) : createCommentVNode("", true)
+                        ])
+                      ], 2)) : createCommentVNode("", true)
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])
+                ]),
                 _: 2
               }, 1024),
               createVNode(unref(ComboboxPortal), unref(portalProps), {
-                default: withCtx(() => {
-                  var _a;
-                  return [
-                    createVNode(unref(ComboboxContent), mergeProps({
-                      "data-slot": "content",
-                      class: ui.value.content({ class: (_a = props.ui) == null ? void 0 : _a.content })
-                    }, contentProps.value), {
-                      default: withCtx(() => {
-                        var _a2, _b;
-                        return [
-                          createVNode(unref(FocusScope), {
-                            trapped: "",
-                            "data-slot": "focusScope",
-                            class: ui.value.focusScope({ class: (_a2 = props.ui) == null ? void 0 : _a2.focusScope })
+                default: withCtx(() => [
+                  createVNode(unref(ComboboxContent), mergeProps({
+                    "data-slot": "content",
+                    class: ui.value.content({ class: props.ui?.content })
+                  }, contentProps.value), {
+                    default: withCtx(() => [
+                      createVNode(unref(FocusScope), {
+                        trapped: "",
+                        "data-slot": "focusScope",
+                        class: ui.value.focusScope({ class: props.ui?.focusScope })
+                      }, {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "content-top"),
+                          !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
+                            key: 0,
+                            modelValue: searchTerm.value,
+                            "onUpdate:modelValue": ($event) => searchTerm.value = $event,
+                            "display-value": () => searchTerm.value,
+                            "as-child": ""
                           }, {
-                            default: withCtx(() => {
-                              var _a3, _b2, _c, _d;
-                              return [
-                                renderSlot(_ctx.$slots, "content-top"),
-                                !!__props.searchInput ? (openBlock(), createBlock(unref(ComboboxInput), {
-                                  key: 0,
-                                  modelValue: searchTerm.value,
-                                  "onUpdate:modelValue": ($event) => searchTerm.value = $event,
-                                  "display-value": () => searchTerm.value,
-                                  "as-child": ""
-                                }, {
-                                  default: withCtx(() => {
-                                    var _a4;
-                                    return [
-                                      createVNode(_sfc_main$1, mergeProps({
-                                        autofocus: "",
-                                        autocomplete: "off",
-                                        size: __props.size
-                                      }, searchInputProps.value, {
-                                        "data-slot": "input",
-                                        class: ui.value.input({ class: (_a4 = props.ui) == null ? void 0 : _a4.input }),
-                                        onChange: withModifiers(() => {
-                                        }, ["stop"])
-                                      }), null, 16, ["size", "class", "onChange"])
-                                    ];
-                                  }),
-                                  _: 1
-                                }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
-                                createVNode(unref(ComboboxEmpty), {
-                                  "data-slot": "empty",
-                                  class: ui.value.empty({ class: (_a3 = props.ui) == null ? void 0 : _a3.empty })
+                            default: withCtx(() => [
+                              createVNode(_sfc_main$1, mergeProps({
+                                autofocus: "",
+                                autocomplete: "off",
+                                size: __props.size
+                              }, searchInputProps.value, {
+                                "data-slot": "input",
+                                class: ui.value.input({ class: props.ui?.input }),
+                                onChange: withModifiers(() => {
+                                }, ["stop"])
+                              }), null, 16, ["size", "class", "onChange"])
+                            ]),
+                            _: 1
+                          }, 8, ["modelValue", "onUpdate:modelValue", "display-value"])) : createCommentVNode("", true),
+                          createVNode(unref(ComboboxEmpty), {
+                            "data-slot": "empty",
+                            class: ui.value.empty({ class: props.ui?.empty })
+                          }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
+                                createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
+                              ])
+                            ]),
+                            _: 3
+                          }, 8, ["class"]),
+                          createVNode("div", {
+                            role: "presentation",
+                            "data-slot": "viewport",
+                            class: ui.value.viewport({ class: props.ui?.viewport })
+                          }, [
+                            !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                              createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
+                              createVNode(unref(ComboboxVirtualizer), mergeProps({
+                                options: filteredItems.value,
+                                "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
+                              }, virtualizerProps.value), {
+                                default: withCtx(({ option: item, virtualItem }) => [
+                                  createVNode(unref(ReuseItemTemplate), {
+                                    item,
+                                    index: virtualItem.index
+                                  }, null, 8, ["item", "index"])
+                                ]),
+                                _: 1
+                              }, 16, ["options", "text-content"]),
+                              createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
+                            ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
+                              createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
+                                key: 0,
+                                "data-slot": "group",
+                                class: ui.value.group({ class: props.ui?.group })
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ReuseCreateItemTemplate))
+                                ]),
+                                _: 1
+                              }, 8, ["class"])) : createCommentVNode("", true),
+                              (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
+                                return openBlock(), createBlock(unref(ComboboxGroup), {
+                                  key: `group-${groupIndex}`,
+                                  "data-slot": "group",
+                                  class: ui.value.group({ class: props.ui?.group })
                                 }, {
                                   default: withCtx(() => [
-                                    renderSlot(_ctx.$slots, "empty", { searchTerm: searchTerm.value }, () => [
-                                      createTextVNode(toDisplayString(searchTerm.value ? unref(t)("selectMenu.noMatch", { searchTerm: searchTerm.value }) : unref(t)("selectMenu.noData")), 1)
-                                    ])
+                                    (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
+                                      return openBlock(), createBlock(unref(ReuseItemTemplate), {
+                                        key: `group-${groupIndex}-${index}`,
+                                        item,
+                                        index
+                                      }, null, 8, ["item", "index"]);
+                                    }), 128))
                                   ]),
-                                  _: 3
-                                }, 8, ["class"]),
-                                createVNode("div", {
-                                  role: "presentation",
-                                  "data-slot": "viewport",
-                                  class: ui.value.viewport({ class: (_b2 = props.ui) == null ? void 0 : _b2.viewport })
-                                }, [
-                                  !!__props.virtualize ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 0 })) : createCommentVNode("", true),
-                                    createVNode(unref(ComboboxVirtualizer), mergeProps({
-                                      options: filteredItems.value,
-                                      "text-content": (item2) => isSelectItem(item2) ? unref(get)(item2, props.labelKey) : String(item2)
-                                    }, virtualizerProps.value), {
-                                      default: withCtx(({ option: item, virtualItem }) => [
-                                        createVNode(unref(ReuseItemTemplate), {
-                                          item,
-                                          index: virtualItem.index
-                                        }, null, 8, ["item", "index"])
-                                      ]),
-                                      _: 1
-                                    }, 16, ["options", "text-content"]),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ReuseCreateItemTemplate), { key: 1 })) : createCommentVNode("", true)
-                                  ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
-                                    createItem.value && createItemPosition.value === "top" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 0,
-                                      "data-slot": "group",
-                                      class: ui.value.group({ class: (_c = props.ui) == null ? void 0 : _c.group })
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
-                                      ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true),
-                                    (openBlock(true), createBlock(Fragment, null, renderList(filteredGroups.value, (group, groupIndex) => {
-                                      var _a4;
-                                      return openBlock(), createBlock(unref(ComboboxGroup), {
-                                        key: `group-${groupIndex}`,
-                                        "data-slot": "group",
-                                        class: ui.value.group({ class: (_a4 = props.ui) == null ? void 0 : _a4.group })
-                                      }, {
-                                        default: withCtx(() => [
-                                          (openBlock(true), createBlock(Fragment, null, renderList(group, (item, index) => {
-                                            return openBlock(), createBlock(unref(ReuseItemTemplate), {
-                                              key: `group-${groupIndex}-${index}`,
-                                              item,
-                                              index
-                                            }, null, 8, ["item", "index"]);
-                                          }), 128))
-                                        ]),
-                                        _: 2
-                                      }, 1032, ["class"]);
-                                    }), 128)),
-                                    createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
-                                      key: 1,
-                                      "data-slot": "group",
-                                      class: ui.value.group({ class: (_d = props.ui) == null ? void 0 : _d.group })
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode(unref(ReuseCreateItemTemplate))
-                                      ]),
-                                      _: 1
-                                    }, 8, ["class"])) : createCommentVNode("", true)
-                                  ], 64))
-                                ], 2),
-                                renderSlot(_ctx.$slots, "content-bottom")
-                              ];
-                            }),
-                            _: 3
-                          }, 8, ["class"]),
-                          !!__props.arrow ? (openBlock(), createBlock(unref(ComboboxArrow), mergeProps({ key: 0 }, arrowProps.value, {
-                            "data-slot": "arrow",
-                            class: ui.value.arrow({ class: (_b = props.ui) == null ? void 0 : _b.arrow })
-                          }), null, 16, ["class"])) : createCommentVNode("", true)
-                        ];
-                      }),
-                      _: 3
-                    }, 16, ["class"])
-                  ];
-                }),
+                                  _: 2
+                                }, 1032, ["class"]);
+                              }), 128)),
+                              createItem.value && createItemPosition.value === "bottom" ? (openBlock(), createBlock(unref(ComboboxGroup), {
+                                key: 1,
+                                "data-slot": "group",
+                                class: ui.value.group({ class: props.ui?.group })
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ReuseCreateItemTemplate))
+                                ]),
+                                _: 1
+                              }, 8, ["class"])) : createCommentVNode("", true)
+                            ], 64))
+                          ], 2),
+                          renderSlot(_ctx.$slots, "content-bottom")
+                        ]),
+                        _: 3
+                      }, 8, ["class"]),
+                      !!__props.arrow ? (openBlock(), createBlock(unref(ComboboxArrow), mergeProps({ key: 0 }, arrowProps.value, {
+                        "data-slot": "arrow",
+                        class: ui.value.arrow({ class: props.ui?.arrow })
+                      }), null, 16, ["class"])) : createCommentVNode("", true)
+                    ]),
+                    _: 3
+                  }, 16, ["class"])
+                ]),
                 _: 3
               }, 16)
             ];