Merge branch 'master' into dev

lerna.json

@@ -14,4 +14,4 @@
   },
   "npmClient": "pnpm",
   "version": "3.7.0-beta.1"
-}
+}

package.json

@@ -22,7 +22,9 @@
     "postversion": "node scripts/post-release-merge.js",
     "clean": "lerna clean",
     "changelog": "conventional-changelog -u -p vuetify",
-    "all-checks": "pnpm run lint && lerna run test && lerna run cy:run && pnpm run build"
+    "all-checks": "pnpm run lint && lerna run test && lerna run cy:run && pnpm run build",
+    "vue-ecosystem-ci:build": "pnpm --filter vuetify run build",
+    "vue-ecosystem-ci:test": "pnpm --filter vuetify run lint && pnpm --filter vuetify run test"
   },
   "engines": {
     "node": ">=18.19.0 || >=20.6.0"
@@ -73,7 +75,7 @@
     "mkdirp": "^3.0.1",
     "moment": "^2.30.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.74.1",
+    "sass": "^1.77.8",
     "semver": "^7.6.0",
     "shelljs": "^0.8.5",
     "stringify-object": "^5.0.0",

packages/api-generator/src/locale/en/VSkeletonLoader.json

@@ -2,6 +2,7 @@
   "props": {
     "boilerplate": "Remove the loading animation from the skeleton.",
     "loading": "Applies a loading animation with a on-hover loading cursor. A value of **false** will only work when there is content in the `default` slot.",
+    "loadingText": "aria-label for the element in a loading state.",
     "type": "A string delimited list of skeleton components to create such as `type=\"text@3\"` or `type=\"card, list-item\"`. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as **article@3** and **paragraph@2** which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options.",
     "types": "A custom types object that will be combined with the pre-defined options. For a list of available pre-defined options, see the **type** prop."
   }

packages/docs/src/pages/en/components/number-inputs.md

@@ -56,6 +56,16 @@ Here we display a list of settings that could be applied within an application.
 
 <ApiInline hide-links />
 
+## Caveats
+
+::: warning
+**v-number-input** is designed for simple numeric input usage. It has limitations with very long integers and highly precise decimal arithmetic due to JavaScript number precision issues:
+
+- For integers, **v-model** is restricted within [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) and [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) to ensure precision is not lost.
+
+- To cope with JavaScript floating-point issues (e.g. 0.1 + 0.2 === 0.30000000000000004), Vuetify's internal logic uses **toFixed()** with the maximum number of decimal places between v-model and step. If accurate arbitrary-precision decimal arithmetic is required, consider working with strings using [decimal.js](https://github.com/MikeMcl/decimal.js) and  [v-text-field](/components/text-fields) instead.
+:::
+
 ## Guide
 
 The `v-number-input` component is built upon the `v-field` and `v-input` components. It is used as a replacement for `<input type="number">`, accepting numeric values from the user.

packages/vuetify/build/rollup.config.mjs

@@ -27,6 +27,10 @@ function fixWindowsPath(path) {
   return path.replace(/^[^:]+:\\/, '\\').replaceAll('\\', '/')
 }
 
+const srcDir = fixWindowsPath(fileURLToPath(new URL('../src', import.meta.url)));
+const libDir = fixWindowsPath(fileURLToPath(new URL('../lib', import.meta.url)));
+const labsDir = fixWindowsPath(fileURLToPath(new URL('../src/labs', import.meta.url)));
+
 export default [
   {
     input: 'src/entry-bundler.ts',
@@ -85,11 +89,9 @@ export default [
           })
 
           // Individual CSS files
-          for (const { id, content } of styleNodes) {
-            const out = path.parse(fixWindowsPath(id).replace(
-              fileURLToPath(new URL('../src', import.meta.url)),
-              fileURLToPath(new URL('../lib', import.meta.url))
-            ))
+          for (const {id, content} of styleNodes) {
+            const relativePath = path.relative(srcDir, fixWindowsPath(id))
+            const out = path.parse(path.join(libDir, relativePath))
             mkdirp(out.dir).then(() => {
               writeFile(path.join(out.dir, out.name + '.css'), content, 'utf8')
             })
@@ -222,12 +224,13 @@ export default [
           })
 
           // Individual CSS files
-          styleNodes = styleNodes.filter(node => node.id.includes('src/labs'))
+          styleNodes = styleNodes.filter(node => {
+              return fixWindowsPath(node.id).startsWith(labsDir)
+            }
+          );
           for (const { id, content } of styleNodes) {
-            const out = path.parse(fixWindowsPath(id).replace(
-              fileURLToPath(new URL('../src', import.meta.url)),
-              fileURLToPath(new URL('../lib', import.meta.url))
-            ))
+            const relativePath = path.relative(srcDir, fixWindowsPath(id))
+            const out = path.parse(path.join(libDir, relativePath))
             mkdirp(out.dir).then(() => {
               writeFile(path.join(out.dir, out.name + '.css'), content, 'utf8')
             })

packages/vuetify/src/components/VAvatar/VAvatar.tsx

@@ -85,7 +85,7 @@ export const VAvatar = genericComponent()({
             defaults={{
               VImg: {
                 cover: true,
-                image: props.image,
+                src: props.image,
               },
               VIcon: {
                 icon: props.icon,

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -40,12 +40,12 @@
 
     @supports selector(:focus-visible)
       &::after
-        @include tools.absolute(true)
         pointer-events: none
         border: 2px solid currentColor
         border-radius: inherit
         opacity: 0
         transition: opacity .2s ease-in-out
+        @include tools.absolute(true)
 
       &:focus-visible::after
         opacity: calc(.25 * var(--v-theme-overlay-multiplier))
@@ -66,10 +66,10 @@
     &--elevated
       &:hover,
       &:focus
-        +tools.elevation(map.get($button-elevation, 'hover'))
+        @include tools.elevation(map.get($button-elevation, 'hover'))
 
       &:active
-        +tools.elevation(map.get($button-elevation, 'active'))
+        @include tools.elevation(map.get($button-elevation, 'active'))
 
     &--flat
       box-shadow: none
@@ -228,8 +228,8 @@
 
   .v-btn__overlay,
   .v-btn__underlay
-    @include tools.absolute()
     pointer-events: none
+    @include tools.absolute()
 
   // VCard
   .v-btn

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -298,7 +298,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
         </Tag>,
         [[
           Ripple,
-          !isDisabled.value && !!props.ripple,
+          !isDisabled.value && props.ripple,
           '',
           { center: !!props.icon },
         ]]

packages/vuetify/src/components/VChip/VChip.sass

@@ -72,12 +72,12 @@
     transition: $chip-filter-transition
 
   .v-chip__overlay
-    @include tools.absolute()
     background-color: currentColor
     border-radius: inherit
     pointer-events: none
     opacity: 0
     transition: opacity .2s ease-in-out
+    @include tools.absolute()
 
   .v-chip--disabled
     opacity: $chip-disabled-opacity

packages/vuetify/src/components/VColorPicker/VColorPicker.sass

@@ -8,8 +8,8 @@
     contain: content
 
     &.v-sheet
-      +tools.elevation($color-picker-elevation)
-      +tools.rounded($color-picker-border-radius)
+      @include tools.elevation($color-picker-elevation)
+      @include tools.rounded($color-picker-border-radius)
 
   // Element
   .v-color-picker__controls
@@ -19,7 +19,7 @@
 
   // Modifier
   .v-color-picker--flat
-    +tools.elevation(0)
+    @include tools.elevation(0)
 
     .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
-      +tools.elevation(0)
+      @include tools.elevation(0)

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass

@@ -6,9 +6,9 @@
     .v-slider-track__background
       background-color: transparent !important
 
-      +tools.ltr()
+      @include tools.ltr()
         background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
-      +tools.rtl()
+      @include tools.rtl()
         background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
 
       &::after
@@ -44,10 +44,10 @@
   .v-color-picker-preview__hue
     &:not(.v-input--is-disabled)
       .v-slider-track__background
-        +tools.ltr()
+        @include tools.ltr()
           background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-        +tools.rtl()
+        @include tools.rtl()
           background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
   .v-color-picker-preview__track

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -108,10 +108,10 @@
           min-height: $expansion-panel-active-title-min-height
 
   .v-expansion-panel__shadow
-    @include tools.absolute()
-    @include tools.elevation(2)
     border-radius: inherit
     z-index: -1
+    @include tools.absolute()
+    @include tools.elevation(2)
 
   .v-expansion-panel-title
     align-items: center
@@ -134,10 +134,10 @@
       @include tools.active-states('.v-expansion-panel-title__overlay')
 
   .v-expansion-panel-title__overlay
-    @include tools.absolute()
     background-color: currentColor
     border-radius: inherit
     opacity: 0
+    @include tools.absolute()
 
   .v-expansion-panel-title__icon
     display: inline-flex

packages/vuetify/src/components/VField/VField.sass

@@ -8,8 +8,6 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
-    --v-theme-overlay-multiplier: 1
-
     display: grid
     grid-template-areas: "prepend-inner field clear append-inner"
     grid-template-columns: min-content minmax(0, 1fr) min-content min-content
@@ -22,17 +20,18 @@
     grid-area: control
     position: relative
 
-    &--disabled
-      opacity: var(--v-disabled-opacity)
-      pointer-events: none
-
+    --v-theme-overlay-multiplier: 1
     --v-field-padding-start: #{$field-control-padding-start}
     --v-field-padding-end: #{$field-control-padding-end}
     --v-field-padding-top: #{$field-control-padding-top}
     --v-field-padding-bottom: #{$field-control-padding-bottom}
     --v-field-input-padding-top: #{$field-input-padding-top}
     --v-field-input-padding-bottom: #{$field-input-padding-bottom}
 
+    &--disabled
+      opacity: var(--v-disabled-opacity)
+      pointer-events: none
+
     .v-chip
       --v-chip-height: #{$field-chip-height}
 
@@ -50,14 +49,12 @@
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-color
-
       @include tools.elevation($field-control-solo-elevation)
 
     &--variant-solo-inverted
       background: $field-control-solo-background
       border-color: transparent
       color: $field-control-solo-inverted-color
-
       @include tools.elevation($field-control-solo-elevation)
 
       &.v-field--focused

packages/vuetify/src/components/VFooter/VFooter.tsx

@@ -11,9 +11,10 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
+import { useToggleScope } from '@/composables/toggleScope'
 
 // Utilities
-import { computed, shallowRef, toRef } from 'vue'
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVFooterProps = propsFactory({
@@ -39,6 +40,9 @@ export const VFooter = genericComponent()({
   props: makeVFooterProps(),
 
   setup (props, { slots }) {
+    const layoutItemStyles = ref()
+    const layoutIsReady = shallowRef()
+
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
     const { borderClasses } = useBorder(props)
@@ -51,14 +55,22 @@ export const VFooter = genericComponent()({
       autoHeight.value = entries[0].target.clientHeight
     })
     const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))
-    const { layoutItemStyles, layoutIsReady } = useLayoutItem({
-      id: props.name,
-      order: computed(() => parseInt(props.order, 10)),
-      position: computed(() => 'bottom'),
-      layoutSize: height,
-      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
-      active: computed(() => props.app),
-      absolute: toRef(props, 'absolute'),
+
+    useToggleScope(() => props.app, () => {
+      const layout = useLayoutItem({
+        id: props.name,
+        order: computed(() => parseInt(props.order, 10)),
+        position: computed(() => 'bottom'),
+        layoutSize: height,
+        elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+        active: computed(() => props.app),
+        absolute: toRef(props, 'absolute'),
+      })
+
+      watchEffect(() => {
+        layoutItemStyles.value = layout.layoutItemStyles.value
+        layoutIsReady.value = layout.layoutIsReady
+      })
     })
 
     useRender(() => (
@@ -84,7 +96,7 @@ export const VFooter = genericComponent()({
       />
     ))
 
-    return props.app ? layoutIsReady : {}
+    return props.app ? layoutIsReady.value : {}
   },
 })
 

packages/vuetify/src/components/VGrid/VGrid.sass

@@ -19,7 +19,7 @@
   //
   // Rows contain and clear the floats of your columns.
   .v-row
-    +make-row
+    @include make-row
 
     & + .v-row
       margin-top: settings.$grid-gutter * .5

packages/vuetify/src/components/VGrid/_mixins.sass

@@ -12,7 +12,7 @@
 // For each breakpoint, define the maximum width of the container in a media query
 @mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints)
   @each $breakpoint, $container-max-width in $max-widths
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       max-width: $container-max-width
 
 @mixin make-row($gutter: settings.$grid-gutter)
@@ -53,7 +53,7 @@
     .v-col#{$infix},
     .v-col#{$infix}-auto
       @extend %grid-column
-    +tools.media-breakpoint-up($breakpoint, $breakpoints)
+    @include tools.media-breakpoint-up($breakpoint, $breakpoints)
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .v-col#{$infix}
         flex-basis: 0
@@ -65,10 +65,10 @@
         max-width: 100% // Reset earlier grid tiers
       @for $i from 1 through $columns
         .v-col#{$infix}-#{$i}
-          +make-col($i, $columns)
+          @include make-col($i, $columns)
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through $columns - 1
         @if not ($infix == "" and $i == 0)
           // Avoid emitting useless .offset-0
           .offset#{$infix}-#{$i}
-            +make-col-offset($i, $columns)
+            @include make-col-offset($i, $columns)

packages/vuetify/src/components/VList/VListItem.sass

@@ -25,12 +25,12 @@
 
     @supports selector(:focus-visible)
       &::after
-        @include tools.absolute(true)
         pointer-events: none
         border: 2px solid currentColor
         border-radius: 4px
         opacity: 0
         transition: opacity .2s ease-in-out
+        @include tools.absolute(true)
 
       &:focus-visible::after
         opacity: calc(.15 * var(--v-theme-overlay-multiplier))