@nuxt/ui 4.4.0 → 4.5.0

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

@@ -2,7 +2,7 @@ import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox-group';
 import type { CheckboxProps } from '../types';
-import type { AcceptableValue, GetItemKeys, GetModelValue } from '../types/utils';
+import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>;
 export type CheckboxGroupValue = AcceptableValue;
@@ -58,9 +58,9 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGrou
     class?: any;
     ui?: CheckboxGroup['slots'] & CheckboxProps['ui'];
 }
-export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> = Omit<CheckboxGroupRootEmits, 'update:modelValue'> & {
     change: [event: Event];
-};
+} & GetModelValueEmits<T, VK, true>;
 type SlotProps<T extends CheckboxGroupItem> = (props: {
     item: T & {
         id: string;
@@ -76,14 +76,14 @@ export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Chip.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/chip";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -18,12 +19,13 @@ const props = defineProps({
   inset: { type: Boolean, required: false, default: false },
   standalone: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const show = defineModel("show", { type: Boolean, ...{ default: true } });
 const { size } = useAvatarGroup(props);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chip", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })({
   color: props.color,
   size: size.value,
@@ -34,12 +36,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" data-slot="base" :class="ui.base({ class: props.ui?.base })">
+    <span v-if="show" data-slot="base" :class="ui.base({ class: uiProp?.base })">
       <slot name="content">
         {{ text }}
       </slot>

package/dist/runtime/components/Collapsible.vue

@@ -7,11 +7,12 @@ import { computed } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -20,17 +21,18 @@ const props = defineProps({
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("collapsible", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} })());
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>

package/dist/runtime/components/ColorPicker.vue

@@ -26,6 +26,7 @@ import { useEventListener, useElementBounding, watchThrottled, watchPausable } f
 import { isClient } from "@vueuse/shared";
 import { ColorTranslator } from "colortranslator";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -35,10 +36,11 @@ const props = defineProps({
   format: { type: String, required: false, default: "hex" },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const modelValue = defineModel({ type: String, ...void 0 });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("colorPicker", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.colorPicker || {} })({
   size: props.size
 }));
@@ -178,19 +180,19 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div data-slot="picker" :class="ui.picker({ class: props.ui?.picker })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div data-slot="picker" :class="ui.picker({ class: uiProp?.picker })">
       <div
         ref="selectorRef"
         data-slot="selector"
-        :class="ui.selector({ class: props.ui?.selector })"
+        :class="ui.selector({ class: uiProp?.selector })"
         :style="selectorStyle"
       >
-        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: uiProp?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
             data-slot="selectorThumb"
-            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :class="ui.selectorThumb({ class: uiProp?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : void 0"
           />
@@ -199,13 +201,13 @@ const trackThumbStyle = computed(() => ({
       <div
         ref="trackRef"
         data-slot="track"
-        :class="ui.track({ class: props.ui?.track })"
+        :class="ui.track({ class: uiProp?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
           data-slot="trackThumb"
-          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :class="ui.trackThumb({ class: uiProp?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : void 0"
         />

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

@@ -214,12 +214,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -229,10 +229,10 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<G, T>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => 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/CommandPalette.vue

@@ -9,6 +9,7 @@ import { defu } from "defu";
 import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
 import { highlight } from "../utils/fuse";
@@ -46,7 +47,7 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   preserveGroupOrder: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
@@ -62,6 +63,7 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("commandPalette", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
@@ -222,61 +224,61 @@ function onSelect(e, item) {
         as-child
         @select="onSelect($event, item)"
       >
-        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], active: active || item.active })">
           <slot :name="item.slot || group?.slot || 'item'" :item="item" :index="index" :ui="ui">
             <slot :name="item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index" :ui="ui">
-              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-              <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], active: active || item.active })" />
+              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+              <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], active: active || item.active })" />
               <UChip
                 v-else-if="item.chip"
-                :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                :size="item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
                 inset
                 standalone
                 v-bind="item.chip"
                 data-slot="itemLeadingChip"
-                :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
-            <span v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
-              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+            <span v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
+              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
                 <slot :name="item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index" :ui="ui">
-                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [uiProp?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
-                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
-                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey) }}</span>
+                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey) }}</span>
 
