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

package/lib/labs/VTimePicker/VTimePickerClock.css

@@ -1,127 +1,130 @@
-@layer vuetify.components {
-  .v-time-picker-clock {
-    background: rgb(var(--v-theme-background));
-    color: rgb(var(--v-theme-on-background));
-  }
-  .v-time-picker-clock:after {
-    color: rgb(var(--v-theme-primary));
-  }
-  .v-time-picker-clock .v-time-picker-clock__item--active {
-    background-color: rgb(var(--v-theme-surface-variant));
-    color: rgb(var(--v-theme-on-surface-variant));
-  }
-  .v-time-picker-clock {
-    margin: 0 auto;
-    background: rgb(var(--v-theme-surface-light));
-    border-radius: 50%;
-    position: relative;
-    transition: none;
-    user-select: none;
-    height: 256px;
-    width: 256px;
-    flex: 1 0 auto;
-  }
-  .v-time-picker-clock__container {
-    display: flex;
-    flex-direction: column;
-    flex-basis: 290px;
-    justify-content: center;
-    padding: 10px;
-  }
-  .v-time-picker-clock__hand {
-    background-color: currentColor;
-    height: calc(50% - 4px);
-    width: 2px;
-    bottom: 50%;
-    left: calc(50% - 1px);
-    transform-origin: center bottom;
-    position: absolute;
-    will-change: transform;
-    z-index: 1;
-  }
-  .v-time-picker-clock__hand:before {
-    background: transparent;
-    border-width: 2px;
-    border-style: solid;
-    border-color: currentColor;
-    border-radius: 100%;
-    width: 10px;
-    height: 10px;
-    content: "";
-    position: absolute;
-    top: -4px;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .v-time-picker-clock__hand:after {
-    content: "";
-    position: absolute;
-    height: 8px;
-    width: 8px;
-    top: 100%;
-    left: 50%;
-    border-radius: 100%;
-    background-color: currentColor;
-    transform: translate(-50%, -50%);
-  }
-  .v-time-picker-clock__hand--inner:after {
-    height: 14px;
-  }
-  .v-time-picker-clock--readonly {
-    pointer-events: none;
-  }
-  .v-time-picker-clock .v-time-picker-clock__item--disabled {
-    opacity: var(--v-disabled-opacity);
-  }
-  .v-picker--full-width .v-time-picker-clock__container {
-    max-width: 290px;
-  }
-  .v-time-picker-clock__inner {
-    position: absolute;
-    bottom: 27px;
-    left: 27px;
-    right: 27px;
-    top: 27px;
-  }
-  .v-time-picker-clock__item {
-    align-items: center;
-    border-radius: 100%;
-    cursor: default;
-    display: flex;
-    font-size: 16px;
-    justify-content: center;
-    height: 40px;
-    position: absolute;
-    text-align: center;
-    width: 40px;
-    user-select: none;
-    transform: translate(-50%, -50%);
-  }
-  .v-time-picker-clock__item > span {
-    z-index: 1;
-  }
-  .v-time-picker-clock__item:before, .v-time-picker-clock__item:after {
-    content: "";
-    border-radius: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    height: 14px;
-    width: 14px;
-    transform: translate(-50%, -50%);
-  }
-  .v-time-picker-clock__item:after, .v-time-picker-clock__item:before {
-    height: 40px;
-    width: 40px;
-  }
-  .v-time-picker-clock__item--active {
-    cursor: default;
-    z-index: 2;
-  }
-  .v-time-picker-clock__item--disabled {
-    pointer-events: none;
-  }
-  .v-picker--landscape .v-time-picker-clock__container {
-    flex-direction: row;
-  }
+.v-time-picker-clock {
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+}
+.v-time-picker-clock:after {
+  color: rgb(var(--v-theme-primary));
+}
+.v-time-picker-clock .v-time-picker-clock__item--active {
+  background-color: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+
+.v-time-picker-clock {
+  margin: 0 auto;
+  background: rgb(var(--v-theme-surface-light));
+  border-radius: 50%;
+  position: relative;
+  transition: none;
+  user-select: none;
+  height: 256px;
+  width: 256px;
+  flex: 1 0 auto;
+}
+.v-time-picker-clock__container {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 290px;
+  justify-content: center;
+  padding: 10px;
+}
+.v-time-picker-clock__hand {
+  background-color: currentColor;
+  height: calc(50% - 4px);
+  width: 2px;
+  bottom: 50%;
+  left: calc(50% - 1px);
+  transform-origin: center bottom;
+  position: absolute;
+  will-change: transform;
+  z-index: 1;
+}
+.v-time-picker-clock__hand:before {
+  background: transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color: currentColor;
+  border-radius: 100%;
+  width: 10px;
+  height: 10px;
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.v-time-picker-clock__hand:after {
+  content: "";
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  top: 100%;
+  left: 50%;
+  border-radius: 100%;
+  background-color: currentColor;
+  transform: translate(-50%, -50%);
+}
+.v-time-picker-clock__hand--inner:after {
+  height: 14px;
+}
+.v-time-picker-clock--readonly {
+  pointer-events: none;
+}
+.v-time-picker-clock .v-time-picker-clock__item--disabled {
+  opacity: var(--v-disabled-opacity);
+}
+
+.v-picker--full-width .v-time-picker-clock__container {
+  max-width: 290px;
+}
+
+.v-time-picker-clock__inner {
+  position: absolute;
+  bottom: 27px;
+  left: 27px;
+  right: 27px;
+  top: 27px;
+}
+
+.v-time-picker-clock__item {
+  align-items: center;
+  border-radius: 100%;
+  cursor: default;
+  display: flex;
+  font-size: 16px;
+  justify-content: center;
+  height: 40px;
+  position: absolute;
+  text-align: center;
+  width: 40px;
+  user-select: none;
+  transform: translate(-50%, -50%);
+}
+.v-time-picker-clock__item > span {
+  z-index: 1;
+}
+.v-time-picker-clock__item:before, .v-time-picker-clock__item:after {
+  content: "";
+  border-radius: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 14px;
+  width: 14px;
+  transform: translate(-50%, -50%);
+}
+.v-time-picker-clock__item:after, .v-time-picker-clock__item:before {
+  height: 40px;
+  width: 40px;
+}
+.v-time-picker-clock__item--active {
+  cursor: default;
+  z-index: 2;
+}
+.v-time-picker-clock__item--disabled {
+  pointer-events: none;
+}
+
+.v-picker--landscape .v-time-picker-clock__container {
+  flex-direction: row;
 }

package/lib/labs/VTimePicker/VTimePickerControls.css

@@ -1,103 +1,104 @@
-@layer vuetify.components {
-  .v-time-picker-controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.875rem;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    margin-bottom: 36px;
-  }
-  .v-time-picker-controls__text {
-    padding-bottom: 12px;
-  }
-  .v-time-picker-controls__time {
-    display: flex;
-    white-space: nowrap;
-    direction: ltr;
-    justify-content: center;
-  }
-  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
-    width: 96px;
-    height: 80px;
-    font-size: 56px;
-  }
-  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
-    background: rgb(var(--v-theme-primary));
-  }
-  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
-    width: 96px;
-    height: 80px;
-  }
-  .v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
-    width: 64px;
-    height: 80px;
-    font-size: 40px;
-  }
-  .v-time-picker-controls__time__separator {
-    font-size: 56px;
-    height: 80px;
-    width: 24px;
-    text-align: center;
-  }
-  .v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
-    height: 80px;
-    font-size: 56px;
-  }
-  .v-time-picker-controls__ampm {
-    margin-left: 12px;
-    align-self: flex-end;
-    display: flex;
-    flex-direction: column;
-    font-size: 18px;
-    text-transform: uppercase;
-  }
-  .v-time-picker-controls__ampm--readonly {
-    pointer-events: none;
-  }
-  .v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
-    opacity: 0.6;
-  }
-  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
-    font-size: 18px;
-    padding: 0 8px;
-    min-width: 52px;
-    height: 40px;
-  }
-  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
-    border-radius: 4px 4px 0 0;
-    border: 1px solid;
-  }
-  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
-    border-radius: 0 0 4px 4px;
-    border: 1px solid;
-    border-top: none;
-  }
-  .v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
-    background: rgb(var(--v-theme-primary));
-  }
-  .v-picker__title--landscape .v-time-picker-controls {
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-  }
-  .v-picker__title--landscape .v-time-picker-controls__time {
-    text-align: right;
-  }
-  .v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
-  .v-picker__title--landscape .v-time-picker-controls__time span {
-    height: 55px;
-    font-size: 55px;
-  }
-  .v-picker__title--landscape .v-time-picker-controls__ampm {
-    margin: 16px 0 0;
-    align-self: initial;
-    text-align: center;
-  }
-  .v-picker--time .v-picker__title--landscape {
-    padding: 0;
-  }
-  .v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
-    text-align: center;
-  }
+.v-time-picker-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-bottom: 36px;
+}
+.v-time-picker-controls__text {
+  padding-bottom: 12px;
+}
+.v-time-picker-controls__time {
+  display: flex;
+  white-space: nowrap;
+  direction: ltr;
+  justify-content: center;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
+  width: 96px;
+  height: 80px;
+  font-size: 56px;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn__active {
+  background: rgb(var(--v-theme-primary));
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-ampm__btn {
+  width: 96px;
+  height: 80px;
+}
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn.v-time-picker-controls__time--with-seconds__btn {
+  width: 64px;
+  height: 80px;
+  font-size: 40px;
+}
+.v-time-picker-controls__time__separator {
+  font-size: 56px;
+  height: 80px;
+  width: 24px;
+  text-align: center;
+}
+.v-time-picker-controls__time__separator.v-time-picker-controls--with-seconds__time__separator {
+  height: 80px;
+  font-size: 56px;
+}
+
+.v-time-picker-controls__ampm {
+  margin-left: 12px;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  text-transform: uppercase;
+}
+.v-time-picker-controls__ampm--readonly {
+  pointer-events: none;
+}
+.v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
+  opacity: 0.6;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default {
+  font-size: 18px;
+  padding: 0 8px;
+  min-width: 52px;
+  height: 40px;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__am {
+  border-radius: 4px 4px 0 0;
+  border: 1px solid;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default.v-time-picker-controls__ampm__pm {
+  border-radius: 0 0 4px 4px;
+  border: 1px solid;
+  border-top: none;
+}
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default__active {
+  background: rgb(var(--v-theme-primary));
+}
+
+.v-picker__title--landscape .v-time-picker-controls {
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+.v-picker__title--landscape .v-time-picker-controls__time {
+  text-align: right;
+}
+.v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
+.v-picker__title--landscape .v-time-picker-controls__time span {
+  height: 55px;
+  font-size: 55px;
+}
+.v-picker__title--landscape .v-time-picker-controls__ampm {
+  margin: 16px 0 0;
+  align-self: initial;
+  text-align: center;
+}
+
+.v-picker--time .v-picker__title--landscape {
+  padding: 0;
+}
+.v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
+  text-align: center;
 }

package/lib/labs/VTreeview/VTreeviewItem.css

@@ -1,31 +1,29 @@
-@layer vuetify.components {
-  .v-treeview-item {
-    --list-indent-size: 28px;
-  }
-  .v-treeview-item.v-treeview-item--filtered {
-    display: none;
-  }
-  .v-treeview-item__level {
-    width: 28px;
-  }
-  .v-treeview--fluid .v-treeview-item__level {
-    width: 0;
-  }
-  .v-treeview.v-list {
-    --indent-padding: 16px;
-  }
-  .v-treeview.v-list--disabled .v-list-item__prepend {
-    pointer-events: auto;
-  }
-  .v-treeview-group.v-list-group {
-    --list-indent-size: 0px;
-  }
-  .v-treeview-group.v-list-group > .v-treeview-item__level {
-    width: 0px;
-  }
-}
-@layer vuetify.overrides {
-  .v-treeview-group.v-list-group .v-list-group__items .v-list-item {
-    padding-inline-start: calc(var(--indent-padding)) !important;
-  }
+.v-treeview-item {
+  --list-indent-size: 28px;
+}
+.v-treeview-item.v-treeview-item--filtered {
+  display: none;
+}
+.v-treeview-item__level {
+  width: 28px;
+}
+.v-treeview--fluid .v-treeview-item__level {
+  width: 0;
+}
+
+.v-treeview.v-list {
+  --indent-padding: 16px;
+}
+.v-treeview.v-list--disabled .v-list-item__prepend {
+  pointer-events: auto;
+}
+
+.v-treeview-group.v-list-group {
+  --list-indent-size: 0px;
+}
+.v-treeview-group.v-list-group > .v-treeview-item__level {
+  width: 0px;
+}
+.v-treeview-group.v-list-group .v-list-group__items .v-list-item {
+  padding-inline-start: calc(var(--indent-padding)) !important;
 }

package/lib/labs/VTreeview/VTreeviewItem.sass

@@ -26,6 +26,5 @@
     & > .v-treeview-item__level
       width: 0px
 
-    @include tools.layer('overrides')
-      .v-list-group__items .v-list-item
-        padding-inline-start: calc(var(--indent-padding)) !important
+    .v-list-group__items .v-list-item
+      padding-inline-start: calc(var(--indent-padding)) !important

package/lib/labs/entry-bundler.d.ts

@@ -59,6 +59,7 @@ export declare const createVuetify: (options?: VuetifyOptions) => {
             getDiff: (date: unknown, comparing: unknown, unit?: string) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: number | string) => unknown[][];
             getWeekdays: (firstDayOfWeek?: number | string) => string[];
+            getWeek: (date: unknown, firstDayOfWeek?: number | string, firstWeekMinSize?: number) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;
             getDate: (date: unknown) => number;

package/lib/styles/elements/_global.sass

@@ -13,7 +13,7 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 
   html.overflow-y-hidden
-    overflow-y: hidden
+    overflow-y: hidden !important
 
   :root
     --v-theme-overlay-multiplier: 1

package/lib/styles/generic/_colors.scss

@@ -6,19 +6,19 @@
 
 @mixin background-color($color_value) {
   & {
-    background-color: $color_value;
+    background-color: $color_value !important;
   }
 }
 @mixin text-color($color_value) {
   & {
-    color: $color_value;
+    color: $color_value !important;
   }
 }
 @mixin background-text-color($color_name, $color_type) {
   $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
 
   & {
-    color: $map_value;
+    color: $map_value !important;
   }
 }
 

package/lib/styles/generic/_layers.scss

@@ -2,18 +2,6 @@
 
 @if (settings.$layers) {
   @layer vuetify {
-    @layer reset, base, components, transitions;
-
-    // Use to override styles in other components
-    // This replaces hacks like .v-btn.v-btn and most of !important
-    @layer overrides;
-
-    @layer colors, theme, utilities;
-
-    // Only use for rules that need to override theme or utils
-    @layer trumps;
-
-    // Don't use, this is for consumers
-    @layer custom;
+    @layer reset, transitions, base, components, overrides, colors, theme, utilities;
   }
 }

package/lib/styles/generic/_reset.scss

@@ -15,6 +15,7 @@
 
     html {
       box-sizing: border-box;
+      overflow-y: scroll; /* All browsers without overlaying scrollbars */
       -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
       word-break: normal;
       -moz-tab-size: 4;