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

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/VSwitch/VSwitch.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSwitch.css";
 

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

@@ -144,7 +144,7 @@ type VSwitchSlots = VInputSlots & VSelectionControlSlots & {
     'track-true': VSwitchSlot;
 };
 declare const VSwitch: {
-    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
+    new (...args: any[]): vue.CreateComponentPublicInstance<{
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -203,7 +203,62 @@ declare const VSwitch: {
         'update:focused': (focused: boolean) => true;
         'update:modelValue': (value: any) => true;
         'update:indeterminate': (value: boolean) => true;
-    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "v-slot:prepend" | "v-slot:append" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    }, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "v-slot:prepend" | "v-slot:append" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        flat: boolean;
+        inline: boolean;
+        error: boolean;
+        direction: "horizontal" | "vertical";
+        inset: boolean;
+        loading: string | boolean;
+        style: vue.StyleValue;
+        disabled: boolean | null;
+        multiple: boolean | null;
+        readonly: boolean | null;
+        indeterminate: boolean;
+        messages: string | readonly string[];
+        focused: boolean;
+        errorMessages: string | readonly string[] | null;
+        maxErrors: string | number;
+        rules: readonly ValidationRule[];
+        density: Density;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
+        valueComparator: typeof deepEqual;
+        centerAffix: boolean;
+        hideSpinButtons: boolean;
+        persistentHint: boolean;
+    } & {
+        name?: string | undefined;
+        type?: string | undefined;
+        id?: string | undefined;
+        width?: string | number | undefined;
+        color?: string | undefined;
+        maxWidth?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        value?: any;
+        label?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
+        'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
+        validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
+        validationValue?: any;
+        baseColor?: string | undefined;
+        prependIcon?: IconValue | undefined;
+        appendIcon?: IconValue | undefined;
+        defaultsTarget?: string | undefined;
+        falseIcon?: IconValue | undefined;
+        trueIcon?: IconValue | undefined;
+        trueValue?: any;
+        falseValue?: any;
+        'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
+        'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
+        hint?: string | undefined;
+        hideDetails?: boolean | "auto" | undefined;
+    } & {
+        "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+        "onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
+    }, {
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -248,7 +303,7 @@ declare const VSwitch: {
         } & VSwitchSlot) => vue.VNode[];
         'track-false': (arg: VSwitchSlot) => vue.VNode[];
         'track-true': (arg: VSwitchSlot) => vue.VNode[];
-    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+    }>>, {
         P: {};
         B: {};
         D: {};
@@ -443,7 +498,7 @@ declare const VSwitch: {
     } & VSwitchSlot) => vue.VNode[];
     'track-false': (arg: VSwitchSlot) => vue.VNode[];
     'track-true': (arg: VSwitchSlot) => vue.VNode[];
-}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T | null;
     "onUpdate:modelValue"?: (value: T | null) => void;
 }, slots: VSwitchSlots) => GenericProps<typeof props, typeof slots>) & FilterPropsOptions<{

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

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
 import "./VSystemBar.css";
 

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

@@ -8,7 +8,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 type ClassValue = any;
 
 declare const VSystemBar: {
-    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<{
+    new (...args: any[]): vue.CreateComponentPublicInstance<{
         window: boolean;
         absolute: boolean;
         order: string | number;
@@ -32,7 +32,31 @@ declare const VSystemBar: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        window: boolean;
+        absolute: boolean;
+        order: string | number;
+        style: vue.StyleValue;
+        tag: string;
+        tile: boolean;
+    } & {
+        name?: string | undefined;
+        height?: string | number | undefined;
+        color?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
+        elevation?: string | number | undefined;
+        rounded?: string | number | boolean | undefined;
+    } & {
+        $children?: vue.VNodeChild | {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | (() => vue.VNodeChild);
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    }, {
         window: boolean;
         absolute: boolean;
         order: string | number;
@@ -42,7 +66,7 @@ declare const VSystemBar: {
         tile: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode[];
-    }>>, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+    }>>, {
         P: {};
         B: {};
         D: {};
@@ -119,7 +143,7 @@ declare const VSystemBar: {
     tile: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode[];
-}>>, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     theme: StringConstructor;
     tag: {
         type: StringConstructor;