-                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
-                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
+                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [uiProp?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
                 </slot>
               </span>
 
-              <span v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`]" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`]" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
                 <slot :name="item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`" :item="item" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey) }}
                 </slot>
               </span>
             </span>
 
-            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
               <slot :name="item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="childrenIcon || appConfig.ui.icons.chevronRight"
                   data-slot="itemTrailingIcon"
-                  :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                  :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiProp?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiProp?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                 </span>
 
-                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [uiProp?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
               </slot>
 
               <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
               </ListboxItemIndicator>
             </span>
           </slot>
@@ -285,7 +287,7 @@ function onSelect(e, item) {
     </ULink>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <ListboxFilter v-if="input" v-model="searchTerm" as-child>
       <UInput
         variant="none"
@@ -298,7 +300,7 @@ function onSelect(e, item) {
         :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
         data-slot="input"
-        :class="ui.input({ class: props.ui?.input })"
+        :class="ui.input({ class: uiProp?.input })"
         @keydown.backspace="onBackspace"
       >
         <template v-if="history?.length && (back || !!slots.back)" #leading>
@@ -311,7 +313,7 @@ function onSelect(e, item) {
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
               data-slot="back"
-              :class="ui.back({ class: props.ui?.back })"
+              :class="ui.back({ class: uiProp?.back })"
               @click="navigateBack"
             />
           </slot>
@@ -328,7 +330,7 @@ function onSelect(e, item) {
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"
               data-slot="close"
-              :class="ui.close({ class: props.ui?.close })"
+              :class="ui.close({ class: uiProp?.close })"
               @click="emits('update:open', false)"
             />
           </slot>
@@ -336,8 +338,8 @@ function onSelect(e, item) {
       </UInput>
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
         <ListboxVirtualizer
           v-if="!!virtualize"
           v-slot="{ option: item, virtualItem }"
@@ -349,8 +351,8 @@ function onSelect(e, item) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="ui.label({ class: uiProp?.label })">
               {{ get(group, props.labelKey) }}
             </ListboxGroupLabel>
 
@@ -365,14 +367,14 @@ function onSelect(e, item) {
         </template>
       </div>
 
-      <div v-else data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
+      <div v-else data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" :ui="ui" />
     </div>
   </ListboxRoot>

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

@@ -214,12 +214,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -229,10 +229,10 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<G, T>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => 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/Container.d.vue.ts

@@ -5,6 +5,9 @@ export interface ContainerProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ContainerSlots {
     default(props?: {}): any;

package/dist/runtime/components/Container.vue

@@ -7,17 +7,20 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("container", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -5,6 +5,9 @@ export interface ContainerProps {
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface ContainerSlots {
     default(props?: {}): any;

package/dist/runtime/components/ContextMenu.vue

@@ -7,6 +7,7 @@ import { computed, toRef } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UContextMenuContent from "./ContextMenuContent.vue";
@@ -22,13 +23,14 @@ const props = defineProps({
   descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   pressOpenDelay: { type: Number, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("contextMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
@@ -44,9 +46,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu |
     </ContextMenuTrigger>
 
     <UContextMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :ui="ui"
-      :ui-override="props.ui"
+      :ui-override="uiProp"
       v-bind="contentProps"
       :items="items"
       :portal="portal"

package/dist/runtime/components/ContextMenuContent.vue

@@ -37,6 +37,7 @@ const props = defineProps({
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

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

@@ -6,6 +6,9 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
     default(props?: {}): any;

package/dist/runtime/components/DashboardGroup.vue

@@ -8,9 +8,11 @@ import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
+  ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
   storageKey: { type: String, required: false, default: "dashboard" },
   persistent: { type: Boolean, required: false, default: true },
@@ -19,6 +21,7 @@ const props = defineProps({
 defineSlots();
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
 const sidebarCollapsed = ref(false);
@@ -42,7 +45,7 @@ provideDashboardContext({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -6,6 +6,9 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
      */
     as?: any;
     class?: any;
+    ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
     default(props?: {}): any;

package/dist/runtime/components/DashboardNavbar.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
@@ -19,10 +20,11 @@ const props = defineProps({
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "left" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardNavbar", props);
 const dashboardContext = useDashboard({});
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavbar || {} })());
@@ -36,21 +38,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -60,11 +62,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: uiProp?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />