@nuxt/ui 3.1.1 → 3.1.2

package/.nuxt/ui/alert.ts

@@ -15,11 +15,6 @@ const variant = [
   "subtle"
 ] as const
 
-const orientation = [
-  "horizontal",
-  "vertical"
-] as const
-
 export default {
   "slots": {
     "root": "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",

package/.nuxt/ui/badge.ts

@@ -1,8 +1,3 @@
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const color = [
   "primary",
   "secondary",
@@ -39,8 +34,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]"
     },
     "color": {
       "primary": "",
@@ -88,6 +83,9 @@ export default {
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-6"
       }
+    },
+    "square": {
+      "true": ""
     }
   },
   "compoundVariants": [
@@ -230,6 +228,31 @@ export default {
       "color": "neutral" as typeof color[number],
       "variant": "subtle" as typeof variant[number],
       "class": "ring ring-inset ring-accented text-default bg-elevated"
+    },
+    {
+      "size": "xs" as typeof size[number],
+      "square": true,
+      "class": "p-0.5"
+    },
+    {
+      "size": "sm" as typeof size[number],
+      "square": true,
+      "class": "p-1"
+    },
+    {
+      "size": "md" as typeof size[number],
+      "square": true,
+      "class": "p-1"
+    },
+    {
+      "size": "lg" as typeof size[number],
+      "square": true,
+      "class": "p-1"
+    },
+    {
+      "size": "xl" as typeof size[number],
+      "square": true,
+      "class": "p-1"
     }
   ],
   "defaultVariants": {

package/.nuxt/ui/button-group.ts

@@ -1,16 +1,3 @@
-const size = [
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl"
-] as const
-
-const orientation = [
-  "horizontal",
-  "vertical"
-] as const
-
 export default {
   "base": "relative",
   "variants": {

package/.nuxt/ui/button.ts

@@ -1,8 +1,3 @@
-const buttonGroup = [
-  "horizontal",
-  "vertical"
-] as const
-
 const color = [
   "primary",
   "secondary",
@@ -44,8 +39,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]"
     },
     "color": {
       "primary": "",

package/.nuxt/ui/calendar.ts

@@ -61,7 +61,7 @@ export default {
       },
       "neutral": {
         "headCell": "text-highlighted",
-        "cellTrigger": "focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-inverted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
+        "cellTrigger": "focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10"
       }
     },
     "size": {

package/.nuxt/ui/carousel.ts

@@ -1,8 +1,3 @@
-const orientation = [
-  "vertical",
-  "horizontal"
-] as const
-
 export default {
   "slots": {
     "root": "relative focus:outline-none",

package/.nuxt/ui/checkbox-group.ts

@@ -3,6 +3,22 @@ const orientation = [
   "vertical"
 ] as const
 
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "list",
+  "card",
+  "table"
+] as const
+
 const size = [
   "xs",
   "sm",
@@ -27,6 +43,22 @@ export default {
         "fieldset": "flex-col"
       }
     },
+    "color": {
+      "primary": {},
+      "secondary": {},
+      "success": {},
+      "info": {},
+      "warning": {},
+      "error": {},
+      "neutral": {}
+    },
+    "variant": {
+      "list": {},
+      "card": {},
+      "table": {
+        "item": "border border-muted"
+      }
+    },
     "size": {
       "xs": {
         "fieldset": "gap-y-0.5",
@@ -55,7 +87,118 @@ export default {
       }
     }
   },
+  "compoundVariants": [
+    {
+      "size": "xs" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-2.5"
+      }
+    },
+    {
+      "size": "sm" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-3"
+      }
+    },
+    {
+      "size": "md" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-3.5"
+      }
+    },
+    {
+      "size": "lg" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-4"
+      }
+    },
+    {
+      "size": "xl" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-4.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        "fieldset": "gap-0 -space-x-px"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        "fieldset": "gap-0 -space-y-px"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "variant": "table" as typeof variant[number],
+      "disabled": true,
+      "class": {
+        "item": "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
   "defaultVariants": {
-    "size": "md" as typeof size[number]
+    "size": "md" as typeof size[number],
+    "variant": "list" as typeof variant[number],
+    "color": "primary" as typeof color[number]
   }
 }

package/.nuxt/ui/color-picker.ts

@@ -10,10 +10,10 @@ export default {
   "slots": {
     "root": "data-[disabled]:opacity-75",
     "picker": "flex gap-4",
-    "selector": "rounded-md",
+    "selector": "rounded-md touch-none",
     "selectorBackground": "w-full h-full relative rounded-md",
     "selectorThumb": "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
-    "track": "w-[8px] relative rounded-md",
+    "track": "w-[8px] relative rounded-md touch-none",
     "trackThumb": "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed"
   },
   "variants": {

package/.nuxt/ui/input-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": {
     "root": "relative inline-flex items-center",
@@ -80,11 +71,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/input-number.ts

@@ -40,6 +40,16 @@ export default {
     "decrement": "absolute flex items-center"
   },
   "variants": {
+    "buttonGroup": {
+      "horizontal": {
+        "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 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"
+      }
+    },
     "color": {
       "primary": "",
       "secondary": "",

package/.nuxt/ui/input.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/link.ts

@@ -3,13 +3,20 @@ export default {
   "variants": {
     "active": {
       "true": "text-primary",
-      "false": [
-        "text-muted hover:text-default",
-        "transition-colors"
-      ]
+      "false": "text-muted"
     },
     "disabled": {
       "true": "cursor-not-allowed opacity-75"
     }
-  }
+  },
+  "compoundVariants": [
+    {
+      "active": false,
+      "disabled": false,
+      "class": [
+        "hover:text-default",
+        "transition-colors"
+      ]
+    }
+  ]
 }

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": [
@@ -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": [
@@ -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/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.2",
   "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.BvUP-pSb.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.2";
 
 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>