@vuetify/nightly 3.8.1-next.2025-04-18 → 3.8.2-dev.2025-04-17

package/lib/styles/settings/_utilities.scss

@@ -511,6 +511,11 @@ $utilities: () !default;
           text-transform
         ),
         class: text,
+        unimportant: (
+          font-family,
+          font-weight,
+          line-height
+        ),
         values: variables.$flat-typography
       ),
       "text-transform": (

package/lib/styles/settings/_variables.scss

@@ -5,7 +5,7 @@
 
 $color-pack: true !default;
 $reset: true !default;
-$layers: true !default;
+$layers: false !default;
 
 $body-font-family: 'Roboto', sans-serif !default;
 $font-size-root: 1rem !default;
@@ -291,7 +291,7 @@ $typography: map-deep-merge(
       'line-height': 2.6,
       'letter-spacing': .0892857143em,
       'font-family': $body-font-family,
-      'text-transform': none
+      'text-transform': uppercase
     ),
     'caption': (
       'size': .75rem,
@@ -341,6 +341,7 @@ $decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
 $accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
 
 // Elements
+$bootable-transition: 0.2s $decelerated-easing !default;
 $blockquote-font-size: 18px !default;
 $blockquote-font-weight: 300 !default;
 

package/lib/styles/tools/_bootable.sass

@@ -0,0 +1,3 @@
+@mixin bootable()
+  &:not([data-booted="true"])
+    transition: none !important

package/lib/styles/tools/_border.sass

@@ -1,8 +1,8 @@
-@mixin border($color: null, $style: null, $width: null, $thin-width: false)
+@mixin border($color: null, $style: null, $width: null, $thin-width: false, $important: false)
   &
-    border-color: $color
-    border-style: $style
-    border-width: $width
+    border-color: $color if($important, !important, null)
+    border-style: $style if($important, !important, null)
+    border-width: $width if($important, !important, null)
 
   @if $thin-width
     &--border

package/lib/styles/tools/_display.sass

@@ -1,6 +1,16 @@
 @use './functions' as *
 @use '../settings' as *
 
+@mixin visually-hidden
+  &
+    position: absolute !important
+    height: 1px
+    width: 1px
+    overflow: hidden
+    clip: rect(1px, 1px, 1px, 1px)
+    white-space: nowrap
+    display: initial
+
 =media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
   $min: breakpoint-min($name, $breakpoints)
   @if $min

package/lib/styles/tools/_elevation.sass

@@ -1,9 +1,9 @@
 @use 'sass:map'
 @use '../settings'
 
-@mixin elevation($z)
+@mixin elevation($z, $important: false)
   &
-    box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z)
+    box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null)
 
 @mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1))
   &

package/lib/styles/tools/_index.sass

@@ -1,10 +1,12 @@
 @forward '_absolute'
 @forward '_functions'
+@forward '_bootable'
 @forward '_border'
 @forward '_density'
 @forward '_elevation'
 @forward '_layer'
 @forward '_position'
+@forward '_radius'
 @forward '_rounded'
 @forward '_rtl'
 @forward '_states'

package/lib/styles/tools/_layer.scss

