@nuxt/ui 3.1.3 → 3.3.0

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

@@ -53,7 +53,7 @@ export interface AlertProps {
     ui?: Alert['slots'];
 }
 export interface AlertEmits {
-    (e: 'update:open', value: boolean): void;
+    'update:open': [value: boolean];
 }
 export interface AlertSlots {
     leading(props?: {}): any;
@@ -66,7 +66,7 @@ export interface AlertSlots {
         };
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

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

@@ -20,5 +20,5 @@ declare const _default: <T extends Messages>(__VLS_props: NonNullable<Awaited<ty
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Avatar.vue

@@ -10,6 +10,7 @@ import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
+import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "span" },
@@ -18,6 +19,7 @@ const props = defineProps({
   icon: { type: String, required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   ui: { type: null, required: false }
@@ -51,7 +53,13 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <component
+    :is="props.chip ? UChip : Primitive"
+    :as="as"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="props.style"
+  >
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -71,5 +79,5 @@ function onError() {
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
-  </Primitive>
+  </component>
 </template>

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

@@ -1,5 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
+import type { ChipProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
@@ -19,6 +20,7 @@ export interface AvatarProps {
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    chip?: boolean | ChipProps;
     class?: any;
     style?: any;
     ui?: Avatar['slots'];
@@ -26,7 +28,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;

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

@@ -22,7 +22,7 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -32,7 +32,7 @@ export interface BadgeSlots {
     default(props?: {}): any;
     trailing(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 export default _default;

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

@@ -62,5 +62,5 @@ declare const _default: <T extends BreadcrumbItem>(__VLS_props: NonNullable<Awai
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Button.vue

@@ -10,7 +10,7 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
-import { omit } from "../utils";
+import { omit, mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { pickLinkProps } from "../utils/link";
 import UIcon from "./Icon.vue";
@@ -41,11 +41,11 @@ const props = defineProps({
   as: { type: null, required: false },
   type: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  active: { type: Boolean, required: false, default: void 0 },
+  active: { type: Boolean, required: false },
   exact: { type: Boolean, required: false },
   exactQuery: { type: [Boolean, String], required: false },
   exactHash: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false },
   to: { type: null, required: false },
   href: { type: null, required: false },
   external: { type: Boolean, required: false },
@@ -56,7 +56,7 @@ const props = defineProps({
   prefetch: { type: Boolean, required: false },
   prefetchOn: { type: [String, Object], required: false },
   noPrefetch: { type: Boolean, required: false },
-  activeClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false },
   viewTransition: { type: Boolean, required: false },
@@ -89,10 +89,10 @@ const ui = computed(() => tv({
     variants: {
       active: {
         true: {
-          base: props.activeClass
+          base: mergeClasses(appConfig.ui?.button?.variants?.active?.true?.base, props.activeClass)
         },
         false: {
-          base: props.inactiveClass
+          base: mergeClasses(appConfig.ui?.button?.variants?.active?.false?.base, props.inactiveClass)
         }
       }
     }

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

@@ -35,11 +35,7 @@ export interface ButtonSlots {
     default(props?: {}): any;
     trailing(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
-    activeClass: string;
-    active: boolean;
-    inactiveClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -23,7 +23,7 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
     orientation: ButtonGroup["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonGroupSlots>;
 export default _default;

package/dist/runtime/components/Calendar.vue

@@ -36,6 +36,7 @@ const props = defineProps({
   allowNonContiguousRanges: { type: Boolean, required: false },
   pagedNavigation: { type: Boolean, required: false },
   preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
   weekStartsOn: { type: Number, required: false },
   weekdayFormat: { type: String, required: false },
   fixedWeeks: { type: Boolean, required: false, default: true },
@@ -49,7 +50,9 @@ const props = defineProps({
   isDateUnavailable: { type: Function, required: false },
   isDateHighlightable: { type: Function, required: false },
   nextPage: { type: Function, required: false },
-  prevPage: { type: Function, required: false }
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
 defineSlots();

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

@@ -107,5 +107,5 @@ declare const _default: <R extends boolean, M extends boolean>(__VLS_props: NonN
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -20,7 +20,7 @@ export interface CardSlots {
     default(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CardProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Carousel.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/carousel";
 import { computed, ref, watch, onMounted } from "vue";
 import useEmblaCarousel from "embla-carousel-vue";
 import { Primitive, useForwardProps } from "reka-ui";
-import { reactivePick, computedAsync } from "@vueuse/core";
+import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
@@ -62,34 +62,36 @@ const options = computed(() => ({
   axis: props.orientation === "horizontal" ? "x" : "y",
   direction: dir.value === "rtl" ? "rtl" : "ltr"
 }));
-const plugins = computedAsync(async () => {
-  const plugins2 = [];
+const plugins = ref([]);
+async function loadPlugins() {
+  const emblaPlugins = [];
   if (props.autoplay) {
     const AutoplayPlugin = await import("embla-carousel-autoplay").then((r) => r.default);
-    plugins2.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
+    emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === "boolean" ? {} : props.autoplay));
   }
   if (props.autoScroll) {
     const AutoScrollPlugin = await import("embla-carousel-auto-scroll").then((r) => r.default);
-    plugins2.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
+    emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === "boolean" ? {} : props.autoScroll));
   }
   if (props.autoHeight) {
     const AutoHeightPlugin = await import("embla-carousel-auto-height").then((r) => r.default);
-    plugins2.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
+    emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === "boolean" ? {} : props.autoHeight));
   }
   if (props.classNames) {
     const ClassNamesPlugin = await import("embla-carousel-class-names").then((r) => r.default);
-    plugins2.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
+    emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === "boolean" ? {} : props.classNames));
   }
   if (props.fade) {
     const FadePlugin = await import("embla-carousel-fade").then((r) => r.default);
-    plugins2.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
+    emblaPlugins.push(FadePlugin(typeof props.fade === "boolean" ? {} : props.fade));
   }
   if (props.wheelGestures) {
     const { WheelGesturesPlugin } = await import("embla-carousel-wheel-gestures");
-    plugins2.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
+    emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === "boolean" ? {} : props.wheelGestures));
   }
-  return plugins2;
-});
+  plugins.value = emblaPlugins;
+}
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true });
 const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
 watch([options, plugins], () => {
   emblaApi.value?.reInit(options.value, plugins.value);
@@ -162,8 +164,7 @@ defineExpose({
         <div
           v-for="(item, index) in items"
           :key="index"
-          role="group"
-          aria-roledescription="slide"
+          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
           :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
@@ -176,7 +177,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -187,7 +187,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
@@ -197,11 +196,15 @@ defineExpose({
         />
       </div>
 
-      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
         <template v-for="(_, index) in scrollSnaps" :key="index">
           <button
+            type="button"
+            role="tab"
             :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :aria-selected="selectedIndex === index"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           />
         </template>

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

@@ -123,5 +123,5 @@ declare const _default: <T extends CarouselItem>(__VLS_props: NonNullable<Awaite
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Checkbox.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   name: { type: String, required: false },
-  value: { type: [String, Number, Object, null], required: false },
+  value: { type: null, required: false },
   id: { type: String, required: false },
   defaultValue: { type: [Boolean, String], required: false }
 });

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

@@ -56,7 +56,7 @@ export interface CheckboxSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (payload: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps & {

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

@@ -80,5 +80,5 @@ declare const _default: <T extends CheckboxGroupItem>(__VLS_props: NonNullable<A
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -31,7 +31,7 @@ export interface ChipProps {
     ui?: Chip['slots'];
 }
 export interface ChipEmits {
-    (e: 'update:show', payload: boolean): void;
+    'update:show': [payload: boolean];
 }
 export interface ChipSlots {
     default(props?: {}): any;
@@ -39,7 +39,7 @@ export interface ChipSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps & {
     show?: boolean;

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

@@ -20,7 +20,7 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/ColorPicker.vue

@@ -14,7 +14,7 @@ function HSVtoHSL(hsv) {
   return {
     H: hsv.h,
     S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
-    L: Math.round(x / 2)
+    L: x / 2
   };
 }
 </script>
@@ -53,7 +53,6 @@ const pickedColor = computed({
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
-      decimals: 2,
       labUnit: "percent",
       cmykUnit: "percent",
       cmykFunction: "cmyk"

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

@@ -34,7 +34,7 @@ export type ColorPickerProps = {
 };
 declare const _default: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<ColorPickerProps & {
     modelValue?: string;

package/dist/runtime/components/CommandPalette.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/command-palette";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -26,10 +26,13 @@ const props = defineProps({
   as: { type: null, required: false },
   icon: { type: String, required: false },
   selectedIcon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: String, required: false },
+  back: { type: [Boolean, Object], required: false, default: true },
+  backIcon: { type: String, required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   labelKey: { type: String, required: false, default: "label" },
@@ -40,6 +43,7 @@ const props = defineProps({
   modelValue: { type: null, required: false, default: "" },
   defaultValue: { type: null, required: false },
   highlightOnHover: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false }
 });
@@ -48,7 +52,7 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "selectionBehavior"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading", "loadingIcon"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
 const fuse = computed(() => defu({}, props.fuse, {
@@ -60,7 +64,10 @@ const fuse = computed(() => defu({}, props.fuse, {
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
 }));
-const items = computed(() => props.groups?.filter((group) => {
+const history = ref([]);
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t("commandPalette.placeholder"));
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1]] : props.groups);
+const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`);
     return false;
@@ -69,7 +76,7 @@ const items = computed(() => props.groups?.filter((group) => {
     return false;
   }
   return true;
-}).flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
+})?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
 function getGroupWithItems(group, items2) {
   if (group?.postFilter && typeof group.postFilter === "function") {
@@ -86,7 +93,7 @@ function getGroupWithItems(group, items2) {
     })
   };
 }
-const groups = computed(() => {
+const filteredGroups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
@@ -97,37 +104,87 @@ const groups = computed(() => {
     return acc;
   }, {});
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = props.groups?.find((group2) => group2.id === id);
+    const group = groups.value?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
     return getGroupWithItems(group, items2);
   }).filter((group) => !!group);
-  const nonFuseGroups = props.groups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
   }, [...fuseGroups]);
 });
+const listboxRootRef = useTemplateRef("listboxRootRef");
+function navigate(item) {
+  if (!item.children?.length) {
+    return;
+  }
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  });
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function navigateBack() {
+  if (!history.value.length) {
+    return;
+  }
+  history.value.pop();
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack();
+  }
+}
+function onSelect(e, item) {
+  if (item.children?.length) {
+    e.preventDefault();
+    navigate(item);
+  } else {
+    item.onSelect?.(e);
+  }
+}
 </script>
 
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
         variant="none"
         :autofocus="autofocus"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
       >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="typeof back === 'object' ? back : {}"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
         <template v-if="close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
-              size="md"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
@@ -141,8 +198,8 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey) }}
           </ListboxGroupLabel>
@@ -150,10 +207,10 @@ const groups = computed(() => {
           <ListboxItem
             v-for="(item, index) in group.items"
             :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
             :disabled="item.disabled"
             as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
           >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
               <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -184,13 +241,20 @@ const groups = computed(() => {
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :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>
+
                       <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                     </slot>
 
-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                     </ListboxItemIndicator>
                   </span>
@@ -207,5 +271,9 @@ const groups = computed(() => {
         </slot>
       </div>
     </ListboxContent>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" :ui="ui" />
+    </div>
   </ListboxRoot>
 </template>