@nuxt/ui 3.1.1 → 3.1.3

package/.nuxt/ui/select-menu.ts

@@ -1,8 +1,3 @@
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const size = [
   "xs",
   "sm",
@@ -29,10 +24,6 @@ const color = [
   "neutral"
 ] as const
 
-const type = [
-  "file"
-] as const
-
 export default {
   "slots": {
     "base": [
@@ -49,10 +40,10 @@ export default {
     "placeholder": "truncate text-dimmed",
     "arrow": "fill-default",
     "content": [
-      "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
+      "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
       "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"
     ],
-    "viewport": "divide-y divide-default scroll-py-1",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "py-2 text-center text-sm text-muted",
     "label": "font-semibold text-highlighted",
@@ -77,8 +68,8 @@ export default {
   },
   "variants": {
     "buttonGroup": {
-      "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-      "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+      "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
+      "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
     },
     "size": {
       "xs": {

package/.nuxt/ui/select.ts

@@ -1,8 +1,3 @@
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const size = [
   "xs",
   "sm",
@@ -29,10 +24,6 @@ const color = [
   "neutral"
 ] as const
 
-const type = [
-  "file"
-] as const
-
 export default {
   "slots": {
     "base": [
@@ -48,8 +39,8 @@ export default {
     "value": "truncate pointer-events-none",
     "placeholder": "truncate text-dimmed",
     "arrow": "fill-default",
-    "content": "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
-    "viewport": "divide-y divide-default scroll-py-1",
+    "content": "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "py-2 text-center text-sm text-muted",
     "label": "font-semibold text-highlighted",
@@ -72,8 +63,8 @@ export default {
   },
   "variants": {
     "buttonGroup": {
-      "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-      "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+      "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
+      "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
     },
     "size": {
       "xs": {

package/.nuxt/ui/tabs.ts

@@ -32,7 +32,7 @@ export default {
     "list": "relative flex p-1 group",
     "indicator": "absolute transition-[translate,width] duration-200",
     "trigger": [
-      "group relative inline-flex items-center shrink-0 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",
+      "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",
@@ -54,12 +54,13 @@ export default {
     "variant": {
       "pill": {
         "list": "bg-elevated rounded-lg",
-        "trigger": "flex-1 w-full",
+        "trigger": "grow",
         "indicator": "rounded-md shadow-xs"
       },
       "link": {
         "list": "border-default",
-        "indicator": "rounded-full"
+        "indicator": "rounded-full",
+        "trigger": "focus:outline-none"
       }
     },
     "orientation": {

package/.nuxt/ui/textarea.ts

@@ -1,8 +1,3 @@
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const size = [
   "xs",
   "sm",
@@ -29,10 +24,6 @@ const color = [
   "neutral"
 ] as const
 
-const type = [
-  "file"
-] as const
-
 export default {
   "slots": {
     "root": "relative inline-flex items-center",
@@ -50,11 +41,11 @@ export default {
   "variants": {
     "buttonGroup": {
       "horizontal": {
-        "root": "group",
+        "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
       },
       "vertical": {
-        "root": "group",
+        "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
       }
     },

package/.nuxt/ui/toast.ts

@@ -8,11 +8,6 @@ const color = [
   "neutral"
 ] as const
 
-const orientation = [
-  "horizontal",
-  "vertical"
-] as const
-
 export default {
   "slots": {
     "root": "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",

package/.nuxt/ui/tooltip.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "content": "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2 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",
+    "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",

package/.nuxt/ui.css

@@ -1,6 +1,6 @@
 @source "./ui";
 
-@theme default inline {
+@theme static {
   --color-old-neutral-50: oklch(98.5% 0 0);
   --color-old-neutral-100: oklch(97% 0 0);
   --color-old-neutral-200: oklch(92.2% 0 0);
@@ -12,6 +12,9 @@
   --color-old-neutral-800: oklch(26.9% 0 0);
   --color-old-neutral-900: oklch(20.5% 0 0);
   --color-old-neutral-950: oklch(14.5% 0 0);
+}
+
+@theme default inline {
   --color-primary-50: var(--ui-color-primary-50);
 	--color-primary-100: var(--ui-color-primary-100);
 	--color-primary-200: var(--ui-color-primary-200);

package/cli/templates.mjs

@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
   }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "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.CbtTMMzt.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.Bix4DSU4.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.1.1";
+const version = "3.1.3";
 
 const module = defineNuxtModule({
   meta: {
@@ -43,12 +43,21 @@ const module = defineNuxtModule({
         nuxt.options[key] = defu(nuxt.options[key], options2);
       }
     }
-    await registerModule("@nuxt/icon", "icon", { cssLayer: "components" });
+    await registerModule("@nuxt/icon", "icon", {
+      cssLayer: "components"
+    });
     if (options.fonts) {
-      await registerModule("@nuxt/fonts", "fonts", { experimental: { processCSSVariables: true } });
+      await registerModule("@nuxt/fonts", "fonts", {
+        defaults: {
+          weights: [400, 500, 600, 700]
+        }
+      });
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", {
+        classSuffix: "",
+        disableTransition: true
+      });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     addComponentsDir({

package/dist/runtime/components/Accordion.vue

@@ -34,34 +34,34 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
       :value="item.value || String(index)"
       :disabled="item.disabled"
-      :class="ui.item({ class: props.ui?.item })"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" :class="ui.header({ class: props.ui?.header })">
-        <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
+      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
+        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open">
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: props.ui?.content })">
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
-          <div :class="ui.body({ class: props.ui?.body })">
+          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open">
               {{ item.content }}
             </slot>

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

@@ -18,6 +18,8 @@ export interface AccordionItem {
     /** A unique value for the accordion item. Defaults to the index. */
     value?: string;
     disabled?: boolean;
+    class?: any;
+    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
     [key: string]: any;
 }
 export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {

package/dist/runtime/components/Alert.vue

@@ -39,7 +39,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="leading">
       <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />

package/dist/runtime/components/Avatar.vue

@@ -51,7 +51,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -68,7 +68,7 @@ function onError() {
     <Slot v-else v-bind="$attrs">
       <slot>
         <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '\xA0' }}</span>
+        <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
   </Primitive>

package/dist/runtime/components/AvatarGroup.vue

@@ -58,7 +58,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>

package/dist/runtime/components/Badge.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
+  square: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   icon: { type: String, required: false },
@@ -26,7 +27,7 @@ const props = defineProps({
   trailing: { type: Boolean, required: false },
   trailingIcon: { type: String, required: false }
 });
-defineSlots();
+const slots = defineSlots();
 const appConfig = useAppConfig();
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
@@ -34,19 +35,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} }
   color: props.color,
   variant: props.variant,
   size: buttonGroupSize.value || props.size,
+  square: props.square || !slots.default && !props.label,
   buttonGroup: orientation.value
 }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>
-      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>

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

@@ -22,6 +22,8 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
      * @defaultValue 'md'
      */
     size?: Badge['variants']['size'];
+    /** Render the badge with equal padding on all sides. */
+    square?: boolean;
     class?: any;
     ui?: Badge['slots'];
 }

package/dist/runtime/components/Breadcrumb.vue

@@ -30,19 +30,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb ||
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ol :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.item({ class: props.ui?.item })">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
               <slot :name="item.slot || 'item'" :item="item" :index="index">
                 <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="index === items.length - 1" :index="index">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items.length - 1 })" />
-                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items.length - 1 })" />
+                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: index === items.length - 1 })" />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
+                <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
                   <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
@@ -54,9 +54,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb ||
           </ULink>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
           <slot name="separator">
-            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
+            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
           </slot>
         </li>
       </template>

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

@@ -11,6 +11,8 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     icon?: string;
     avatar?: AvatarProps;
     slot?: string;
+    class?: any;
+    ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
     [key: string]: any;
 }
 export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {

package/dist/runtime/components/Button.vue

@@ -115,14 +115,13 @@ const ui = computed(() => tv({
     v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
-    :class="ui.base({ class: [props.class, props.ui?.base] })"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
     <ULinkBase
       v-bind="slotProps"
       :class="ui.base({
-  class: [props.class, props.ui?.base],
+  class: [props.ui?.base, props.class],
   active,
   ...active && activeVariant ? { variant: activeVariant } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -135,7 +134,7 @@ const ui = computed(() => tv({
       </slot>
 
       <slot>
-        <span v-if="label" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label !== void 0 && label !== null" :class="ui.label({ class: props.ui?.label, active })">
           {{ label }}
         </span>
       </slot>

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/button';
-import type { LinkProps } from './Link.vue';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { LinkProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {

package/dist/runtime/components/Calendar.vue

@@ -47,6 +47,7 @@ const props = defineProps({
   initialFocus: { type: Boolean, required: false },
   isDateDisabled: { type: Function, required: false },
   isDateUnavailable: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
   nextPage: { type: Function, required: false },
   prevPage: { type: Function, required: false }
 });
@@ -80,7 +81,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
     :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>

package/dist/runtime/components/Card.vue

@@ -21,7 +21,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

package/dist/runtime/components/Carousel.vue

@@ -129,6 +129,9 @@ function onSelect(api) {
   selectedIndex.value = api?.selectedScrollSnap() || 0;
   emits("select", selectedIndex.value);
 }
+function isCarouselItem(item) {
+  return typeof item === "object" && item !== null;
+}
 onMounted(() => {
   if (!emblaApi.value) {
     return;
@@ -151,7 +154,7 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"
   >
     <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
@@ -161,7 +164,7 @@ defineExpose({
           :key="index"
           role="group"
           aria-roledescription="slide"
-          :class="ui.item({ class: props.ui?.item })"
+          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
         >
           <slot :item="item" :index="index" />
         </div>

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

@@ -11,7 +11,12 @@ import theme from '#build/ui/carousel';
 import type { ButtonProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
-export type CarouselItem = AcceptableValue;
+interface _CarouselItem {
+    class?: any;
+    ui?: Pick<Carousel['slots'], 'item'>;
+    [key: string]: any;
+}
+export type CarouselItem = _CarouselItem | AcceptableValue;
 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
     /**
      * The element or component this component should render as.

package/dist/runtime/components/Checkbox.vue

@@ -54,7 +54,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -75,7 +75,7 @@ function onUpdate(value) {
     </div>
 
     <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>

package/dist/runtime/components/CheckboxGroup.vue

@@ -10,6 +10,7 @@ import { useAppConfig } from "#imports";
 import { useFormField } from "../composables/useFormField";
 import { get, omit } from "../utils";
 import { tv } from "../utils/tv";
+import UCheckbox from "./Checkbox.vue";
 const props = defineProps({
   as: { type: null, required: false },
   legend: { type: String, required: false },
@@ -18,6 +19,7 @@ const props = defineProps({
   descriptionKey: { type: String, required: false, default: "description" },
   items: { type: Array, required: false },
   size: { type: null, required: false },
+  variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
   class: { type: null, required: false },
   ui: { type: void 0, required: false },
@@ -28,7 +30,6 @@ const props = defineProps({
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
   color: { type: null, required: false },
-  variant: { type: null, required: false },
   indicator: { type: null, required: false },
   icon: { type: String, required: false }
 });
@@ -43,7 +44,9 @@ const id = _id.value ?? useId();
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkboxGroup || {} })({
   size: size.value,
   required: props.required,
-  orientation: props.orientation
+  orientation: props.orientation,
+  color: props.color,
+  variant: props.variant
 }));
 function normalizeItem(item) {
   if (item === null) {
@@ -91,7 +94,7 @@ function onUpdate(value) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
@@ -109,8 +112,8 @@ function onUpdate(value) {
         :size="size"
         :name="name"
         :disabled="item.disabled || disabled"
-        :ui="props.ui ? omit(props.ui, ['root']) : void 0"
-        :class="ui.item({ class: props.ui?.item })"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
       >
         <template v-for="(_, name) in proxySlots" #[name]>
           <slot :name="name" :item="item" />