@nuxt/ui 4.7.1 → 4.8.1

package/dist/runtime/components/InputTags.vue

@@ -4,10 +4,11 @@ import theme from "#build/ui/input-tags";
 
 <script setup>
 import { computed, useTemplateRef, onMounted, toRaw, toRef } from "vue";
-import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from "reka-ui";
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
@@ -15,7 +16,7 @@ import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   placeholder: { type: String, required: false },
   maxLength: { type: Number, required: false },
@@ -54,19 +55,19 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
 const slots = defineSlots();
+const props = useComponentProps("inputTags", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("inputTags", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const rootProps = useForwardProps(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formFieldSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags || {} })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize?.value,
+  size: inputSize?.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -109,10 +110,10 @@ defineExpose({
   <TagsInputRoot
     :id="id"
     v-slot="{ modelValue: tags }"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="root"
-    :class="ui.root({ class: [ui.base({ class: uiProp?.base }), uiProp?.root, props.class] })"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
@@ -123,19 +124,19 @@ defineExpose({
       :key="index"
       :value="item"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item] })"
+      :class="ui.item({ class: [props.ui?.item] })"
     >
-      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [uiProp?.itemText] })">
+      <TagsInputItemText data-slot="itemText" :class="ui.itemText({ class: [props.ui?.itemText] })">
         <slot v-if="!!slots['item-text']" name="item-text" :item="item" :index="index" :ui="ui" />
       </TagsInputItemText>
 
       <TagsInputItemDelete
         data-slot="itemDelete"
-        :class="ui.itemDelete({ class: [uiProp?.itemDelete] })"
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
         :disabled="disabled"
       >
         <slot name="item-delete" :item="item" :index="index" :ui="ui">
-          <UIcon :name="deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [uiProp?.itemDeleteIcon] })" />
+          <UIcon :name="props.deleteIcon || appConfig.ui.icons.close" data-slot="itemDeleteIcon" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
         </slot>
       </TagsInputItemDelete>
     </TagsInputItem>
@@ -143,26 +144,26 @@ defineExpose({
     <TagsInputInput
       ref="inputRef"
       v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="placeholder"
-      :max-length="maxLength"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
       data-slot="input"
-      :class="ui.input({ class: uiProp?.input })"
+      :class="ui.input({ class: props.ui?.input })"
       @blur="onBlur"
       @focus="onFocus"
     />
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TagsInputRoot>

package/dist/runtime/components/InputTime.vue

@@ -4,11 +4,12 @@ import theme from "#build/ui/input-time";
 
 <script setup>
 import { computed, onMounted, ref } from "vue";
-import { TimeRangeFieldRoot, TimeRangeFieldInput, useForwardPropsEmits } from "reka-ui";
+import { TimeRangeFieldRoot, TimeRangeFieldInput } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { TimeField as SingleTimeField } from "reka-ui/namespaced";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
@@ -16,7 +17,7 @@ import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
@@ -57,19 +58,19 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "change", "blur", "focus", "update:placeholder"]);
 const slots = defineSlots();
+const props = useComponentProps("inputTime", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("inputTime", props);
-const rootProps = useForwardPropsEmits(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const rootProps = useForwardProps(reactiveOmit(props, "id", "name", "range", "modelValue", "defaultValue", "color", "variant", "size", "highlight", "fixed", "disabled", "autofocus", "autofocusDelay", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "separatorIcon", "class", "ui"), emits);
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formFieldSize, name, highlight, disabled, ariaAttrs } = useFormField(_props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const inputSize = computed(() => fieldGroupSize.value || formFieldSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTime || {} })({
-  color: color.value,
+  color: color.value ?? props.color,
   variant: props.variant,
-  size: inputSize.value,
+  size: inputSize.value ?? props.size,
   loading: props.loading,
-  highlight: highlight.value,
+  highlight: highlight.value ?? props.highlight,
   fixed: props.fixed,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -120,7 +121,7 @@ defineExpose({
       :type="type"
       :part="segment.part"
       data-slot="segment"
-      :class="ui.segment({ class: uiProp?.segment })"
+      :class="ui.segment({ class: props.ui?.segment })"
       :data-segment="segment.part"
     >
       {{ segment.value.trim() }}
@@ -133,10 +134,10 @@ defineExpose({
     v-slot="{ segments }"
     :name="name"
     :disabled="disabled"
-    :model-value="modelValue"
-    :default-value="defaultValue"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
     data-slot="base"
-    :class="ui.base({ class: [uiProp?.base, props.class] })"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     @update:model-value="onUpdate"
     @blur="onBlur"
     @focus="onFocus"
@@ -147,23 +148,23 @@ defineExpose({
     <template v-else>
       <ReuseSegmentsTemplate :segments="segments.start" type="start" />
       <slot name="separator" :ui="ui">
-        <UIcon :name="separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: uiProp?.separatorIcon })" />
+        <UIcon :name="props.separatorIcon || appConfig.ui.icons.minus" data-slot="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
       </slot>
       <ReuseSegmentsTemplate :segments="segments.end" type="end" />
     </template>
 
     <slot :ui="ui" />
 
-    <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+    <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading" :ui="ui">
-        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
-    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+    <span v-if="isTrailing || !!slots.trailing" data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
       <slot name="trailing" :ui="ui">
-        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: uiProp?.trailingIcon })" />
+        <UIcon v-if="trailingIconName" :name="trailingIconName" data-slot="trailingIcon" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>
   </TimeField.Root>

package/dist/runtime/components/Kbd.vue

@@ -7,9 +7,9 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useKbd } from "../composables/useKbd";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "kbd" },
   value: { type: null, required: false },
   color: { type: null, required: false },
@@ -19,16 +19,16 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("kbd", _props);
 const { getKbdKey } = useKbd();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("kbd", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.kbd || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class], color: props.color, variant: props.variant, size: props.size })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class], color: props.color, variant: props.variant, size: props.size })">
     <slot>
