@nuxt/ui 4.8.2 → 4.10.0

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,8 @@ 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 },
+  unmountOnHide: { type: Boolean, 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 },
@@ -65,7 +67,13 @@ const { open, mapNavigationItems, mapLinks, mapSearchResults, postFilter } = use
 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 modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal", "unmountOnHide"));
+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: {
@@ -74,7 +82,7 @@ const fuse = computed(() => defu({}, props.fuse, {
   },
   resultLimit: 12
 }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearch || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.contentSearch || {} })({
   size: props.size,
   fullscreen: props.fullscreen
 }));
@@ -220,7 +228,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,12 @@ 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 } from '../Button.vue';
+import type { LinkProps, LinkPropsKeys } from '../Link.vue';
+import type { ModalProps } from '../Modal.vue';
+import type { CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem } from '../CommandPalette.vue';
+import type { IconProps } from '../Icon.vue';
+import type { InputProps } from '../Input.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -44,7 +49,7 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
      */
     icon?: IconProps['name'];
 }
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal' | 'unmountOnHide'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
     /**
      * @defaultValue 'md'
      */
@@ -56,6 +61,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'
@@ -128,7 +139,7 @@ declare const __VLS_export: <T extends ContentSearchLink>(__VLS_props: NonNullab
     slots: ContentSearchSlots;
     emit: (event: "update:searchTerm", value: string) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,15 +1,19 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-search-button';
-import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, ButtonSlots } from '../Button.vue';
+import type { IconProps } from '../Icon.vue';
+import type { KbdProps } from '../Kbd.vue';
+import type { TooltipProps } from '../Tooltip.vue';
+import type { LinkPropsKeys } from '../Link.vue';
 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')
@@ -47,10 +51,10 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
-    tooltip: boolean | TooltipProps;
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;
+    tooltip: boolean | TooltipProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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 },
@@ -56,7 +56,7 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} :
 const { t } = useLocale();
 const { open } = useContentSearch();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSearchButton || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.contentSearchButton || {} })({
   collapsed: props.collapsed
 }));
 </script>
@@ -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

@@ -1,15 +1,19 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-search-button';
-import type { ButtonProps, ButtonSlots, IconProps, KbdProps, TooltipProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, ButtonSlots } from '../Button.vue';
+import type { IconProps } from '../Icon.vue';
+import type { KbdProps } from '../Kbd.vue';
+import type { TooltipProps } from '../Tooltip.vue';
+import type { LinkPropsKeys } from '../Link.vue';
 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')
@@ -47,10 +51,10 @@ export interface ContentSearchButtonProps extends Omit<ButtonProps, LinkPropsKey
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ContentSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSearchButtonProps> & Readonly<{}>, {
-    color: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
-    tooltip: boolean | TooltipProps;
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     kbds: KbdProps["value"][] | KbdProps[];
     collapsed: boolean;
+    tooltip: boolean | TooltipProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-surround';
-import type { IconProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>;
 export interface ContentSurroundLink extends ContentNavigationItem {
@@ -57,7 +57,7 @@ declare const __VLS_export: <T extends ContentSurroundLink>(__VLS_props: NonNull
     slots: ContentSurroundSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -34,7 +34,7 @@ const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate({
     direction: String
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentSurround || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.contentSurround || {} })());
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft));
 const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight));
 </script>
@@ -65,7 +65,7 @@ const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConf
     <span v-else :class="prefix('hidden sm:block')">&nbsp;</span>
   </DefineLinkTemplate>
 
