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

package/lib/components/VToolbar/VToolbar.css

@@ -1,138 +1,145 @@
-@layer vuetify.components {
-  .v-toolbar {
-    align-items: flex-start;
-    display: flex;
-    flex: none;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: 100%;
-    position: relative;
-    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
-    width: 100%;
-  }
-  .v-toolbar {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-    border-style: solid;
-    border-width: 0;
-  }
-  .v-toolbar--border {
-    border-width: thin;
-    box-shadow: none;
-  }
-  .v-toolbar {
-    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-toolbar {
-    border-radius: 0;
-  }
-  .v-toolbar {
-    background: rgb(var(--v-theme-surface-light));
-    color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
-  }
-  .v-toolbar--absolute {
-    position: absolute;
-  }
-  .v-toolbar--collapse {
-    max-width: 112px;
-    overflow: hidden;
-    border-end-end-radius: 24px;
-  }
-  .v-toolbar--collapse .v-toolbar-title {
-    display: none;
-  }
-  .v-toolbar--flat {
-    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-toolbar--floating {
-    display: inline-flex;
-    width: auto;
-  }
-  .v-toolbar--rounded {
-    border-radius: 4px;
-  }
-  .v-toolbar__content,
-  .v-toolbar__extension {
-    align-items: center;
-    display: flex;
-    flex: 0 0 auto;
-    position: relative;
-    transition: inherit;
-    width: 100%;
-  }
-  .v-toolbar__content {
-    overflow: hidden;
-  }
-  .v-toolbar__content > .v-btn:first-child {
-    margin-inline-start: 4px;
-  }
-  .v-toolbar__content > .v-btn:last-child {
-    margin-inline-end: 4px;
-  }
-  .v-toolbar__content > .v-toolbar-title {
-    margin-inline-start: 20px;
-  }
-  .v-toolbar--density-prominent .v-toolbar__content {
-    align-items: flex-start;
-  }
-  .v-toolbar__image {
-    display: flex;
-    opacity: var(--v-toolbar-image-opacity, 1);
-    transition-property: opacity;
-  }
-  .v-toolbar__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-toolbar__prepend,
-  .v-toolbar__append {
-    align-items: center;
-    align-self: stretch;
-    display: flex;
-  }
-  .v-toolbar__prepend {
-    margin-inline: 4px auto;
-  }
-  .v-toolbar__append {
-    margin-inline: auto 4px;
-  }
-  .v-toolbar-title {
-    flex: 1 1;
-    font-size: 1.25rem;
-    min-width: 0;
-  }
-  .v-toolbar-title {
-    font-size: 1.25rem;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: 1.75rem;
-    text-transform: none;
-  }
-  .v-toolbar--density-prominent .v-toolbar-title {
-    align-self: flex-end;
-    padding-bottom: 6px;
-  }
-  .v-toolbar--density-prominent .v-toolbar-title {
-    font-size: 1.5rem;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: 2.25rem;
-    text-transform: none;
-  }
-  .v-toolbar-title__placeholder {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .v-toolbar-items {
-    display: flex;
-    height: inherit;
-    align-self: stretch;
-  }
-  .v-toolbar-items > .v-btn {
-    border-radius: 0;
-  }
+.v-toolbar {
+  align-items: flex-start;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 100%;
+  position: relative;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
+  width: 100%;
+}
+.v-toolbar {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+}
+.v-toolbar--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-toolbar {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-toolbar {
+  border-radius: 0;
+}
+.v-toolbar {
+  background: rgb(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+}
+.v-toolbar--absolute {
+  position: absolute;
+}
+.v-toolbar--collapse {
+  max-width: 112px;
+  overflow: hidden;
+  border-end-end-radius: 24px;
+}
+.v-toolbar--collapse .v-toolbar-title {
+  display: none;
+}
+.v-toolbar--flat {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-toolbar--floating {
+  display: inline-flex;
+  width: auto;
+}
+.v-toolbar--rounded {
+  border-radius: 4px;
+}
+
+.v-toolbar__content,
+.v-toolbar__extension {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  position: relative;
+  transition: inherit;
+  width: 100%;
+}
+
+.v-toolbar__content {
+  overflow: hidden;
+}
+.v-toolbar__content > .v-btn:first-child {
+  margin-inline-start: 4px;
+}
+.v-toolbar__content > .v-btn:last-child {
+  margin-inline-end: 4px;
+}
+.v-toolbar__content > .v-toolbar-title {
+  margin-inline-start: 20px;
+}
+.v-toolbar--density-prominent .v-toolbar__content {
+  align-items: flex-start;
+}
+
+.v-toolbar__image {
+  display: flex;
+  opacity: var(--v-toolbar-image-opacity, 1);
+  transition-property: opacity;
+}
+.v-toolbar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.v-toolbar__prepend,
+.v-toolbar__append {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+}
+
+.v-toolbar__prepend {
+  margin-inline: 4px auto;
+}
+
+.v-toolbar__append {
+  margin-inline: auto 4px;
+}
+
+.v-toolbar-title {
+  flex: 1 1;
+  font-size: 1.25rem;
+  min-width: 0;
+}
+.v-toolbar-title {
+  font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.75rem;
+  text-transform: none;
+}
+.v-toolbar--density-prominent .v-toolbar-title {
+  align-self: flex-end;
+  padding-bottom: 6px;
+}
+.v-toolbar--density-prominent .v-toolbar-title {
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 2.25rem;
+  text-transform: none;
+}
+
+.v-toolbar-title__placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v-toolbar-items {
+  display: flex;
+  height: inherit;
+  align-self: stretch;
+}
+.v-toolbar-items > .v-btn {
+  border-radius: 0;
 }

package/lib/components/VTooltip/VTooltip.css

@@ -1,29 +1,25 @@
-@layer vuetify.components {
-  .v-tooltip > .v-overlay__content {
-    background: rgb(var(--v-theme-surface-variant));
-    color: rgb(var(--v-theme-on-surface-variant));
-    border-radius: 4px;
-    font-size: 0.875rem;
-    line-height: 1.6;
-    display: inline-block;
-    padding: 5px 16px;
-    text-transform: initial;
-    width: auto;
-    opacity: 1;
-    transition-property: opacity, transform;
-    overflow-wrap: break-word;
-  }
+.v-tooltip > .v-overlay__content {
+  background: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+  border-radius: 4px;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  display: inline-block;
+  padding: 5px 16px;
+  text-transform: initial;
+  width: auto;
+  opacity: 1;
+  transition-property: opacity, transform;
+  overflow-wrap: break-word;
 }
-@layer vuetify.overrides {
-  .v-tooltip > .v-overlay__content[class*=enter-active] {
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .v-tooltip > .v-overlay__content[class*=leave-active] {
-    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    transition-duration: 75ms;
-  }
-  .v-tooltip > .v-overlay__content:not(.v-tooltip--interactive) > .v-overlay__content {
-    pointer-events: none;
-  }
+.v-tooltip > .v-overlay__content[class*=enter-active] {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.v-tooltip > .v-overlay__content[class*=leave-active] {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  transition-duration: 75ms;
+}
+.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content {
+  pointer-events: none;
 }

package/lib/components/VTooltip/VTooltip.sass

@@ -18,15 +18,13 @@
       transition-property: opacity, transform
       overflow-wrap: $tooltip-overflow-wrap
 
-@include tools.layer('overrides')
-  .v-tooltip > .v-overlay__content
-    &[class*="enter-active"]
-      transition-timing-function: settings.$decelerated-easing
-      transition-duration: $tooltip-transition-enter-duration
+      &[class*="enter-active"]
+        transition-timing-function: settings.$decelerated-easing
+        transition-duration: $tooltip-transition-enter-duration
 
-    &[class*="leave-active"]
-      transition-timing-function: settings.$accelerated-easing
-      transition-duration: $tooltip-transition-leave-duration
+      &[class*="leave-active"]
+        transition-timing-function: settings.$accelerated-easing
+        transition-duration: $tooltip-transition-leave-duration
 
     &:not(.v-tooltip--interactive)
       > .v-overlay__content

package/lib/components/VVirtualScroll/VVirtualScroll.css

@@ -1,12 +1,10 @@
-@layer vuetify.components {
-  .v-virtual-scroll {
-    display: block;
-    flex: 1 1 auto;
-    max-width: 100%;
-    overflow: auto;
-    position: relative;
-  }
-  .v-virtual-scroll__container {
-    display: block;
-  }
+.v-virtual-scroll {
+  display: block;
+  flex: 1 1 auto;
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+}
+.v-virtual-scroll__container {
+  display: block;
 }

package/lib/components/VWindow/VWindow.css

@@ -1,74 +1,71 @@
-@layer vuetify.components {
-  .v-window {
-    overflow: hidden;
-  }
-  .v-window__container {
-    display: flex;
-    flex-direction: column;
-    height: inherit;
-    position: relative;
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-  }
-  .v-window__controls {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    pointer-events: none;
-  }
-  .v-window__controls > * {
-    pointer-events: auto;
-  }
-  .v-window--show-arrows-on-hover {
-    overflow: hidden;
-  }
-  .v-window--show-arrows-on-hover .v-window__left {
-    transform: translateX(-200%);
-  }
-  .v-window--show-arrows-on-hover .v-window__right {
-    transform: translateX(200%);
-  }
-  .v-window--show-arrows-on-hover:hover .v-window__left,
-  .v-window--show-arrows-on-hover:hover .v-window__right {
-    transform: translateX(0);
-  }
-}
-@layer vuetify.transitions {
-  .v-window-x-transition-enter-active, .v-window-x-transition-leave-active, .v-window-x-reverse-transition-enter-active, .v-window-x-reverse-transition-leave-active, .v-window-y-transition-enter-active, .v-window-y-transition-leave-active, .v-window-y-reverse-transition-enter-active, .v-window-y-reverse-transition-leave-active {
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-  }
-  .v-window-x-transition-leave-from, .v-window-x-transition-leave-to, .v-window-x-reverse-transition-leave-from, .v-window-x-reverse-transition-leave-to, .v-window-y-transition-leave-from, .v-window-y-transition-leave-to, .v-window-y-reverse-transition-leave-from, .v-window-y-reverse-transition-leave-to {
-    position: absolute !important;
-    top: 0;
-    width: 100%;
-  }
-  .v-window-x-transition-enter-from {
-    transform: translateX(100%);
-  }
-  .v-window-x-transition-leave-to {
-    transform: translateX(-100%);
-  }
-  .v-window-x-reverse-transition-enter-from {
-    transform: translateX(-100%);
-  }
-  .v-window-x-reverse-transition-leave-to {
-    transform: translateX(100%);
-  }
-  .v-window-y-transition-enter-from {
-    transform: translateY(100%);
-  }
-  .v-window-y-transition-leave-to {
-    transform: translateY(-100%);
-  }
-  .v-window-y-reverse-transition-enter-from {
-    transform: translateY(-100%);
-  }
-  .v-window-y-reverse-transition-leave-to {
-    transform: translateY(100%);
-  }
+.v-window {
+  overflow: hidden;
+}
+.v-window__container {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  position: relative;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+.v-window__controls {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  pointer-events: none;
+}
+.v-window__controls > * {
+  pointer-events: auto;
+}
+.v-window--show-arrows-on-hover {
+  overflow: hidden;
+}
+.v-window--show-arrows-on-hover .v-window__left {
+  transform: translateX(-200%);
+}
+.v-window--show-arrows-on-hover .v-window__right {
+  transform: translateX(200%);
+}
+.v-window--show-arrows-on-hover:hover .v-window__left,
+.v-window--show-arrows-on-hover:hover .v-window__right {
+  transform: translateX(0);
+}
+
+.v-window-x-transition-enter-active, .v-window-x-transition-leave-active, .v-window-x-reverse-transition-enter-active, .v-window-x-reverse-transition-leave-active, .v-window-y-transition-enter-active, .v-window-y-transition-leave-active, .v-window-y-reverse-transition-enter-active, .v-window-y-reverse-transition-leave-active {
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+.v-window-x-transition-leave-from, .v-window-x-transition-leave-to, .v-window-x-reverse-transition-leave-from, .v-window-x-reverse-transition-leave-to, .v-window-y-transition-leave-from, .v-window-y-transition-leave-to, .v-window-y-reverse-transition-leave-from, .v-window-y-reverse-transition-leave-to {
+  position: absolute !important;
+  top: 0;
+  width: 100%;
+}
+.v-window-x-transition-enter-from {
+  transform: translateX(100%);
+}
+.v-window-x-transition-leave-to {
+  transform: translateX(-100%);
+}
+.v-window-x-reverse-transition-enter-from {
+  transform: translateX(-100%);
+}
+.v-window-x-reverse-transition-leave-to {
+  transform: translateX(100%);
+}
+.v-window-y-transition-enter-from {
+  transform: translateY(100%);
+}
+.v-window-y-transition-leave-to {
+  transform: translateY(-100%);
+}
+.v-window-y-reverse-transition-enter-from {
+  transform: translateY(-100%);
+}
+.v-window-y-reverse-transition-leave-to {
+  transform: translateY(100%);
 }

package/lib/composables/calendar.d.ts

@@ -11,6 +11,7 @@ export interface CalendarProps {
     weekdays: number[];
     year: number | string | undefined;
     weeksInMonth: 'dynamic' | 'static';
+    /** @deprecated */
     firstDayOfWeek: number | string | undefined;
     'onUpdate:modelValue': ((value: unknown[]) => void) | undefined;
     'onUpdate:month': ((value: number) => void) | undefined;
@@ -95,10 +96,10 @@ export declare const makeCalendarProps: <Defaults extends {
     };
     firstDayOfWeek: unknown extends Defaults["firstDayOfWeek"] ? {
         type: (StringConstructor | NumberConstructor)[];
-        default: number;
+        default: undefined;
     } : Omit<{
         type: (StringConstructor | NumberConstructor)[];
-        default: number;
+        default: undefined;
     }, "type" | "default"> & {
         type: PropType<unknown extends Defaults["firstDayOfWeek"] ? string | number : string | number | Defaults["firstDayOfWeek"]>;
         default: unknown extends Defaults["firstDayOfWeek"] ? string | number : NonNullable<string | number> | Defaults["firstDayOfWeek"];

package/lib/composables/calendar.js

@@ -1,5 +1,5 @@
 // Composables
-import { getWeek, useDate } from "./date/date.js";
+import { useDate } from "./date/date.js";
 import { useProxiedModel } from "./proxiedModel.js"; // Utilities
 import { computed } from 'vue';
 import { propsFactory, wrapInArray } from "../util/index.js"; // Types
@@ -28,7 +28,7 @@ export const makeCalendarProps = propsFactory({
   },
   firstDayOfWeek: {
     type: [Number, String],
-    default: 0
+    default: undefined
   }
 }, 'calendar');
 export function useCalendar(props) {
@@ -51,14 +51,12 @@ export function useCalendar(props) {
     return adapter.setMonth(date, value);
   }, v => adapter.getMonth(v));
   const weekDays = computed(() => {
-    const firstDayOfWeek = Number(props.firstDayOfWeek);
-
+    const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
     // Always generate all days, regardless of props.weekdays
     return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7);
   });
   const weeksInMonth = computed(() => {
-    const firstDayOfWeek = Number(props.firstDayOfWeek);
-    const weeks = adapter.getWeekArray(month.value, firstDayOfWeek);
+    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
     const days = weeks.flat();
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -122,7 +120,7 @@ export function useCalendar(props) {
   });
   const weekNumbers = computed(() => {
     return weeksInMonth.value.map(week => {
-      return week.length ? getWeek(adapter, week[0]) : null;
+      return week.length ? adapter.getWeek(week[0], props.firstDayOfWeek) : null;
     });
   });
   function isDisabled(value) {