vuetify 3.2.5 → 3.3.0

package/lib/components/VRating/{index.d.ts → index.d.mts}

@@ -29,67 +29,87 @@ declare const VRating: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            length: string | number;
-            style: vue.StyleValue;
-            disabled: boolean;
-            size: string | number;
-            readonly: boolean;
-            tag: string;
-            density: Density;
-            modelValue: string | number;
-            ripple: boolean;
-            clearable: boolean;
-            hover: boolean;
-            itemAriaLabel: string;
-            emptyIcon: IconValue;
-            fullIcon: IconValue;
-            halfIncrements: boolean;
-            itemLabelPosition: string;
-        }> & Omit<{
-            length: string | number;
-            style: vue.StyleValue;
-            disabled: boolean;
-            size: string | number;
-            readonly: boolean;
-            tag: string;
-            density: Density;
-            modelValue: string | number;
-            ripple: boolean;
-            clearable: boolean;
-            hover: boolean;
-            itemAriaLabel: string;
-            emptyIcon: IconValue;
-            fullIcon: IconValue;
-            halfIncrements: boolean;
-            itemLabelPosition: string;
-        } & {
+        $props: {
+            length?: string | number | undefined;
+            style?: vue.StyleValue | undefined;
+            disabled?: boolean | undefined;
+            size?: string | number | undefined;
+            readonly?: boolean | undefined;
+            tag?: string | undefined;
+            density?: Density | undefined;
+            modelValue?: string | number | undefined;
+            ripple?: boolean | undefined;
+            clearable?: boolean | undefined;
+            hover?: boolean | undefined;
+            itemAriaLabel?: string | undefined;
+            emptyIcon?: IconValue | undefined;
+            fullIcon?: IconValue | undefined;
+            halfIncrements?: boolean | undefined;
+            itemLabelPosition?: string | undefined;
+            key?: string | number | symbol | undefined;
             name?: string | undefined;
             color?: string | undefined;
             class?: any;
-            theme?: string | undefined;
-            activeColor?: string | undefined;
-            itemLabels?: string[] | undefined;
-        } & {
             $children?: {} | vue.VNodeChild | {
                 item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
             };
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            theme?: string | undefined;
             'v-slots'?: {
                 item?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
-            "v-slot:item"?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
-            "v-slot:item-label"?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
-        } & {
             $slots?: {
                 item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "length" | "style" | "disabled" | "size" | "readonly" | "tag" | "density" | "modelValue" | "ripple" | "clearable" | "hover" | "itemAriaLabel" | "emptyIcon" | "fullIcon" | "halfIncrements" | "itemLabelPosition">;
+            activeColor?: string | undefined;
+            "v-slot:item"?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
+            itemLabels?: string[] | undefined;
+            "v-slot:item-label"?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -97,10 +117,15 @@ declare const VRating: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            item?: ((args_0: VRatingItemSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
         }>;
-        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: (event: "update:modelValue", value: string | number) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -165,7 +190,14 @@ declare const VRating: {
             fullIcon: IconValue;
             halfIncrements: boolean;
             itemLabelPosition: string;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            item: (args_0: VRatingItemSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            'item-label': (args_0: VRatingItemLabelSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -180,7 +212,7 @@ declare const VRating: {
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof vue.nextTick;
@@ -294,7 +326,14 @@ declare const VRating: {
     fullIcon: IconValue;
     halfIncrements: boolean;
     itemLabelPosition: string;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    item: (args_0: VRatingItemSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'item-label': (args_0: VRatingItemLabelSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     theme: StringConstructor;
     tag: {
         type: StringConstructor;

package/lib/components/VResponsive/VResponsive.css

@@ -1,23 +1,31 @@
 .v-responsive {
-  display: flex;
+  display: grid;
+  grid-template-rows: minmax(100%, 1fr);
+  grid-template-columns: 1fr;
   flex: 1 0 auto;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
   position: relative;
 }
+.v-responsive--inline {
+  display: inline-grid;
+  flex: 0 0 auto;
+}
 
 .v-responsive__content {
   flex: 1 0 0px;
   max-width: 100%;
 }
 
-.v-responsive__sizer ~ .v-responsive__content {
-  margin-inline-start: -100%;
-}
-
 .v-responsive__sizer {
   flex: 1 0 0px;
   transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+}
+
+.v-responsive__sizer,
+.v-responsive__content {
+  grid-row-start: 1;
+  grid-column-start: 1;
 }

package/lib/components/VResponsive/VResponsive.mjs

@@ -20,6 +20,7 @@ export function useAspectStyles(props) {
 export const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
   contentClass: String,
+  inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
 }, 'v-responsive');
@@ -37,7 +38,9 @@ export const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => _createVNode("div", {
-      "class": ['v-responsive', props.class],
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
       "style": [dimensionStyles.value, props.style]
     }, [_createVNode("div", {
       "class": "v-responsive__sizer",

package/lib/components/VResponsive/VResponsive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","VResponsive","name","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n  aspectRatio: [String, Number],\n  contentClass: String,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'v-responsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: makeVResponsiveProps(),\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAEH,MAAM;EAEpB,GAAGd,kBAAkB,EAAE;EACvB,GAAGC,kBAAkB;AACvB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMiB,WAAW,GAAGd,gBAAgB,EAAoB,CAAC;EAC9De,IAAI,EAAE,aAAa;EAEnBX,KAAK,EAAEQ,oBAAoB,EAAE;EAE7BI,KAAKA,CAAEZ,KAAK,EAAAa,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEZ;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEe;IAAgB,CAAC,GAAGrB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAkB,YAAA;MAAA,SAEC,CACL,cAAc,EACdhB,KAAK,CAACiB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBlB,KAAK,CAACmB,KAAK;IACZ,IAAAH,YAAA;MAAA,SAEU,qBAAqB;MAAA,SAASf,YAAY,CAACiB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,IAAI,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAEhB,KAAK,CAACS,YAAY;IAAC,IAAIK,KAAK,CAACO,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","inline","Boolean","VResponsive","name","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n  aspectRatio: [String, Number],\n  contentClass: String,\n  inline: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'v-responsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: makeVResponsiveProps(),\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          { 'v-responsive--inline': props.inline },\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAEH,MAAM;EACpBI,MAAM,EAAEC,OAAO;EAEf,GAAGnB,kBAAkB,EAAE;EACvB,GAAGC,kBAAkB;AACvB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMmB,WAAW,GAAGhB,gBAAgB,EAAoB,CAAC;EAC9DiB,IAAI,EAAE,aAAa;EAEnBb,KAAK,EAAEQ,oBAAoB,EAAE;EAE7BM,KAAKA,CAAEd,KAAK,EAAAe,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEd;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEiB;IAAgB,CAAC,GAAGvB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAoB,YAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAElB,KAAK,CAACU;MAAO,CAAC,EACxCV,KAAK,CAACmB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBpB,KAAK,CAACqB,KAAK;IACZ,IAAAH,YAAA;MAAA,SAEU,qBAAqB;MAAA,SAASjB,YAAY,CAACmB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,IAAI,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAElB,KAAK,CAACS,YAAY;IAAC,IAAIO,KAAK,CAACO,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VResponsive/VResponsive.sass

@@ -1,21 +1,29 @@
 @use '../../styles/settings'
 
 .v-responsive
-  display: flex
+  display: grid
+  grid-template-rows: minmax(100%, 1fr)
+  grid-template-columns: 1fr
   flex: 1 0 auto
   max-height: 100%
   max-width: 100%
   overflow: hidden
   position: relative
 
+  &--inline
+    display: inline-grid
+    flex: 0 0 auto
+
 .v-responsive__content
   flex: 1 0 0px
   max-width: 100%
 
-.v-responsive__sizer ~ .v-responsive__content
-  margin-inline-start: -100%
-
 .v-responsive__sizer
   flex: 1 0 0px
   transition: padding-bottom 0.2s settings.$standard-easing
   pointer-events: none
+
+.v-responsive__sizer,
+.v-responsive__content
+  grid-row-start: 1
+  grid-column-start: 1

package/lib/components/VResponsive/{index.d.ts → index.d.mts}

@@ -9,11 +9,10 @@ declare const VResponsive: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            style: vue.StyleValue;
-        }> & Omit<{
-            style: vue.StyleValue;
-        } & {
+        $props: {
+            inline?: boolean | undefined;
+            style?: vue.StyleValue | undefined;
+            key?: string | number | symbol | undefined;
             height?: string | number | undefined;
             width?: string | number | undefined;
             aspectRatio?: string | number | undefined;
@@ -22,25 +21,63 @@ declare const VResponsive: {
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
             class?: any;
-            contentClass?: string | undefined;
-        } & {
             $children?: vue.VNodeChild | {
                 default?: (() => vue.VNodeChild) | undefined;
                 additional?: (() => vue.VNodeChild) | undefined;
             } | (() => vue.VNodeChild);
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 additional?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            contentClass?: string | undefined;
             "v-slot:additional"?: false | (() => vue.VNodeChild) | undefined;
-        } & {
             $slots?: {
                 default?: (() => vue.VNodeChild) | undefined;
                 additional?: (() => vue.VNodeChild) | undefined;
             } | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style">;
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -48,13 +85,19 @@ declare const VResponsive: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            additional?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
         }>;
-        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            inline: boolean;
             style: vue.StyleValue;
         } & {
             height?: string | number | undefined;
@@ -84,8 +127,16 @@ declare const VResponsive: {
                 additional?: (() => vue.VNodeChild) | undefined;
             } | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            inline: boolean;
             style: vue.StyleValue;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            additional: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -100,12 +151,13 @@ declare const VResponsive: {
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        inline: boolean;
         style: vue.StyleValue;
     } & {
         height?: string | number | undefined;
@@ -139,6 +191,7 @@ declare const VResponsive: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    inline: boolean;
     style: vue.StyleValue;
 } & {
     height?: string | number | undefined;
@@ -168,8 +221,16 @@ declare const VResponsive: {
         additional?: (() => vue.VNodeChild) | undefined;
     } | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    inline: boolean;
     style: vue.StyleValue;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    additional: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
@@ -183,6 +244,7 @@ declare const VResponsive: {
     };
     aspectRatio: (StringConstructor | NumberConstructor)[];
     contentClass: StringConstructor;
+    inline: BooleanConstructor;
 }, vue.ExtractPropTypes<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -197,6 +259,7 @@ declare const VResponsive: {
     };
     aspectRatio: (StringConstructor | NumberConstructor)[];
     contentClass: StringConstructor;
+    inline: BooleanConstructor;
 }>>;
 type VResponsive = InstanceType<typeof VResponsive>;
 

package/lib/components/VSelect/VSelect.css

@@ -15,6 +15,9 @@
 .v-select .v-field .v-field__input, .v-select .v-field.v-field {
   cursor: pointer;
 }
+.v-select .v-field--variant-outlined {
+  --select-chips-margin-bottom: 2px;
+}
 .v-select .v-field .v-field__input > input {
   align-self: flex-start;
   opacity: 1;
@@ -24,10 +27,6 @@
   transition: none;
   pointer-events: none;
 }
-.v-select .v-field .v-field__append-inner > .v-icon {
-  margin-inline-start: 4px;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
 .v-select .v-field--dirty .v-select__selection {
   margin-inline-end: 2px;
 }
@@ -47,17 +46,24 @@
   line-height: inherit;
   max-width: 100%;
 }
-.v-select--active-menu .v-field__append-inner > .v-icon {
-  opacity: var(--v-high-emphasis-opacity);
-  transform: rotate(180deg);
+.v-select--chips .v-field__input, .v-select--selection-slot .v-field__input {
+  min-height: calc(var(--v-field-input-min-height) + var(--select-chips-margin-bottom) + 2px);
 }
-.v-select--chips .v-select__selection {
+.v-select--chips .v-select__selection, .v-select--selection-slot .v-select__selection {
   margin-top: 2px;
   margin-bottom: var(--select-chips-margin-bottom);
 }
-.v-select--chips .v-select__selection:first-child {
+.v-select--chips .v-select__selection:first-child, .v-select--selection-slot .v-select__selection:first-child {
   margin-inline-start: 0;
 }
 .v-select--selected .v-field .v-field__input > input {
   opacity: 0;
+}
+.v-select__menu-icon {
+  margin-inline-start: 4px;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-select--active-menu .v-select__menu-icon {
+  opacity: var(--v-high-emphasis-opacity);
+  transform: rotate(180deg);
 }

package/lib/components/VSelect/VSelect.mjs

@@ -14,7 +14,7 @@ import { VIcon } from "../VIcon/index.mjs";
 import { VTextField } from "../VTextField/index.mjs"; // Composables
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { IconValue } from "../../composables/icons.mjs";
-import { makeItemsProps, useItems } from "../../composables/items.mjs";
+import { makeItemsProps, useItems } from "../../composables/list-items.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
 import { useForm } from "../../composables/form.mjs";
 import { useLocale } from "../../composables/locale.mjs";
@@ -210,10 +210,10 @@ export const VSelect = genericComponent()({
           'v-select--active-menu': menu.value,
           'v-select--chips': !!props.chips,
           [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
-          'v-select--selected': model.value.length
+          'v-select--selected': model.value.length,
+          'v-select--selection-slot': !!slots.selection
         }, props.class],
         "style": props.style,
-        "appendInnerIcon": props.menuIcon,
         "readonly": true,
         "placeholder": placeholder,
         "onClick:clear": onClear,
@@ -245,25 +245,21 @@ export const VSelect = genericComponent()({
             default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
-              if (slots.item) {
-                return slots.item?.({
-                  item,
-                  index,
-                  props: mergeProps(item.props, {
-                    onClick: () => select(item)
-                  })
-                });
-              }
-              return _createVNode(VListItem, _mergeProps({
-                "key": index
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
+              const itemProps = mergeProps(item.props, {
+                key: index,
+                onClick: () => select(item)
+              });
+              return slots.item?.({
+                item,
+                index,
+                props: itemProps
+              }) ?? _createVNode(VListItem, itemProps, {
                 prepend: _ref2 => {
                   let {
                     isSelected
                   } = _ref2;
                   return _createVNode(_Fragment, null, [props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
+                    "key": item.value,
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
@@ -320,7 +316,16 @@ export const VSelect = genericComponent()({
           }, [item.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
             "class": "v-select__selection-comma"
           }, [_createTextVNode(",")])])]);
-        })])
+        })]),
+        'append-inner': function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return _createVNode(_Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? _createVNode(VIcon, {
+            "class": "v-select__menu-icon",
+            "icon": props.menuIcon
+          }, null) : undefined]);
+        }
       });
     });
     return forwardRefs({