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

package/lib/components/VStepper/index.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, DirectiveBinding, PropType } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, PropType, ComponentPublicInstance, FunctionalComponent, DirectiveBinding } from 'vue';
 
 type ClassValue = any;
 
@@ -17,6 +17,12 @@ declare const breakpoints: readonly ["sm", "md", "lg", "xl", "xxl"];
 type Breakpoint = typeof breakpoints[number];
 type DisplayBreakpoint = 'xs' | Breakpoint;
 
+type JSXComponent<Props = any> = {
+    new (): ComponentPublicInstance<Props>;
+} | FunctionalComponent<Props>;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
 interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
     value?: boolean | {
         class: string;
@@ -47,15 +53,15 @@ declare const VStepperItem: {
         ripple: boolean | {
             class: string;
         } | undefined;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     } & {
         color?: string | undefined;
         value?: any;
         title?: string | undefined;
-        icon?: string | undefined;
+        icon?: IconValue | undefined;
         selectedClass?: string | undefined;
         subtitle?: string | undefined;
     } & {
@@ -92,10 +98,10 @@ declare const VStepperItem: {
         ripple: boolean | {
             class: string;
         } | undefined;
-        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[];
@@ -116,15 +122,15 @@ declare const VStepperItem: {
         ripple: boolean | {
             class: string;
         } | undefined;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     } & {
         color?: string | undefined;
         value?: any;
         title?: string | undefined;
-        icon?: string | undefined;
+        icon?: IconValue | undefined;
         selectedClass?: string | undefined;
         subtitle?: string | undefined;
     } & {
@@ -157,10 +163,10 @@ declare const VStepperItem: {
         ripple: boolean | {
             class: string;
         } | undefined;
-        completeIcon: string;
+        completeIcon: IconValue;
         editable: boolean;
-        editIcon: string;
-        errorIcon: string;
+        editIcon: IconValue;
+        errorIcon: IconValue;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -173,15 +179,15 @@ declare const VStepperItem: {
     ripple: boolean | {
         class: string;
     } | undefined;
-    completeIcon: string;
+    completeIcon: IconValue;
     editable: boolean;
-    editIcon: string;
-    errorIcon: string;
+    editIcon: IconValue;
+    errorIcon: IconValue;
 } & {
     color?: string | undefined;
     value?: any;
     title?: string | undefined;
-    icon?: string | undefined;
+    icon?: IconValue | undefined;
     selectedClass?: string | undefined;
     subtitle?: string | undefined;
 } & {
@@ -218,10 +224,10 @@ declare const VStepperItem: {
     ripple: boolean | {
         class: string;
     } | undefined;
-    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[];
@@ -236,20 +242,20 @@ declare const VStepperItem: {
     subtitle: StringConstructor;
     complete: BooleanConstructor;
     completeIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
     editable: BooleanConstructor;
     editIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
     error: BooleanConstructor;
     errorIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
-    icon: StringConstructor;
+    icon: PropType<IconValue>;
     ripple: {
         type: PropType<RippleDirectiveBinding["value"]>;
         default: boolean;
@@ -267,20 +273,20 @@ declare const VStepperItem: {
     subtitle: StringConstructor;
     complete: BooleanConstructor;
     completeIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
     editable: BooleanConstructor;
     editIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
     error: BooleanConstructor;
     errorIcon: {
-        type: StringConstructor;
+        type: PropType<IconValue>;
         default: string;
     };
-    icon: StringConstructor;
+    icon: PropType<IconValue>;
     ripple: {
         type: PropType<RippleDirectiveBinding["value"]>;
         default: boolean;
@@ -335,9 +341,9 @@ declare const VStepper: {
         modelValue?: any;
         rounded?: string | number | boolean | 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;
@@ -466,9 +472,9 @@ declare const VStepper: {
         modelValue?: any;
         rounded?: string | number | boolean | 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;
@@ -579,9 +585,9 @@ declare const VStepper: {
     modelValue?: any;
     rounded?: string | number | boolean | 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;
@@ -728,10 +734,10 @@ declare const VStepper: {
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     altLabels: BooleanConstructor;
     bgColor: StringConstructor;
-    completeIcon: StringConstructor;
-    editIcon: StringConstructor;
+    completeIcon: PropType<IconValue>;
+    editIcon: PropType<IconValue>;
     editable: BooleanConstructor;
-    errorIcon: StringConstructor;
+    errorIcon: PropType<IconValue>;
     hideActions: BooleanConstructor;
     items: {
         type: PropType<readonly StepperItem[]>;
@@ -810,10 +816,10 @@ declare const VStepper: {
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     altLabels: BooleanConstructor;
     bgColor: StringConstructor;
-    completeIcon: StringConstructor;
-    editIcon: StringConstructor;
+    completeIcon: PropType<IconValue>;
+    editIcon: PropType<IconValue>;
     editable: BooleanConstructor;
-    errorIcon: StringConstructor;
+    errorIcon: PropType<IconValue>;
     hideActions: BooleanConstructor;
     items: {
         type: PropType<readonly StepperItem[]>;

package/lib/components/VSwitch/VSwitch.css

@@ -1,133 +1,143 @@
-@layer vuetify.components {
-  .v-switch .v-label {
-    padding-inline-start: 10px;
-  }
-  .v-switch__loader {
-    display: flex;
-  }
-  .v-switch__loader .v-progress-circular {
-    color: rgb(var(--v-theme-surface));
-  }
-  .v-switch__track,
-  .v-switch__thumb {
-    transition: none;
-  }
-  .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
-  .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
-    background-color: rgb(var(--v-theme-error));
-    color: rgb(var(--v-theme-on-error));
-  }
-  .v-switch__track-true {
-    margin-inline-end: auto;
-  }
-  .v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
-    opacity: 0;
-  }
-  .v-switch__track-false {
-    margin-inline-start: auto;
-  }
-  .v-selection-control--dirty .v-switch__track-false {
-    opacity: 0;
-  }
-  .v-switch__track {
-    display: inline-flex;
-    align-items: center;
-    font-size: 0.5rem;
-    padding: 0 5px;
-    background-color: rgb(var(--v-theme-surface-variant));
-    border-radius: 9999px;
-    height: 14px;
-    opacity: 0.6;
-    min-width: 36px;
-    cursor: pointer;
-    transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-switch--inset .v-switch__track {
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    height: 32px;
-    min-width: 52px;
-  }
-  .v-switch__thumb {
-    align-items: center;
-    background-color: rgb(var(--v-theme-surface-bright));
-    color: rgb(var(--v-theme-on-surface-bright));
-    border-radius: 50%;
-    display: flex;
-    font-size: 0.75rem;
-    height: 20px;
-    justify-content: center;
-    width: 20px;
-    pointer-events: none;
-    transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-  .v-switch:not(.v-switch--inset) .v-switch__thumb {
-    box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
-    background: rgb(var(--v-theme-surface-variant));
-    color: rgb(var(--v-theme-on-surface-variant));
-  }
-  .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
-    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-switch--inset .v-switch__thumb {
-    height: 24px;
-    width: 24px;
-    transform: scale(0.6666666667);
-  }
-  .v-switch--inset .v-switch__thumb--filled {
-    transform: none;
-  }
-  .v-switch--inset .v-selection-control--dirty .v-switch__thumb {
-    transform: none;
-    transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
-  }
-  .v-switch.v-input {
-    flex: 0 1 auto;
-  }
-  .v-switch .v-selection-control {
-    min-height: var(--v-input-control-height);
-  }
-  .v-switch .v-selection-control__input {
-    border-radius: 50%;
-    transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
-    position: absolute;
-  }
-  .v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
-    transform: translateX(-10px);
-  }
-  .v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
-    transform: translateX(10px);
-  }
-  .v-switch .v-selection-control__input .v-icon {
-    position: absolute;
-  }
-  .v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
-    transform: translateX(10px);
-  }
-  .v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
-    transform: translateX(-10px);
-  }
-  .v-switch.v-switch--indeterminate .v-selection-control__input {
-    transform: scale(0.8);
-  }
-  .v-switch.v-switch--indeterminate .v-switch__thumb {
-    transform: scale(0.75);
-    box-shadow: none;
-  }
-  .v-switch.v-switch--inset .v-selection-control__wrapper {
-    width: auto;
-  }
-  .v-switch.v-input--vertical .v-label {
-    min-width: max-content;
-  }
-  .v-switch.v-input--vertical .v-selection-control__wrapper {
-    transform: rotate(-90deg);
-  }
+.v-switch .v-label {
+  padding-inline-start: 10px;
+}
+
+.v-switch__loader {
+  display: flex;
+}
+.v-switch__loader .v-progress-circular {
+  color: rgb(var(--v-theme-surface));
+}
+
+.v-switch__track,
+.v-switch__thumb {
+  transition: none;
+}
+.v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
+.v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
+  background-color: rgb(var(--v-theme-error));
+  color: rgb(var(--v-theme-on-error));
+}
+
+.v-switch__track-true {
+  margin-inline-end: auto;
+}
+.v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
+  opacity: 0;
+}
+
+.v-switch__track-false {
+  margin-inline-start: auto;
+}
+.v-selection-control--dirty .v-switch__track-false {
+  opacity: 0;
+}
+
+.v-switch__track {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.5rem;
+  padding: 0 5px;
+  background-color: rgb(var(--v-theme-surface-variant));
+  border-radius: 9999px;
+  height: 14px;
+  opacity: 0.6;
+  min-width: 36px;
+  cursor: pointer;
+  transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-switch--inset .v-switch__track {
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  height: 32px;
+  min-width: 52px;
+}
+
+.v-switch__thumb {
+  align-items: center;
+  background-color: rgb(var(--v-theme-surface-bright));
+  color: rgb(var(--v-theme-on-surface-bright));
+  border-radius: 50%;
+  display: flex;
+  font-size: 0.75rem;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+  pointer-events: none;
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+.v-switch:not(.v-switch--inset) .v-switch__thumb {
+  box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
+  background: rgb(var(--v-theme-surface-variant));
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
+  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-switch--inset .v-switch__thumb {
+  height: 24px;
+  width: 24px;
+  transform: scale(0.6666666667);
+}
+.v-switch--inset .v-switch__thumb--filled {
+  transform: none;
+}
+.v-switch--inset .v-selection-control--dirty .v-switch__thumb {
+  transform: none;
+  transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
+}
+
+.v-switch.v-input {
+  flex: 0 1 auto;
+}
+.v-switch .v-selection-control {
+  min-height: var(--v-input-control-height);
+}
+.v-switch .v-selection-control__input {
+  border-radius: 50%;
+  transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+}
+.v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
+  transform: translateX(-10px);
+}
+
+.v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
+  transform: translateX(10px);
+}
+
+.v-switch .v-selection-control__input .v-icon {
+  position: absolute;
+}
+.v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
+  transform: translateX(10px);
+}
+
+.v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
+  transform: translateX(-10px);
+}
+
+.v-switch.v-switch--indeterminate .v-selection-control__input {
+  transform: scale(0.8);
+}
+.v-switch.v-switch--indeterminate .v-switch__thumb {
+  transform: scale(0.75);
+  box-shadow: none;
+}
+.v-switch.v-switch--inset .v-selection-control__wrapper {
+  width: auto;
+}
+.v-switch.v-input--vertical .v-label {
+  min-width: max-content;
+}
+.v-switch.v-input--vertical .v-selection-control__wrapper {
+  transform: rotate(-90deg);
 }
+
 @media (forced-colors: active) {
   .v-switch .v-switch__loader .v-progress-circular {
     color: currentColor;

package/lib/components/VSystemBar/VSystemBar.css

@@ -1,46 +1,44 @@
-@layer vuetify.components {
-  .v-system-bar {
-    align-items: center;
-    display: flex;
-    flex: 1 1 auto;
-    height: 24px;
-    justify-content: flex-end;
-    max-width: 100%;
-    padding-inline: 8px;
-    position: relative;
-    text-align: end;
-    width: 100%;
-  }
-  .v-system-bar .v-icon {
-    opacity: var(--v-medium-emphasis-opacity);
-  }
-  .v-system-bar {
-    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-system-bar--absolute {
-    position: absolute;
-  }
-  .v-system-bar--fixed {
-    position: fixed;
-  }
-  .v-system-bar {
-    background: rgba(var(--v-theme-surface-light));
-    color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
-  }
-  .v-system-bar {
-    font-size: 0.75rem;
-    font-weight: 400;
-    letter-spacing: 0.0333333333em;
-    line-height: 1.667;
-    text-transform: none;
-  }
-  .v-system-bar--rounded {
-    border-radius: 0;
-  }
-  .v-system-bar--window {
-    height: 32px;
-  }
-  .v-system-bar:not(.v-system-bar--absolute) {
-    padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
-  }
+.v-system-bar {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  height: 24px;
+  justify-content: flex-end;
+  max-width: 100%;
+  padding-inline: 8px;
+  position: relative;
+  text-align: end;
+  width: 100%;
+}
+.v-system-bar .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-system-bar {
+  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-system-bar--absolute {
+  position: absolute;
+}
+.v-system-bar--fixed {
+  position: fixed;
+}
+.v-system-bar {
+  background: rgba(var(--v-theme-surface-light));
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+}
+.v-system-bar {
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em;
+  line-height: 1.667;
+  text-transform: none;
+}
+.v-system-bar--rounded {
+  border-radius: 0;
+}
+.v-system-bar--window {
+  height: 32px;
+}
+.v-system-bar:not(.v-system-bar--absolute) {
+  padding-inline-end: calc(var(--v-scrollbar-offset) + 8px);
 }