@nuxt/ui 4.8.2 → 4.9.0

package/dist/runtime/components/PinInput.vue

@@ -22,6 +22,7 @@ const _props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
   fixed: { type: Boolean, required: false },
+  separator: { type: [Number, Array], required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultValue: { type: null, required: false },
@@ -36,6 +37,7 @@ const _props = defineProps({
   type: { type: null, required: false, default: "text" }
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
@@ -68,6 +70,20 @@ function autoFocus() {
     inputsRef.value[0]?.$el?.focus();
   }
 }
+function shouldInsertSeparator(index) {
+  if (props.separator === void 0) {
+    return false;
+  }
+  const position = index + 1;
+  if (position >= looseToNumber(props.length)) {
+    return false;
+  }
+  if (Array.isArray(props.separator)) {
+    return props.separator.includes(position);
+  }
+  const separator = looseToNumber(props.separator);
+  return Number.isInteger(separator) && separator > 0 && position % separator === 0;
+}
 onMounted(() => {
   setTimeout(() => {
     autoFocus();
@@ -91,16 +107,25 @@ defineExpose({
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
-    <PinInputInput
-      v-for="(ids, index) in looseToNumber(props.length)"
-      :key="ids"
-      :ref="(el) => setInputRef(index, el)"
-      :index="index"
-      data-slot="base"
-      :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
-      @blur="onBlur"
-      @focus="emitFormFocus"
-    />
+    <template v-for="(ids, index) in looseToNumber(props.length)" :key="ids">
+      <PinInputInput
+        :ref="(el) => setInputRef(index, el)"
+        :index="index"
+        data-slot="base"
+        :class="ui.base({ class: props.ui?.base })"
+        :disabled="disabled"
+        @blur="onBlur"
+        @focus="emitFormFocus"
+      />
+      <span
+        v-if="shouldInsertSeparator(index)"
+        data-slot="separator"
+        role="presentation"
+        aria-hidden="true"
+        :class="ui.separator({ class: props.ui?.separator })"
+      >
+        <slot name="separator" :index="index">•</slot>
+      </span>
+    </template>
   </PinInputRoot>
 </template>

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

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/pin-input';
@@ -33,6 +33,13 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     highlight?: boolean;
     /** Keep the mobile text size on all breakpoints. */
     fixed?: boolean;
+    /**
+     * Group inputs by inserting a separator between them.
+     * Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.
+     * @example 3 // after every 3rd input → [X][X][X] • [X][X][X]
+     * @example [3, 4] // after the 3rd and 4th inputs → [X][X][X] • [X] • [X][X][X]
+     */
+    separator?: number | number[];
     class?: any;
     ui?: PinInput['slots'];
 }
@@ -40,6 +47,11 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
     change: [event: Event];
     blur: [event: Event];
 };
+export interface PinInputSlots {
+    separator?(props: {
+        index: number;
+    }): VNode[];
+}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends PinInputType>(__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<{
@@ -55,7 +67,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
-    slots: {};
+    slots: PinInputSlots;
     emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: [T] extends ["number"] ? number[] : string[]) => void) & ((evt: "complete", value: [T] extends ["number"] ? number[] : string[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];

package/dist/runtime/components/Popover.vue

@@ -62,7 +62,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
 <template>
   <Component.Root v-slot="{ open, close }" v-bind="rootProps">
-    <Component.Trigger v-if="!!slots.default || !!props.reference" as-child :reference="props.reference" :class="props.class">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </Component.Trigger>
 
@@ -72,7 +72,7 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
 
     <Component.Portal v-bind="portalProps">
       <FieldGroupReset>
-        <Component.Content v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
+        <Component.Content v-bind="contentProps" :reference="props.reference ?? props.content?.reference" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
           <slot name="content" v-bind="close ? { close } : {}" />
 
           <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: props.ui?.arrow })" />

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

@@ -32,6 +32,8 @@ export interface PopoverProps<M extends PopoverMode = PopoverMode> extends Popov
     /**
      * The reference (or anchor) element that is being referred to for positioning.
      *
+     * Accepts an element or a virtual element (anything with `getBoundingClientRect`),
+     * and can be changed reactively to re-anchor the popover (e.g. for a guided tour).
      * If not provided will use the current component as anchor.
      */
     reference?: HoverCardTriggerProps['reference'];

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

@@ -51,6 +51,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
      * @defaultValue false
      */
     virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    /**
+     * Display fade shadows on the scrollable edges to indicate more content.
+     * Pass an object to configure the shadow size (in px).
+     * @defaultValue false
+     */
+    shadow?: boolean | {
+        size?: number;
+    };
     class?: any;
     ui?: ScrollArea['slots'];
 }

package/dist/runtime/components/ScrollArea.vue

@@ -11,11 +11,13 @@ import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
 import { useLocale } from "../composables/useLocale";
+import { useScrollShadow } from "../composables/useScrollShadow";
 const _props = defineProps({
   as: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   items: { type: Array, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
+  shadow: { type: [Boolean, Object], required: false, default: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
@@ -28,6 +30,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.scrollArea ||
   orientation: props.orientation
 }));
 const rootRef = useTemplateRef("rootRef");
+const scrollShadowStyle = props.shadow ? useScrollShadow(
+  computed(() => rootRef.value?.$el),
+  {
+    orientation: () => props.orientation ?? "vertical",
+    size: typeof props.shadow === "object" ? props.shadow.size : void 0
+  }
+).style : void 0;
 const isRtl = computed(() => dir.value === "rtl");
 const isHorizontal = computed(() => props.orientation === "horizontal");
 const isVertical = computed(() => !isHorizontal.value);
@@ -164,6 +173,7 @@ defineExpose({
     data-slot="root"
     :data-orientation="props.orientation"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="scrollShadowStyle"
   >
     <template v-if="virtualizer">
       <div

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

@@ -51,6 +51,14 @@ export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
      * @defaultValue false
      */
     virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    /**
+     * Display fade shadows on the scrollable edges to indicate more content.
+     * Pass an object to configure the shadow size (in px).
+     * @defaultValue false
+     */
+    shadow?: boolean | {
+        size?: number;
+    };
     class?: any;
     ui?: ScrollArea['slots'];
 }

package/dist/runtime/components/Select.vue

@@ -81,7 +81,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.select || {}
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
-  position: position.value
+  position: position.value,
+  multiple: props.multiple
 }));
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
@@ -145,6 +146,11 @@ function onUpdateOpen(value) {
 function isSelectItem(item) {
   return typeof item === "object" && item !== null;
 }
+function onTriggerClick(open) {
+  if (!open) {
+    triggerRef.value?.$el?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
+  }
+}
 const viewportRef = useTemplateRef("viewportRef");
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el),
@@ -173,6 +179,7 @@ defineExpose({
       data-slot="base"
       :class="ui.base({ class: [props.ui?.base, props.class] })"
       v-bind="{ ...$attrs, ...ariaAttrs }"
+      @click="onTriggerClick(open)"
     >
       <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">

package/dist/runtime/components/SelectMenu.vue

@@ -119,7 +119,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu ||
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value,
-  virtualize: !!props.virtualize
+  virtualize: !!props.virtualize,
+  multiple: props.multiple
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
@@ -334,10 +335,9 @@ defineExpose({
   </DefineItemTemplate>
 
   <ComboboxRoot
-    :id="id"
     ref="comboboxRootRef"
     v-slot="{ modelValue, open }"
-    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    v-bind="rootProps"
     ignore-filter
     as-child
     :name="name"
@@ -346,7 +346,14 @@ defineExpose({
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger ref="triggerRef" data-slot="base" :class="ui.base({ class: [props.ui?.base, props.class] })" tabindex="0">
+      <ComboboxTrigger
+        :id="id"
+        ref="triggerRef"
+        data-slot="base"
+        :class="ui.base({ class: [props.ui?.base, props.class] })"
+        tabindex="0"
+        v-bind="{ ...$attrs, ...ariaAttrs }"
+      >
         <span v-if="isLeading || !!props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
             <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

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

@@ -58,6 +58,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'

package/dist/runtime/components/Sidebar.vue

@@ -26,6 +26,7 @@ const _props = defineProps({
   close: { type: [Boolean, Object], required: false, default: false },
   closeIcon: { type: null, required: false },
   rail: { type: Boolean, required: false, default: false },
+  transition: { type: Boolean, required: false, default: true },
   mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
   class: { type: null, required: false },
@@ -83,7 +84,8 @@ const hasHeader = computed(() => !!slots.header || props.title || !!slots.title
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.sidebar || {} })({
   side: props.side,
   variant: props.variant,
-  collapsible: props.collapsible
+  collapsible: props.collapsible,
+  transition: props.transition
 }));
 const Menu = computed(() => ({
   slideover: USlideover,

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

@@ -58,6 +58,11 @@ export interface SidebarProps<T extends SidebarMode = SidebarMode> {
      * @defaultValue false
      */
     rail?: boolean;
+    /**
+     * Animate the sidebar when collapsing or expanding.
+     * @defaultValue true
+     */
+    transition?: boolean;
     /**
      * The mode of the sidebar menu on mobile.
      * @defaultValue 'slideover'

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

@@ -57,7 +57,9 @@ export interface SlideoverProps extends DialogRootProps {
     ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,13 +89,17 @@ export interface SlideoverSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: () => any;
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    leave: () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
+    onEnter?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {

package/dist/runtime/components/Slideover.vue

@@ -33,7 +33,7 @@ const _props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   modal: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
+const emits = defineEmits(["leave", "after:leave", "enter", "after:enter", "close:prevent", "update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("slideover", _props);
 const { t } = useLocale();
@@ -78,7 +78,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
           data-slot="content"
           :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
           v-bind="contentProps"
+          @enter="emits('enter')"
           @after-enter="emits('after:enter')"
+          @leave="emits('leave')"
           @after-leave="emits('after:leave')"
           v-on="contentEvents"
         >

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

@@ -57,7 +57,9 @@ export interface SlideoverProps extends DialogRootProps {
     ui?: Slideover['slots'];
 }
 export interface SlideoverEmits extends DialogRootEmits {
+    'leave': [];
     'after:leave': [];
+    'enter': [];
     'after:enter': [];
     'close:prevent': [];
 }
@@ -87,13 +89,17 @@ export interface SlideoverSlots {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    enter: () => any;
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
+    leave: () => any;
     "after:enter": () => any;
     "close:prevent": () => any;
 }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
+    onEnter?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onAfter:leave"?: (() => any) | undefined;
+    onLeave?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, InputProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -56,6 +56,12 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Configure the input or hide it with `false`.
+     * `{ fixed: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'

package/dist/runtime/components/content/ContentSearch.vue

@@ -18,6 +18,7 @@ import UCommandPalette from "../CommandPalette.vue";
 const _props = defineProps({
   size: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
+  input: { type: [Boolean, Object], required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },
@@ -38,7 +39,7 @@ const _props = defineProps({
   fullscreen: { type: Boolean, required: false, default: false },
   modal: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   trailingIcon: { type: null, required: false },
   selectedIcon: { type: null, required: false },
   childrenIcon: { type: null, required: false },
@@ -66,6 +67,12 @@ const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "trailingIcon", "selectedIcon", "childrenIcon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "back", "backIcon", "disabled", "highlightOnHover", "labelKey", "descriptionKey", "preserveGroupOrder", "virtualize", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
+const inputProps = computed(() => {
+  if (props.input === false) {
+    return false;
+  }
+  return defu(typeof props.input === "object" ? props.input : {}, { fixed: true });
+});
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
@@ -220,7 +227,7 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :input="{ fixed: true }"
+          :input="inputProps"
           :ui="transformUI(omit(ui, ['modal']), props.ui)"
           @update:model-value="onSelect"
           @update:open="open = $event"

package/dist/runtime/components/content/ContentSearch.vue.d.ts

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, InputProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -56,6 +56,12 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * Configure the input or hide it with `false`.
+     * `{ fixed: true }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    input?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'

package/dist/runtime/components/content/ContentSearchButton.d.vue.ts

@@ -5,11 +5,11 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
 export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
-     * The icon displayed in the button.
+     * The icon displayed in the button. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The label displayed in the button.
      * @defaultValue t('contentSearchButton.label')

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -18,7 +18,7 @@ import UKbd from "../Kbd.vue";
 import UTooltip from "../Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const _props = defineProps({
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   label: { type: String, required: false },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false },
@@ -64,7 +64,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch
 <template>
   <DefineButtonTemplate>
     <UButton
-      :icon="props.icon || appConfig.ui.icons.search"
+      :icon="props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.search"
       :label="props.label || t('contentSearchButton.label')"
       :variant="props.variant || (props.collapsed ? 'ghost' : 'outline')"
       v-bind="{

package/dist/runtime/components/content/ContentSearchButton.vue.d.ts

@@ -5,11 +5,11 @@ import type { ComponentConfig } from '../../types/tv';
 type ContentSearchButton = ComponentConfig<typeof theme, AppConfig, 'contentSearchButton'>;
 export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'label' | 'color' | 'variant'> {
     /**
-     * The icon displayed in the button.
+     * The icon displayed in the button. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.search
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The label displayed in the button.
      * @defaultValue t('contentSearchButton.label')

package/dist/runtime/components/prose/Kbd.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ProseKbdProps {
     value?: string;
     class?: any;
@@ -6,7 +7,7 @@ export interface ProseKbdProps {
     };
 }
 export interface ProseKbdSlots {
-    default?(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Kbd.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface ProseKbdProps {
     value?: string;
     class?: any;
@@ -6,7 +7,7 @@ export interface ProseKbdProps {
     };
 }
 export interface ProseKbdSlots {
-    default?(props?: {}): any;
+    default?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/prose/Pre.vue

@@ -50,7 +50,6 @@ function copyCode() {
       size="sm"
       :aria-label="t('prose.pre.copy')"
       :class="ui.copy({ class: props.ui?.copy })"
-      tabindex="-1"
       @click="copyCode"
     />
 

package/dist/runtime/composables/index.d.ts

@@ -18,3 +18,4 @@ export * from './useResizable';
 export * from './useScrollShadow';
 export * from './useScrollspy';
 export * from './useToast';
+export * from './useTour';

package/dist/runtime/composables/index.js

@@ -18,3 +18,4 @@ export * from "./useResizable.js";
 export * from "./useScrollShadow.js";
 export * from "./useScrollspy.js";
 export * from "./useToast.js";
+export * from "./useTour.js";

package/dist/runtime/composables/useComponentProps.d.ts

@@ -1,13 +1,13 @@
 import type { ComputedRef } from 'vue';
-import type { ClassValue } from 'tailwind-variants';
 import type * as ComponentTypes from '../types';
+import type { SlotClass } from '../types/tv';
 import type * as ui from '#build/ui';
 type ThemeSlotOverrides<T> = T extends {
     slots: infer S extends Record<string, any>;
 } ? {
-    [K in keyof S]?: ClassValue;
+    [K in keyof S]?: SlotClass;
 } : {
-    [K in keyof T]?: T[K] extends any[] ? ClassValue : T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : ClassValue;
+    [K in keyof T]?: T[K] extends any[] ? SlotClass : T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : SlotClass;
 };
 /**
  * Flat slot-class override shape: `{ button: { base: '...' }, modal: {...} }`.