@nuxt/ui 2.18.6 → 2.19.0

package/dist/runtime/ui.config/forms/range.js

@@ -10,11 +10,11 @@ export default {
     background: "bg-{color}-500 dark:bg-{color}-400",
     size: {
       "2xs": "h-px",
-      xs: "h-0.5",
-      sm: "h-1",
-      md: "h-2",
-      lg: "h-3",
-      xl: "h-4",
+      "xs": "h-0.5",
+      "sm": "h-1",
+      "md": "h-2",
+      "lg": "h-3",
+      "xl": "h-4",
       "2xl": "h-5"
     }
   },
@@ -25,11 +25,11 @@ export default {
     ring: "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current",
     size: {
       "2xs": "[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]",
-      xs: "[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]",
-      sm: "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
-      md: "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
-      lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
-      xl: "[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "xs": "[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]",
+      "sm": "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "md": "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "lg": "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "xl": "[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
       "2xl": "[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
     }
   },
@@ -39,21 +39,21 @@ export default {
     rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
     size: {
       "2xs": "[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px",
-      xs: "[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5",
-      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
-      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
-      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3",
-      xl: "[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4",
+      "xs": "[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5",
+      "sm": "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
+      "md": "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
+      "lg": "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3",
+      "xl": "[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4",
       "2xl": "[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5"
     }
   },
   size: {
     "2xs": "h-1.5",
-    xs: "h-2",
-    sm: "h-3",
-    md: "h-4",
-    lg: "h-5",
-    xl: "h-6",
+    "xs": "h-2",
+    "sm": "h-3",
+    "md": "h-4",
+    "lg": "h-5",
+    "xl": "h-6",
     "2xl": "h-7"
   },
   default: {

package/dist/runtime/ui.config/forms/selectMenu.d.ts

@@ -46,6 +46,15 @@ declare const _default: {
         selectedIcon: string;
         clearSearchOnClose: boolean;
         showCreateOptionWhen: string;
+        searchablePlaceholder: {
+            label: string;
+        };
+        empty: {
+            label: string;
+        };
+        optionEmpty: {
+            label: string;
+        };
     };
     arrow: {
         ring: string;

package/dist/runtime/ui.config/forms/selectMenu.js

@@ -22,7 +22,16 @@ export default {
   default: {
     selectedIcon: "i-heroicons-check-20-solid",
     clearSearchOnClose: false,
-    showCreateOptionWhen: "empty"
+    showCreateOptionWhen: "empty",
+    searchablePlaceholder: {
+      label: "Search..."
+    },
+    empty: {
+      label: "No options."
+    },
+    optionEmpty: {
+      label: 'No results for "{query}".'
+    }
   },
   arrow: {
     ...arrow,

package/dist/runtime/ui.config/forms/toggle.js

@@ -6,32 +6,32 @@ export default {
   inactive: "bg-gray-200 dark:bg-gray-700",
   size: {
     "2xs": "h-3 w-5",
-    xs: "h-3.5 w-6",
-    sm: "h-4 w-7",
-    md: "h-5 w-9",
-    lg: "h-6 w-11",
-    xl: "h-7 w-[3.25rem]",
+    "xs": "h-3.5 w-6",
+    "sm": "h-4 w-7",
+    "md": "h-5 w-9",
+    "lg": "h-6 w-11",
+    "xl": "h-7 w-[3.25rem]",
     "2xl": "h-8 w-[3.75rem]"
   },
   container: {
     base: "pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
     active: {
       "2xs": "translate-x-2 rtl:-translate-x-2",
-      xs: "translate-x-2.5 rtl:-translate-x-2.5",
-      sm: "translate-x-3 rtl:-translate-x-3",
-      md: "translate-x-4 rtl:-translate-x-4",
-      lg: "translate-x-5 rtl:-translate-x-5",
-      xl: "translate-x-6 rtl:-translate-x-6",
+      "xs": "translate-x-2.5 rtl:-translate-x-2.5",
+      "sm": "translate-x-3 rtl:-translate-x-3",
+      "md": "translate-x-4 rtl:-translate-x-4",
+      "lg": "translate-x-5 rtl:-translate-x-5",
+      "xl": "translate-x-6 rtl:-translate-x-6",
       "2xl": "translate-x-7 rtl:-translate-x-7"
     },
     inactive: "translate-x-0 rtl:-translate-x-0",
     size: {
       "2xs": "h-2 w-2",
-      xs: "h-2.5 w-2.5",
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5",
-      xl: "h-6 w-6",
+      "xs": "h-2.5 w-2.5",
+      "sm": "h-3 w-3",
+      "md": "h-4 w-4",
+      "lg": "h-5 w-5",
+      "xl": "h-6 w-6",
       "2xl": "h-7 w-7"
     }
   },
@@ -41,11 +41,11 @@ export default {
     inactive: "opacity-0 ease-out duration-100",
     size: {
       "2xs": "h-2 w-2",
-      xs: "h-2 w-2",
-      sm: "h-2 w-2",
-      md: "h-3 w-3",
-      lg: "h-4 w-4",
-      xl: "h-5 w-5",
+      "xs": "h-2 w-2",
+      "sm": "h-2 w-2",
+      "md": "h-3 w-3",
+      "lg": "h-4 w-4",
+      "xl": "h-5 w-5",
       "2xl": "h-6 w-6"
     },
     on: "text-{color}-500 dark:text-{color}-400",

package/dist/runtime/ui.config/layout/divider.d.ts

@@ -47,6 +47,7 @@ declare const _default: {
     label: string;
     default: {
         size: "2xs";
+        type: "solid";
     };
 };
 export default _default;

package/dist/runtime/ui.config/layout/divider.js

@@ -16,19 +16,19 @@ export default {
     size: {
       horizontal: {
         "2xs": "border-t",
-        xs: "border-t-[2px]",
-        sm: "border-t-[3px]",
-        md: "border-t-[4px]",
-        lg: "border-t-[5px]",
-        xl: "border-t-[6px]"
+        "xs": "border-t-[2px]",
+        "sm": "border-t-[3px]",
+        "md": "border-t-[4px]",
+        "lg": "border-t-[5px]",
+        "xl": "border-t-[6px]"
       },
       vertical: {
         "2xs": "border-s",
-        xs: "border-s-[2px]",
-        sm: "border-s-[3px]",
-        md: "border-s-[4px]",
-        lg: "border-s-[5px]",
-        xl: "border-s-[6px]"
+        "xs": "border-s-[2px]",
+        "sm": "border-s-[3px]",
+        "md": "border-s-[4px]",
+        "lg": "border-s-[5px]",
+        "xl": "border-s-[6px]"
       }
     },
     type: {
@@ -46,6 +46,7 @@ export default {
   },
   label: "text-sm",
   default: {
-    size: "2xs"
+    size: "2xs",
+    type: "solid"
   }
 };

package/dist/runtime/ui.config/navigation/horizontalNavigation.js

@@ -18,7 +18,7 @@ export default {
     size: "2xs"
   },
   badge: {
-    base: "flex-shrink-0 ml-auto relative rounded",
+    base: "flex-shrink-0 ms-auto relative rounded",
     color: "gray",
     variant: "solid",
     size: "xs"

package/dist/runtime/ui.config/navigation/verticalNavigation.js

@@ -20,7 +20,7 @@ export default {
     size: "2xs"
   },
   badge: {
-    base: "flex-shrink-0 ml-auto relative rounded",
+    base: "flex-shrink-0 ms-auto relative rounded",
     color: "gray",
     variant: "solid",
     size: "xs"

package/dist/runtime/ui.config/popper.js

@@ -4,6 +4,5 @@ export const arrow = {
   rounded: "before:rounded-sm",
   background: "before:bg-gray-200 dark:before:bg-gray-800",
   shadow: "before:shadow",
-  // eslint-disable-next-line quotes
   placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
 };

package/dist/runtime/utils/colors.js

@@ -1,6 +1,6 @@
-import { omit } from "./lodash.js";
 import { kebabCase, camelCase, upperFirst } from "scule";
 import defaultColors from "tailwindcss/colors.js";
+import { omit } from "./lodash.js";
 const colorsToExclude = [
   "inherit",
   "transparent",
@@ -206,11 +206,11 @@ const safelistByComponent = {
   }]
 };
 const safelistComponentAliasesMap = {
-  "USelect": "UInput",
-  "USelectMenu": "UInput",
-  "UTextarea": "UInput",
-  "URadioGroup": "URadio",
-  "UMeterGroup": "UMeter"
+  USelect: "UInput",
+  USelectMenu: "UInput",
+  UTextarea: "UInput",
+  URadioGroup: "URadio",
+  UMeterGroup: "UMeter"
 };
 const colorsAsRegex = (colors) => colors.join("|");
 export const excludeColors = (colors) => {
@@ -270,7 +270,7 @@ export const generateSafelist = (colors, globalColors) => {
 };
 export const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
   const classes = [];
-  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs;
+  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/g;
   const matches = content.matchAll(regex);
   const components = Object.keys(safelistByComponent).map((component) => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`);
   for (const match of matches) {

package/dist/runtime/utils/index.js

@@ -3,7 +3,7 @@ import { extendTailwindMerge } from "tailwind-merge";
 const customTwMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      icons: [(classPart) => /^i-/.test(classPart)]
+      icons: [(classPart) => classPart.startsWith("i-")]
     }
   }
 });
@@ -44,7 +44,7 @@ export function hexToRgb(hex) {
     return r + r + g + g + b + b;
   });
   const result = rxHex.exec(hex);
-  return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+  return result ? `${Number.parseInt(result[1], 16)} ${Number.parseInt(result[2], 16)} ${Number.parseInt(result[3], 16)}` : null;
 }
 export function getSlotsChildren(slots) {
   let children = slots.default?.();
@@ -64,8 +64,8 @@ export function getSlotsChildren(slots) {
   return children || [];
 }
 export function looseToNumber(val) {
-  const n = parseFloat(val);
-  return isNaN(n) ? val : n;
+  const n = Number.parseFloat(val);
+  return Number.isNaN(n) ? val : n;
 }
 export * from "./lodash.js";
 export * from "./link.js";

package/dist/runtime/utils/link.js

@@ -114,7 +114,7 @@ export const getNuxtLinkProps = (props) => {
   }, {});
 };
 export const getULinkProps = (props) => {
-  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps), "ariaLabel"];
+  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps), "ariaLabel", "title"];
   return keys.reduce((acc, key) => {
     if (props[key] !== void 0) {
       acc[key] = props[key];

package/dist/runtime/utils/lodash.js

@@ -9,7 +9,7 @@ export function get(object, path, defaultValue) {
   if (typeof path === "string") {
     path = path.split(".").map((key) => {
       const numKey = Number(key);
-      return isNaN(numKey) ? key : numKey;
+      return Number.isNaN(numKey) ? key : numKey;
     });
   }
   let result = object;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.18.6",
-  "packageManager": "pnpm@9.11.0",
+  "version": "2.19.0",
+  "packageManager": "pnpm@9.12.3",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -26,7 +26,7 @@
     "build:docs": "nuxi generate docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs",
     "release": "release-it",
     "test": "vitest"
@@ -34,50 +34,52 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.23",
-    "@iconify-json/heroicons": "^1.2.0",
-    "@nuxt/icon": "^1.5.1",
-    "@nuxt/kit": "^3.13.2",
-    "@nuxtjs/color-mode": "^3.5.1",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@iconify-json/heroicons": "^1.2.1",
+    "@nuxt/icon": "^1.6.1",
+    "@nuxt/kit": "^3.14.0",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@vueuse/core": "^11.1.0",
-    "@vueuse/integrations": "^11.1.0",
-    "@vueuse/math": "^11.1.0",
+    "@vueuse/core": "^11.2.0",
+    "@vueuse/integrations": "^11.2.0",
+    "@vueuse/math": "^11.2.0",
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
     "ohash": "^1.1.4",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12"
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.4.0",
+    "@nuxt/eslint-config": "^0.6.1",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/test-utils": "^3.14.2",
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@nuxt/test-utils": "^3.14.4",
+    "@release-it/conventional-changelog": "^9.0.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^8.57.0",
+    "eslint": "^9.14.0",
     "happy-dom": "^14.12.3",
     "joi": "^17.13.3",
-    "nuxt": "^3.13.2",
-    "release-it": "^17.6.0",
+    "nuxt": "^3.14.0",
+    "release-it": "^17.10.0",
+    "superstruct": "^2.0.2",
     "unbuild": "^2.0.0",
     "valibot": "^0.42.1",
     "valibot30": "npm:valibot@0.30.0",
     "valibot31": "npm:valibot@0.31.0",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.4",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.1.6",
+    "vue-tsc": "^2.1.10",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   },
   "resolutions": {
     "@nuxt/ui": "workspace:*",
+    "@nuxt/content": "2.13.2",
     "@nuxtjs/mdc": "0.9.0"
   }
 }