-      {{ getKbdKey(value) }}
+      {{ getKbdKey(props.value) }}
     </slot>
   </Primitive>
 </template>

package/dist/runtime/components/Link.d.vue.ts

@@ -100,9 +100,9 @@ export interface LinkSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
-    active: boolean;
-    as: any;
     type: "reset" | "submit" | "button";
+    as: any;
+    active: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Link.vue.d.ts

@@ -100,9 +100,9 @@ export interface LinkSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
-    active: boolean;
-    as: any;
     type: "reset" | "submit" | "button";
+    as: any;
+    active: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/LinkBase.d.vue.ts

@@ -14,8 +14,8 @@ export interface LinkBaseProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
-    as: string;
     type: string;
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/runtime/components/LinkBase.vue.d.ts

@@ -14,8 +14,8 @@ export interface LinkBaseProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
-    as: string;
     type: string;
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/dist/runtime/components/Listbox.d.vue.ts

@@ -34,6 +34,10 @@ export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNest
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Listbox['variants']['color'];
     /**
      * @defaultValue 'md'
      */
@@ -160,10 +164,6 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         searchTerm?: string;
     }) & {
         onChange?: ((event: Event) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: import("reka-ui").AcceptableValue;
-        } | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Mod extends {
             number: true;
         } ? (Mod extends {
@@ -185,6 +185,10 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -194,10 +198,7 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ListboxSlots<T>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: import("reka-ui").AcceptableValue;
-    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -217,7 +218,10 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         nullable: true;
     } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
         nullable: true;
-    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Listbox.vue

@@ -4,11 +4,12 @@ import theme from "#build/ui/listbox";
 </script>
 
 <script setup>
-import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter, useForwardPropsEmits } from "reka-ui";
+import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { createReusableTemplate, reactivePick } from "@vueuse/core";
 import { defu } from "defu";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useFilter } from "../composables/useFilter";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
@@ -20,9 +21,10 @@ import UAvatar from "./Avatar.vue";
 import UChip from "./Chip.vue";
 import UInput from "./Input.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   id: { type: String, required: false },
   as: { type: null, required: false },
+  color: { type: null, required: false },
   size: { type: null, required: false },
   items: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -54,12 +56,12 @@ const props = defineProps({
 });
 const emits = defineEmits(["entryFocus", "highlight", "leave", "change", "update:modelValue"]);
 const slots = defineSlots();
+const props = useComponentProps("listbox", _props);
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("listbox", props);
 const { filterGroups } = useFilter();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "multiple", "selectionBehavior", "highlightOnHover", "by", "orientation", "required"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defaultValue", "multiple", "selectionBehavior", "highlightOnHover", "by", "orientation", "required"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
@@ -67,7 +69,7 @@ const virtualizerProps = toRef(() => {
   });
 });
 const inputProps = toRef(() => defu(typeof props.filter === "object" ? props.filter : {}, { placeholder: t("listbox.search"), variant: "none" }));