-  <Primitive v-if="props.surround" :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive v-if="props.surround" :as="props.as" data-slot="root" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ReuseLinkTemplate :link="props.surround[0]" :icon="prevIcon" direction="left" />
     <ReuseLinkTemplate :link="props.surround[1]" :icon="nextIcon" direction="right" />
   </Primitive>

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-surround';
-import type { IconProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSurround = ComponentConfig<typeof theme, AppConfig, 'contentSurround'>;
 export interface ContentSurroundLink extends ContentNavigationItem {
@@ -57,7 +57,7 @@ declare const __VLS_export: <T extends ContentSurroundLink>(__VLS_props: NonNull
     slots: ContentSurroundSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,7 @@ import type { VNode } from 'vue';
 import type { TocLink } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-toc';
-import type { IconProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
@@ -92,7 +92,7 @@ declare const __VLS_export: <T extends ContentTocLink>(__VLS_props: NonNullable<
     slots: ContentTocSlots<T>;
     emit: ((evt: "update:open", value: boolean) => void) & ((evt: "move", id: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,13 +3,14 @@ import theme from "#build/ui/content/content-toc";
 </script>
 
 <script setup>
-import { computed, onUnmounted } from "vue";
+import { computed, onUnmounted, useTemplateRef, watch, nextTick } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRouter, useAppConfig, useNuxtApp } from "#imports";
 import { useComponentProps } from "../../composables/useComponentProps";
 import { useForwardProps } from "../../composables/useForwardProps";
 import { useScrollspy } from "../../composables/useScrollspy";
+import { useScrollShadow } from "../../composables/useScrollShadow";
 import { useLocale } from "../../composables/useLocale";
 import { usePrefix } from "../../composables/usePrefix";
 import { tv } from "../../utils/tv";
@@ -38,6 +39,8 @@ const router = useRouter();
 const appConfig = useAppConfig();
 const { activeHeadings, updateHeadings } = useScrollspy();
 const prefix = usePrefix();
+const contentRef = useTemplateRef("contentRef");
+const { style: scrollShadowStyle } = useScrollShadow(contentRef);
 const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
   props: {
     links: Array,
@@ -46,7 +49,7 @@ const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
 });
 const [DefineTriggerTemplate, ReuseTriggerTemplate] = createReusableTemplate();
 const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.contentToc || {} })({
   color: props.color,
   highlight: props.highlight,
   highlightVariant: props.highlightVariant,
@@ -67,17 +70,40 @@ function flattenLinksWithLevel(links, level = 0) {
   ]);
 }
 const linkHeight = 1.75;
+const activeIndex = computed(() => {
+  if (!activeHeadings.value?.length) {
+    return -1;
+  }
+  return flattenLinks(props.links || []).findIndex((link) => activeHeadings.value.includes(link.id));
+});
 const indicatorStyle = computed(() => {
   if (!activeHeadings.value?.length) {
     return;
   }
-  const flatLinks = flattenLinks(props.links || []);
-  const activeIndex = flatLinks.findIndex((link) => activeHeadings.value.includes(link.id));
   return {
     "--indicator-size": `${linkHeight * activeHeadings.value.length}rem`,
-    "--indicator-position": activeIndex >= 0 ? `${activeIndex * linkHeight}rem` : "0rem"
+    "--indicator-position": activeIndex.value >= 0 ? `${activeIndex.value * linkHeight}rem` : "0rem"
   };
 });
+watch(activeIndex, (index) => {
+  const container = contentRef.value;
+  if (index < 0 || !container) {
+    return;
+  }
+  nextTick(() => {
+    const link = container.querySelectorAll('a[data-slot="link"]')[index];
+    if (!link) {
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+    const linkOffset = linkRect.top - containerRect.top + container.scrollTop;
+    container.scrollTo({
+      top: linkOffset - container.clientHeight / 2 + linkRect.height / 2,
+      behavior: "smooth"
+    });
+  });
+});
 const circuitMaskStyle = computed(() => {
   if (!props.highlight || props.highlightVariant !== "circuit" || !props.links?.length) {
     return;
@@ -174,7 +200,7 @@ onUnmounted(() => {
     </slot>
   </DefineContentTemplate>
 
-  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...rootProps, ...$attrs }" :default-open="props.defaultOpen" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" data-slot="root" v-bind="{ ...rootProps, ...$attrs }" :default-open="props.defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
         <slot name="top" :links="props.links" />
@@ -193,7 +219,7 @@ onUnmounted(() => {
           <ReuseTriggerTemplate :open="open" />
         </p>
 
-        <div data-slot="content" :class="ui.content({ class: [props.ui?.content, prefix('hidden lg:flex')] })">
+        <div ref="contentRef" data-slot="content" :class="ui.content({ class: [props.ui?.content, prefix('hidden lg:flex')] })" :style="scrollShadowStyle">
           <ReuseContentTemplate />
         </div>
       </template>

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

@@ -3,7 +3,7 @@ import type { VNode } from 'vue';
 import type { TocLink } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/content/content-toc';
-import type { IconProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc'>;
 export type ContentTocLink = TocLink & {
@@ -92,7 +92,7 @@ declare const __VLS_export: <T extends ContentTocLink>(__VLS_props: NonNullable<
     slots: ContentTocSlots<T>;
     emit: ((evt: "update:open", value: boolean) => void) & ((evt: "move", id: string) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/locale/LocaleSelect.d.vue.ts

@@ -1,4 +1,4 @@
-import type { SelectMenuProps } from '../../types';
+import type { SelectMenuProps } from '../SelectMenu.vue';
 import type { Locale } from '../../types/locale';
 export interface LocaleSelectProps extends Omit<SelectMenuProps<Locale<any>[], 'code', false>, 'items' | 'modelValue'> {
     locales?: Locale<any>[];

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -61,6 +61,8 @@ function getEmojiFlag(locale) {
   const languageToCountry = {
     ar: "sa",
     // Arabic -> Saudi Arabia
+    be: "by",
+    // Belarusian -> Belarus
     bn: "bd",
     // Bengali -> Bangladesh
     ca: "es",
@@ -77,6 +79,8 @@ function getEmojiFlag(locale) {
     // English -> United States (default)
     et: "ee",
     // Estonian -> Estonia
+    eu: "es",
+    // Basque -> Spain
     gl: "es",
     // Galician -> Spain
     he: "il",
@@ -85,6 +89,8 @@ function getEmojiFlag(locale) {
     // Hindi -> India
     hy: "am",
     // Armenian -> Armenia
+    is: "is",
+    // Icelandic -> Iceland
     ja: "jp",
     // Japanese -> Japan
     ka: "ge",
@@ -99,6 +105,8 @@ function getEmojiFlag(locale) {
     // Kyrgyz -> Kyrgyzstan
     lb: "lu",
     // Luxembourgish -> Luxembourg
+    lo: "la",
+    // Lao -> Laos
     ms: "my",
     // Malay -> Malaysia
     nb: "no",

package/dist/runtime/components/locale/LocaleSelect.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectMenuProps } from '../../types';
+import type { SelectMenuProps } from '../SelectMenu.vue';
 import type { Locale } from '../../types/locale';
 export interface LocaleSelectProps extends Omit<SelectMenuProps<Locale<any>[], 'code', false>, 'items' | 'modelValue'> {
     locales?: Locale<any>[];

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

@@ -17,7 +17,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.a", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.a || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.a || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/accordion';
-import type { AccordionProps } from '../../types';
+import type { AccordionProps } from '../Accordion.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseAccordion = ComponentConfig<typeof theme, AppConfig, 'accordion', 'ui.prose'>;
 export interface ProseAccordionProps {

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

@@ -17,7 +17,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("prose.accordion", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accordion || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.accordion || {} }));
 const rerenderCount = ref(1);
 const items = computed(() => {
   rerenderCount.value;

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/accordion';
-import type { AccordionProps } from '../../types';
+import type { AccordionProps } from '../Accordion.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseAccordion = ComponentConfig<typeof theme, AppConfig, 'accordion', 'ui.prose'>;
 export interface ProseAccordionProps {

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

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.accordionItem", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accordionItem || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.accordionItem || {} }));
 </script>
 
 <template>

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

@@ -15,7 +15,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.badge", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.badge || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.badge || {} }));
 </script>
 
 <template>

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

@@ -14,7 +14,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.blockquote", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.blockquote || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.blockquote || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/callout';
-import type { IconProps, LinkProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
+import type { LinkProps } from '../Link.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.prose'>;
 export interface ProseCalloutProps {

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

@@ -21,7 +21,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.callout", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.callout || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.callout || {} })({
   color: props.color,
   to: !!props.to
 }));
@@ -29,7 +29,7 @@ const target = computed(() => props.target || (!!props.to && typeof props.to ===
 </script>
 
 <template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <div v-bind="!props.to ? $attrs : {}" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
       v-if="props.to"
       v-bind="{ to: props.to, target, ...$attrs }"

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/callout';
-import type { IconProps, LinkProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
+import type { LinkProps } from '../Link.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseCallout = ComponentConfig<typeof theme, AppConfig, 'callout', 'ui.prose'>;
 export interface ProseCalloutProps {

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/card';
-import type { IconProps, LinkProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
+import type { LinkProps } from '../Link.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>;
 export interface ProseCardProps {

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

@@ -23,7 +23,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("prose.card", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.card || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.card || {} })({
   color: props.color,
   to: !!props.to,
   title: !!props.title
@@ -33,7 +33,7 @@ const ariaLabel = computed(() => (props.title || "Card link").trim());
 </script>
 
 <template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <div v-bind="!props.to ? $attrs : {}" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <ULink
       v-if="props.to"
       :aria-label="ariaLabel"

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

@@ -1,7 +1,8 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/card';
-import type { IconProps, LinkProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
+import type { LinkProps } from '../Link.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseCard = ComponentConfig<typeof theme, AppConfig, 'card', 'ui.prose'>;
 export interface ProseCardProps {

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

@@ -14,7 +14,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.cardGroup", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.cardGroup || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.cardGroup || {} }));
 </script>
 
 <template>

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

@@ -16,7 +16,7 @@ const _props = defineProps({
 defineSlots();
 const props = useComponentProps("prose.code", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.code || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.code || {} }));
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/prose/code-collapse';
-import type { IconProps } from '../../types';
+import type { IconProps } from '../Icon.vue';
 import type { ComponentConfig } from '../../types/tv';
 type ProseCodeCollapse = ComponentConfig<typeof theme, AppConfig, 'codeCollapse', 'ui.prose'>;
 export interface ProseCodeCollapseProps {

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

@@ -22,7 +22,7 @@ const props = useComponentProps("prose.codeCollapse", _props);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeCollapse || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.prose?.codeCollapse || {} })({
   open: open.value
 }));
 </script>