@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-03

package/lib/labs/VStepperVertical/index.d.mts

@@ -83,9 +83,9 @@ declare const VStepperVertical: {
         rounded?: string | number | boolean | undefined;
         selectedClass?: string | undefined;
         bgColor?: string | undefined;
-        completeIcon?: string | undefined;
-        editIcon?: string | undefined;
-        errorIcon?: string | undefined;
+        completeIcon?: IconValue | undefined;
+        editIcon?: IconValue | undefined;
+        errorIcon?: IconValue | undefined;
     } & {
         $children?: vue.VNodeChild | {
             [x: `header-item.${string}`]: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -221,9 +221,9 @@ declare const VStepperVertical: {
         rounded?: string | number | boolean | undefined;
         selectedClass?: string | undefined;
         bgColor?: string | undefined;
-        completeIcon?: string | undefined;
-        editIcon?: string | undefined;
-        errorIcon?: string | undefined;
+        completeIcon?: IconValue | undefined;
+        editIcon?: IconValue | undefined;
+        errorIcon?: IconValue | undefined;
     } & {
         $children?: vue.VNodeChild | {
             [x: `header-item.${string}`]: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -341,9 +341,9 @@ declare const VStepperVertical: {
     rounded?: string | number | boolean | undefined;
     selectedClass?: string | undefined;
     bgColor?: string | undefined;
-    completeIcon?: string | undefined;
-    editIcon?: string | undefined;
-    errorIcon?: string | undefined;
+    completeIcon?: IconValue | undefined;
+    editIcon?: IconValue | undefined;
+    errorIcon?: IconValue | undefined;
 } & {
     $children?: vue.VNodeChild | {
         [x: `header-item.${string}`]: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -499,10 +499,10 @@ declare const VStepperVertical: {
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     altLabels: BooleanConstructor;
-    completeIcon: StringConstructor;
-    editIcon: StringConstructor;
+    completeIcon: vue.PropType<IconValue>;
+    editIcon: vue.PropType<IconValue>;
     editable: BooleanConstructor;
-    errorIcon: StringConstructor;
+    errorIcon: vue.PropType<IconValue>;
     items: {
         type: vue.PropType<readonly StepperItem[]>;
         default: () => never[];
@@ -589,10 +589,10 @@ declare const VStepperVertical: {
     };
     mobileBreakpoint: vue.PropType<number | DisplayBreakpoint>;
     altLabels: BooleanConstructor;
-    completeIcon: StringConstructor;
-    editIcon: StringConstructor;
+    completeIcon: vue.PropType<IconValue>;
+    editIcon: vue.PropType<IconValue>;
     editable: BooleanConstructor;
-    errorIcon: StringConstructor;
+    errorIcon: vue.PropType<IconValue>;
     items: {
         type: vue.PropType<readonly StepperItem[]>;
         default: () => never[];
@@ -636,10 +636,10 @@ declare const VStepperVerticalItem: {
         collapseIcon: IconValue;
         expandIcon: IconValue;
         hideActions: boolean;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     } & {
         height?: string | number | undefined;
         width?: string | number | undefined;
@@ -652,7 +652,7 @@ declare const VStepperVerticalItem: {
         title?: string | undefined;
         text?: string | undefined;
         class?: any;
-        icon?: string | undefined;
+        icon?: IconValue | undefined;
         elevation?: string | number | undefined;
         rounded?: string | number | boolean | undefined;
         selectedClass?: string | undefined;
@@ -724,10 +724,10 @@ declare const VStepperVerticalItem: {
         collapseIcon: IconValue;
         expandIcon: IconValue;
         hideActions: boolean;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: StepperItemSlot) => vue.VNode[];
         icon: (arg: StepperItemSlot) => vue.VNode[];
@@ -765,10 +765,10 @@ declare const VStepperVerticalItem: {
         collapseIcon: IconValue;
         expandIcon: IconValue;
         hideActions: boolean;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     } & {
         height?: string | number | undefined;
         width?: string | number | undefined;
@@ -781,7 +781,7 @@ declare const VStepperVerticalItem: {
         title?: string | undefined;
         text?: string | undefined;
         class?: any;
-        icon?: string | undefined;
+        icon?: IconValue | undefined;
         elevation?: string | number | undefined;
         rounded?: string | number | boolean | undefined;
         selectedClass?: string | undefined;
@@ -849,10 +849,10 @@ declare const VStepperVerticalItem: {
         collapseIcon: IconValue;
         expandIcon: IconValue;
         hideActions: boolean;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -875,10 +875,10 @@ declare const VStepperVerticalItem: {
     collapseIcon: IconValue;
     expandIcon: IconValue;
     hideActions: boolean;
-    completeIcon: string;
+    completeIcon: IconValue;
     editable: boolean;
-    editIcon: string;
-    errorIcon: string;
+    editIcon: IconValue;
+    errorIcon: IconValue;
 } & {
     height?: string | number | undefined;
     width?: string | number | undefined;
@@ -891,7 +891,7 @@ declare const VStepperVerticalItem: {
     title?: string | undefined;
     text?: string | undefined;
     class?: any;
-    icon?: string | undefined;
+    icon?: IconValue | undefined;
     elevation?: string | number | undefined;
     rounded?: string | number | boolean | undefined;
     selectedClass?: string | undefined;
@@ -963,10 +963,10 @@ declare const VStepperVerticalItem: {
     collapseIcon: IconValue;
     expandIcon: IconValue;
     hideActions: boolean;
-    completeIcon: string;
+    completeIcon: IconValue;
     editable: boolean;
-    editIcon: string;
-    errorIcon: string;
+    editIcon: IconValue;
+    errorIcon: IconValue;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: StepperItemSlot) => vue.VNode[];
     icon: (arg: StepperItemSlot) => vue.VNode[];
@@ -1036,20 +1036,20 @@ declare const VStepperVerticalItem: {
     subtitle: StringConstructor;
     complete: BooleanConstructor;
     completeIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
     editable: BooleanConstructor;
     editIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
     error: BooleanConstructor;
     errorIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
-    icon: StringConstructor;
+    icon: vue.PropType<IconValue>;
     rules: {
         type: vue.PropType<readonly ValidationRule[]>;
         default: () => never[];
@@ -1112,20 +1112,20 @@ declare const VStepperVerticalItem: {
     subtitle: StringConstructor;
     complete: BooleanConstructor;
     completeIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
     editable: BooleanConstructor;
     editIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
     error: BooleanConstructor;
     errorIcon: {
-        type: StringConstructor;
+        type: vue.PropType<IconValue>;
         default: string;
     };
-    icon: StringConstructor;
+    icon: vue.PropType<IconValue>;
     rules: {
         type: vue.PropType<readonly ValidationRule[]>;
         default: () => never[];

package/lib/labs/VTimePicker/VTimePicker.css

@@ -1,10 +1,8 @@
-@layer vuetify.components {
-  .v-time-picker.v-picker {
-    padding: 24px;
-    width: 328px;
-  }
-  .v-time-picker.v-picker .v-picker-title {
-    padding: 0;
-    margin-bottom: 20px;
-  }
+.v-time-picker.v-picker {
+  padding: 24px;
+  width: 328px;
+}
+.v-time-picker.v-picker .v-picker-title {
+  padding: 0;
+  margin-bottom: 20px;
 }

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;
 }