@@ -2,10 +2,8 @@
 
 @mixin layer ($name) {
   @if (settings.$layers) {
-    @at-root (without: layer) {
-      @layer vuetify.#{$name} {
-        @content;
-      }
+    @layer vuetify.#{$name} {
+      @content;
     }
   } @else {
     @content;

package/lib/styles/tools/_position.sass

@@ -1,4 +1,4 @@
-@mixin position($positions)
+@mixin position($positions, $important: false)
   @each $position in $positions
     &--#{$position}
-      position: #{$position}
+      position: #{$position} if($important, !important, null)

package/lib/styles/tools/_radius.sass

@@ -0,0 +1,10 @@
+@use 'sass:map'
+@use '../settings'
+
+@mixin radius($r, $important: false)
+  &
+    // Key exists within the $rounded variable
+    @if (map.has-key(settings.$rounded, $r))
+      border-radius: map.get(settings.$rounded, $r) if($important, !important, null)
+    @else
+      border-radius: $r if($important, !important, null)

package/lib/styles/tools/_rounded.sass

@@ -1,3 +1,3 @@
-@mixin rounded($radius: null)
+@mixin rounded($radius: null, $important: false)
   &
-    border-radius: $radius
+    border-radius: $radius if($important, !important, null)

package/lib/styles/tools/_utilities.sass

@@ -57,4 +57,8 @@
       @if meta.type-of($value) == 'list' and list.length($properties) == list.length($value)
         $val: list.nth($value, $i)
       @if $val != false
-        #{$property}: #{meta.inspect($val)}
+        // Check if unimportant property exists.
+        // This allows you to conditional skip
+        // defining a property as important.
+        $unimportant: map.get($utility, unimportant)
+        #{$property}: #{meta.inspect($val) if(list.index($unimportant, $property), null, !important)}

package/lib/styles/utilities/_elevation.scss

@@ -7,7 +7,7 @@
     $z: 24;
     @while $z >= 0 {
       .elevation-#{$z} {
-        @include tools.elevation($z);
+        @include tools.elevation($z, $important: true);
       }
 
       $z: $z - 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/nightly",
   "description": "Vue Material Component Framework",
-  "version": "3.8.1-next.2025-04-18",
+  "version": "3.8.2-dev.2025-04-17",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -104,99 +104,100 @@
     "node": "^12.20 || >=14.13"
   },
   "scripts": {
-    "watch": "pnpm run build:lib --watch",
+    "watch": "node --run build:lib -- --watch",
     "dev": "NODE_ENV=development vite",
     "dev:ssr": "NODE_ENV=development VITE_SSR=true vite-ssr",
     "dev:prod": "concurrently \"vite build -w\" \"vite preview\"",
     "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json",
-    "build": "rimraf lib dist && concurrently \"pnpm run build:dist\" \"pnpm run build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && pnpm run build:types",
+    "build": "rimraf lib dist && node --run build:lib && concurrently \"node --run build:dist\" \"node --run build:types:lib\" -n \"dist,types\" --kill-others-on-fail -gr && node --run build:types:bundle",
     "build:dist": "rollup --config build/rollup.config.js",
     "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .js",
-    "build:types": "tspc --pretty --emitDeclarationOnly -p tsconfig.dist.json && node build/transform-types.js && rollup --config build/rollup.types.config.js",
+    "build:types": "node --run build:types:lib && node --run build:types:bundle",
+    "build:types:lib": "tspc --pretty --emitDeclarationOnly -p tsconfig.dist.json && node build/transform-types.js",
+    "build:types:bundle": "rollup --config build/rollup.types.config.js",
     "tsc": "tsc",
     "test": "vitest",
     "test:unit": "vitest --project unit",
     "test:browser": "vitest --project browser",
     "test:open": "TEST_BAIL=1 vitest --project browser -w",
-    "test:coverage": "pnpm run test --coverage",
+    "test:coverage": "node --run test -- --coverage",
     "test:percy": "percy exec -- vitest --project browser",
     "test:all": "concurrently -gr 'vitest --project unit' 'vitest --project browser --shard=1/5' 'vitest --project browser --shard=2/5' 'vitest --project browser --shard=3/5' 'vitest --project browser --shard=4/5' 'vitest --project browser --shard=5/5'",
     "lint": "concurrently -n \"tsc,eslint\" --kill-others-on-fail \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint src -f codeframe --max-warnings 0\"",
     "lint:fix": "concurrently -n \"tsc,eslint\" \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint --fix src\""
   },
   "devDependencies": {
-    "@date-io/core": "3.0.0",
-    "@date-io/date-fns": "3.0.0",
-    "@date-io/dayjs": "^3.0.0",
+    "@date-io/core": "3.2.0",
+    "@date-io/date-fns": "3.2.1",
+    "@date-io/dayjs": "^3.2.0",
     "@date-io/luxon": "^3.2.0",
     "@date-io/moment": "^3.2.0",
-    "@formatjs/intl": "^2.10.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@intlify/devtools-types": "^11.1.1",
-    "@percy/cli": "^1.29.3",
-    "@percy/sdk-utils": "^1.29.3",
-    "@rollup/plugin-alias": "^5.1.0",
+    "@formatjs/intl": "^2.10.15",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@intlify/devtools-types": "^11.1.3",
+    "@percy/cli": "^1.30.10",
+    "@percy/sdk-utils": "^1.30.10",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@testing-library/dom": "npm:@vuetify/testing-library-dom@1.0.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@types/node": "^22.5.4",
     "@types/resize-observer-browser": "^0.1.11",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vitest/browser": "^3.0.5",
-    "@vitest/coverage-istanbul": "^3.0.5",
-    "@vitest/ui": "^3.0.5",
-    "@vue/babel-plugin-jsx": "^1.2.5",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-istanbul": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
+    "@vue/babel-plugin-jsx": "^1.4.0",
     "@vue/reactivity": "^3.5.13",
     "@vue/shared": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
-    "acorn-walk": "^8.3.2",
-    "autoprefixer": "^10.4.19",
+    "acorn-walk": "^8.3.4",
+    "autoprefixer": "^10.4.21",
     "babel-plugin-add-import-extension": "1.5.1",
-    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-define": "^2.1.4",
     "babel-polyfill": "^6.26.0",
-    "concurrently": "^8.2.2",
-    "cssnano": "^6.1.2",
+    "cssnano": "^7.0.6",
     "csstype": "^3.1.3",
     "cy-mobile-commands": "^0.3.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.13",
-    "dotenv": "^16.4.5",
-    "eslint-plugin-vitest": "0.4.1",
-    "expect": "^28.1.3",
-    "fast-glob": "^3.3.2",
+    "dotenv": "^16.5.0",
+    "eslint-plugin-vitest": "0.5.4",
+    "expect": "^29.7.0",
+    "fast-glob": "^3.3.3",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^26.0.0",
-    "luxon": "^3.5.0",
-    "micromatch": "^4.0.5",
+    "jsdom": "^26.1.0",
+    "luxon": "^3.6.1",
+    "micromatch": "^4.0.8",
     "moment": "^2.30.1",
-    "postcss": "^8.4.38",
+    "postcss": "^8.5.3",
     "roboto-fontface": "^0.10.0",
-    "rollup": "^4.34.8",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-sass": "^1.12.21",
+    "rollup": "^4.40.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-sass": "^1.15.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "timezone-mock": "^1.3.6",
     "ts-node": "^10.9.2",
-    "ts-patch": "^3.2.1",
-    "typescript-transform-paths": "^3.5.1",
+    "ts-patch": "^3.3.0",
+    "typescript-transform-paths": "^3.5.5",
     "unplugin-auto-import": "19.1.0",
     "unplugin-vue-components": "^0.27.4",
     "upath": "^2.0.1",
     "vite": "^6.1.0",
-    "vite-ssr": "^0.17.1",
-    "vitest": "^3.0.5",
+    "vite-ssr": "^0.17.2",
+    "vitest": "^3.1.1",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.1",
     "vue-router": "^4.5.0",
-    "webdriverio": "^8.40.5"
+    "webdriverio": "^9.12.5"
   },
   "peerDependencies": {
     "typescript": ">=4.7",