@nuxt/ui 3.2.0 → 3.3.0

package/.nuxt/ui/kbd.ts

@@ -1,6 +1,17 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
 const variant = [
   "solid",
   "outline",
+  "soft",
   "subtle"
 ] as const
 
@@ -13,10 +24,20 @@ const size = [
 export default {
   "base": "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
   "variants": {
+    "color": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
     "variant": {
-      "solid": "bg-inverted text-inverted",
-      "outline": "bg-default text-highlighted ring ring-inset ring-accented",
-      "subtle": "bg-elevated text-default ring ring-inset ring-accented"
+      "solid": "",
+      "outline": "",
+      "soft": "",
+      "subtle": ""
     },
     "size": {
       "sm": "h-4 min-w-[16px] text-[10px]",
@@ -24,8 +45,151 @@ export default {
       "lg": "h-6 min-w-[24px] text-[12px]"
     }
   },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-primary"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-secondary"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-success"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-info"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-warning"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-error"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-primary/50 text-primary"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-secondary/50 text-secondary"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-success/50 text-success"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-info/50 text-info"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-warning/50 text-warning"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-error/50 text-error"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-primary bg-primary/10"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-secondary bg-secondary/10"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-success bg-success/10"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-info bg-info/10"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-warning bg-warning/10"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-error bg-error/10"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-primary ring ring-inset ring-primary/25 bg-primary/10"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-secondary ring ring-inset ring-secondary/25 bg-secondary/10"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-success ring ring-inset ring-success/25 bg-success/10"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-info ring ring-inset ring-info/25 bg-info/10"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-warning ring ring-inset ring-warning/25 bg-warning/10"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "text-error ring ring-inset ring-error/25 bg-error/10"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "solid" as typeof variant[number],
+      "class": "text-inverted bg-inverted"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "outline" as typeof variant[number],
+      "class": "ring ring-inset ring-accented text-default bg-default"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "soft" as typeof variant[number],
+      "class": "text-default bg-elevated"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": "ring ring-inset ring-accented text-default bg-elevated"
+    }
+  ],
   "defaultVariants": {
     "variant": "outline" as typeof variant[number],
+    "color": "neutral" as typeof color[number],
     "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/table.ts

@@ -22,6 +22,7 @@ export default {
     "caption": "sr-only",
     "thead": "relative",
     "tbody": "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    "tfoot": "relative",
     "tr": "data-[selected=true]:bg-elevated/50",
     "th": "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     "td": "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
@@ -38,7 +39,14 @@ export default {
     },
     "sticky": {
       "true": {
+        "thead": "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur",
+        "tfoot": "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      "header": {
         "thead": "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+      },
+      "footer": {
+        "tfoot": "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
       }
     },
     "loading": {

package/.nuxt/ui/tabs.ts

@@ -35,11 +35,13 @@ export default {
       "group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
-    "content": "focus:outline-none w-full",
     "leadingIcon": "shrink-0",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
-    "label": "truncate"
+    "label": "truncate",
+    "trailingBadge": "shrink-0",
+    "trailingBadgeSize": "sm",
+    "content": "focus:outline-none w-full"
   },
   "variants": {
     "color": {

package/.nuxt/ui/toast.ts

@@ -18,45 +18,38 @@ export default {
     "avatar": "shrink-0",
     "avatarSize": "2xl",
     "actions": "flex gap-1.5 shrink-0",
-    "progress": "absolute inset-x-0 bottom-0 h-1 z-[-1]",
+    "progress": "absolute inset-x-0 bottom-0",
     "close": "p-0"
   },
   "variants": {
     "color": {
       "primary": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
-        "icon": "text-primary",
-        "progress": "bg-primary"
+        "icon": "text-primary"
       },
       "secondary": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary",
-        "icon": "text-secondary",
-        "progress": "bg-secondary"
+        "icon": "text-secondary"
       },
       "success": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success",
-        "icon": "text-success",
-        "progress": "bg-success"
+        "icon": "text-success"
       },
       "info": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info",
-        "icon": "text-info",
-        "progress": "bg-info"
+        "icon": "text-info"
       },
       "warning": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning",
-        "icon": "text-warning",
-        "progress": "bg-warning"
+        "icon": "text-warning"
       },
       "error": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error",
-        "icon": "text-error",
-        "progress": "bg-error"
+        "icon": "text-error"
       },
       "neutral": {
         "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted",
-        "icon": "text-highlighted",
-        "progress": "bg-inverted"
+        "icon": "text-highlighted"
       }
     },
     "orientation": {

package/.nuxt/ui/tooltip.ts

@@ -3,7 +3,7 @@ export default {
     "content": "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
     "arrow": "fill-default",
     "text": "truncate",
-    "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
+    "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
     "kbdsSize": "sm"
   }
 }

package/cli/templates.mjs

@@ -35,7 +35,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 ${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props {
   /**
@@ -80,7 +80,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 ${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
@@ -147,7 +147,8 @@ const test = ({ name, prose, content }) => {
       ? undefined
       : `
 import { describe, it, expect } from 'vitest'
-import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import type { ${upperName}Props, ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
 import ComponentRender from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {

package/dist/module.d.mts

@@ -1,6 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
+type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | (string & {});
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {});
 interface ModuleOptions {
     /**
      * Prefix for components
@@ -30,13 +32,25 @@ interface ModuleOptions {
          * @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
          * @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
          */
-        colors?: string[];
+        colors?: Color[];
         /**
          * Enable or disable transitions on components
          * @defaultValue `true`
          * @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
          */
         transitions?: boolean;
+        defaultVariants?: {
+            /**
+             * The default color variant to use for components
+             * @defaultValue `'primary'`
+             */
+            color?: Color;
+            /**
+             * The default size variant to use for components
+             * @defaultValue `'md'`
+             */
+            size?: Size;
+        };
     };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BPVxSPGY.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BkSj2DmF.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.2.0";
+const version = "3.3.0";
 
 const module = defineNuxtModule({
   meta: {
@@ -38,7 +38,7 @@ const module = defineNuxtModule({
     }
     async function registerModule(name2, key, options2) {
       if (!hasNuxtModule(name2)) {
-        await installModule(name2, options2);
+        await installModule(name2, defu(nuxt.options[key], options2));
       } else {
         nuxt.options[key] = defu(nuxt.options[key], options2);
       }

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

@@ -73,5 +73,5 @@ declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Await
 };
 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/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.d.ts

@@ -28,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.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" />
@@ -195,10 +196,13 @@ 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)"