-const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(props, { bind: false });
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(_props, { bind: false });
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -81,9 +83,9 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.listbox || {} })({
-  color: color.value,
-  size: size.value,
-  highlight: highlight.value,
+  color: color.value ?? props.color,
+  size: size.value ?? props.size,
+  highlight: highlight.value ?? props.highlight,
   disabled: disabled.value,
   virtualize: !!props.virtualize
 }));
@@ -136,54 +138,54 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
 
 <template>
   <DefineItemTemplate v-slot="{ item, index }">
-    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
       {{ get(item, props.labelKey) }}
     </ListboxGroupLabel>
 
-    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
     <RekaListboxItem
       v-else
       :value="props.valueKey ? get(item, props.valueKey) : item"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       @select="onSelect($event, item)"
     >
       <slot name="item" :item="item" :index="index" :ui="ui">
         <slot name="item-leading" :item="item" :index="index" :ui="ui">
-          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-          <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
           <UChip
             v-else-if="item.chip"
-            :size="item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+            :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
             inset
             standalone
             v-bind="item.chip"
             data-slot="itemLeadingChip"
-            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+            :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
           />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || get(item, props.descriptionKey) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
-          <span v-if="get(item, props.labelKey) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel] })">
+        <span v-if="get(item, props.labelKey) || get(item, props.descriptionKey) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+          <span v-if="get(item, props.labelKey) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel] })">
             <slot name="item-label" :item="item" :index="index">
               {{ get(item, props.labelKey) }}
             </slot>
           </span>
 
-          <span v-if="get(item, props.descriptionKey) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+          <span v-if="get(item, props.descriptionKey) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
             <slot name="item-description" :item="item" :index="index">
               {{ get(item, props.descriptionKey) }}
             </slot>
           </span>
         </span>
 
-        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
           <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
 
           <ListboxItemIndicator as-child>
-            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+            <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
           </ListboxItemIndicator>
         </span>
       </slot>
@@ -196,34 +198,34 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
     :disabled="disabled"
     :name="name"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <ListboxFilter v-if="filter" v-model="searchTerm" as-child>
+    <ListboxFilter v-if="props.filter" v-model="searchTerm" as-child>
       <UInput
-        :autofocus="autofocus"
-        :autofocus-delay="autofocusDelay"
+        :autofocus="props.autofocus"
+        :autofocus-delay="props.autofocusDelay"
         :size="size"
         v-bind="inputProps"
         data-slot="input"
-        :class="ui.input({ class: uiProp?.input })"
+        :class="ui.input({ class: props.ui?.input })"
       />
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div v-if="loading" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="props.loading" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
         <slot name="loading">
-          <UIcon :name="loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: uiProp?.loadingIcon })" />
+          <UIcon :name="props.loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: props.ui?.loadingIcon })" />
         </slot>
       </div>
-      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("listbox.noMatch", { searchTerm }) : t("listbox.noData") }}
         </slot>
       </div>
 
       <ListboxVirtualizer
-        v-else-if="!!virtualize"
+        v-else-if="!!props.virtualize"
         v-slot="{ option: item, virtualItem }"
         :options="filteredItems"
         :text-content="(item2) => get(item2, props.labelKey)"
@@ -233,7 +235,7 @@ const filteredItems = computed(() => filteredGroups.value.flatMap((group) => gro
       </ListboxVirtualizer>
 
       <template v-else>
-        <ListboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+        <ListboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
           <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
         </ListboxGroup>
       </template>

package/dist/runtime/components/Listbox.vue.d.ts

@@ -34,6 +34,10 @@ export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNest
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Listbox['variants']['color'];
     /**
      * @defaultValue 'md'
      */
@@ -160,10 +164,6 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         searchTerm?: string;
     }) & {
         onChange?: ((event: Event) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: import("reka-ui").AcceptableValue;
-        } | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Mod extends {
             number: true;
         } ? (Mod extends {
@@ -185,6 +185,10 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => any) | undefined;
+        onHighlight?: ((payload: {
+            ref: HTMLElement;
+            value: import("reka-ui").AcceptableValue;
+        } | undefined) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -194,10 +198,7 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ListboxSlots<T>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "highlight", payload: {
-        ref: HTMLElement;
-        value: import("reka-ui").AcceptableValue;
-    } | undefined) => void) & ((evt: "update:modelValue", value: Mod extends {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;
@@ -217,7 +218,10 @@ declare const __VLS_export: <T extends ArrayOrNested<ListboxItem>, VK extends Ge
         nullable: true;
     } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) | undefined : Mod extends {
         nullable: true;
-    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } ? GetModelValue<T, VK, M, undefined> | null : GetModelValue<T, VK, M, undefined>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };