@vuetify/nightly 4.0.0-dev-20230422.0 → 4.0.0-dev-20230427.0

package/lib/components/VCounter/VCounter.mjs

@@ -4,6 +4,7 @@ import "./VCounter.css";
 
 // Components
 import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
 import { computed } from 'vue';
 import { genericComponent, useRender } from "../../util/index.mjs";
@@ -17,6 +18,7 @@ export const VCounter = genericComponent()({
       type: [Number, String],
       default: 0
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition
@@ -34,7 +36,8 @@ export const VCounter = genericComponent()({
       "transition": props.transition
     }, {
       default: () => [_withDirectives(_createVNode("div", {
-        "class": "v-counter"
+        "class": ['v-counter', props.class],
+        "style": props.style
       }, [slots.default ? slots.default({
         counter: counter.value,
         max: props.max,

package/lib/components/VCounter/VCounter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VCounter.mjs","names":["VSlideYTransition","makeTransitionProps","MaybeTransition","computed","genericComponent","useRender","VCounter","name","functional","props","active","Boolean","max","Number","String","value","type","default","transition","component","setup","_ref","slots","counter","_createVNode","_withDirectives","_vShow"],"sources":["../../../src/components/VCounter/VCounter.tsx"],"sourcesContent":["// Styles\nimport './VCounter.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VCounter = genericComponent()({\n  name: 'VCounter',\n\n  functional: true,\n\n  props: {\n    active: Boolean,\n    max: [Number, String],\n    value: {\n      type: [Number, String],\n      default: 0,\n    },\n\n    ...makeTransitionProps({\n      transition: { component: VSlideYTransition },\n    }),\n  },\n\n  setup (props, { slots }) {\n    const counter = computed(() => {\n      return props.max ? `${props.value} / ${props.max}` : String(props.value)\n    })\n\n    useRender(() => (\n      <MaybeTransition transition={ props.transition }>\n        <div\n          v-show={ props.active }\n          class=\"v-counter\"\n        >\n          { slots.default\n            ? slots.default({\n              counter: counter.value,\n              max: props.max,\n              value: props.value,\n            })\n            : counter.value\n          }\n        </div>\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VCounter = InstanceType<typeof VCounter>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,oCAE1B;AAAA,SACSC,mBAAmB,EAAEC,eAAe,4CAE7C;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,QAAQ,GAAGF,gBAAgB,EAAE,CAAC;EACzCG,IAAI,EAAE,UAAU;EAEhBC,UAAU,EAAE,IAAI;EAEhBC,KAAK,EAAE;IACLC,MAAM,EAAEC,OAAO;IACfC,GAAG,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACrBC,KAAK,EAAE;MACLC,IAAI,EAAE,CAACH,MAAM,EAAEC,MAAM,CAAC;MACtBG,OAAO,EAAE;IACX,CAAC;IAED,GAAGhB,mBAAmB,CAAC;MACrBiB,UAAU,EAAE;QAAEC,SAAS,EAAEnB;MAAkB;IAC7C,CAAC;EACH,CAAC;EAEDoB,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,OAAO,GAAGpB,QAAQ,CAAC,MAAM;MAC7B,OAAOM,KAAK,CAACG,GAAG,GAAI,GAAEH,KAAK,CAACM,KAAM,MAAKN,KAAK,CAACG,GAAI,EAAC,GAAGE,MAAM,CAACL,KAAK,CAACM,KAAK,CAAC;IAC1E,CAAC,CAAC;IAEFV,SAAS,CAAC,MAAAmB,YAAA,CAAAtB,eAAA;MAAA,cACsBO,KAAK,CAACS;IAAU;MAAAD,OAAA,EAAAA,CAAA,MAAAQ,eAAA,CAAAD,YAAA;QAAA,SAGpC;MAAW,IAEfF,KAAK,CAACL,OAAO,GACXK,KAAK,CAACL,OAAO,CAAC;QACdM,OAAO,EAAEA,OAAO,CAACR,KAAK;QACtBH,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdG,KAAK,EAAEN,KAAK,CAACM;MACf,CAAC,CAAC,GACAQ,OAAO,CAACR,KAAK,MAAAW,MAAA,EATRjB,KAAK,CAACC,MAAM;IAAA,EAa1B,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VCounter.mjs","names":["VSlideYTransition","makeComponentProps","makeTransitionProps","MaybeTransition","computed","genericComponent","useRender","VCounter","name","functional","props","active","Boolean","max","Number","String","value","type","default","transition","component","setup","_ref","slots","counter","_createVNode","_withDirectives","class","style","_vShow"],"sources":["../../../src/components/VCounter/VCounter.tsx"],"sourcesContent":["// Styles\nimport './VCounter.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VCounter = genericComponent()({\n  name: 'VCounter',\n\n  functional: true,\n\n  props: {\n    active: Boolean,\n    max: [Number, String],\n    value: {\n      type: [Number, String],\n      default: 0,\n    },\n\n    ...makeComponentProps(),\n    ...makeTransitionProps({\n      transition: { component: VSlideYTransition },\n    }),\n  },\n\n  setup (props, { slots }) {\n    const counter = computed(() => {\n      return props.max ? `${props.value} / ${props.max}` : String(props.value)\n    })\n\n    useRender(() => (\n      <MaybeTransition transition={ props.transition }>\n        <div\n          v-show={ props.active }\n          class={[\n            'v-counter',\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { slots.default\n            ? slots.default({\n              counter: counter.value,\n              max: props.max,\n              value: props.value,\n            })\n            : counter.value\n          }\n        </div>\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VCounter = InstanceType<typeof VCounter>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,oCAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,mBAAmB,EAAEC,eAAe,4CAE7C;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,QAAQ,GAAGF,gBAAgB,EAAE,CAAC;EACzCG,IAAI,EAAE,UAAU;EAEhBC,UAAU,EAAE,IAAI;EAEhBC,KAAK,EAAE;IACLC,MAAM,EAAEC,OAAO;IACfC,GAAG,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACrBC,KAAK,EAAE;MACLC,IAAI,EAAE,CAACH,MAAM,EAAEC,MAAM,CAAC;MACtBG,OAAO,EAAE;IACX,CAAC;IAED,GAAGjB,kBAAkB,EAAE;IACvB,GAAGC,mBAAmB,CAAC;MACrBiB,UAAU,EAAE;QAAEC,SAAS,EAAEpB;MAAkB;IAC7C,CAAC;EACH,CAAC;EAEDqB,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,OAAO,GAAGpB,QAAQ,CAAC,MAAM;MAC7B,OAAOM,KAAK,CAACG,GAAG,GAAI,GAAEH,KAAK,CAACM,KAAM,MAAKN,KAAK,CAACG,GAAI,EAAC,GAAGE,MAAM,CAACL,KAAK,CAACM,KAAK,CAAC;IAC1E,CAAC,CAAC;IAEFV,SAAS,CAAC,MAAAmB,YAAA,CAAAtB,eAAA;MAAA,cACsBO,KAAK,CAACS;IAAU;MAAAD,OAAA,EAAAA,CAAA,MAAAQ,eAAA,CAAAD,YAAA;QAAA,SAGnC,CACL,WAAW,EACXf,KAAK,CAACiB,KAAK,CACZ;QAAA,SACOjB,KAAK,CAACkB;MAAK,IAEjBL,KAAK,CAACL,OAAO,GACXK,KAAK,CAACL,OAAO,CAAC;QACdM,OAAO,EAAEA,OAAO,CAACR,KAAK;QACtBH,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdG,KAAK,EAAEN,KAAK,CAACM;MACf,CAAC,CAAC,GACAQ,OAAO,CAACR,KAAK,MAAAa,MAAA,EAbRnB,KAAK,CAACC,MAAM;IAAA,EAiB1B,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VCounter/index.d.ts

@@ -36,9 +36,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -69,9 +66,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -117,9 +111,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -142,9 +133,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -188,6 +176,7 @@ declare const VCounter: {
                 }>>;
             };
             value: string | number;
+            style: vue.StyleValue;
         }> & Omit<{
             active: boolean;
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
@@ -215,9 +204,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -248,9 +234,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -296,9 +279,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -321,9 +301,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -367,21 +344,20 @@ declare const VCounter: {
                 }>>;
             };
             value: string | number;
+            style: vue.StyleValue;
         } & {
             max?: string | number | undefined;
+            class?: any;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "active" | "transition" | "value">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "active" | "transition" | "value" | "style">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -422,9 +398,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -455,9 +428,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -503,9 +473,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -528,9 +495,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -574,15 +538,14 @@ declare const VCounter: {
                 }>>;
             };
             value: string | number;
+            style: vue.StyleValue;
         } & {
             max?: string | number | undefined;
+            class?: any;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -615,9 +578,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -648,9 +608,6 @@ declare const VCounter: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -696,9 +653,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -721,9 +675,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -767,6 +718,7 @@ declare const VCounter: {
                 }>>;
             };
             value: string | number;
+            style: vue.StyleValue;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -814,9 +766,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -847,9 +796,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -895,9 +841,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -920,9 +863,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -966,15 +906,14 @@ declare const VCounter: {
             }>>;
         };
         value: string | number;
+        style: vue.StyleValue;
     } & {
         max?: string | number | undefined;
+        class?: any;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1011,9 +950,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1044,9 +980,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1092,9 +1025,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1117,9 +1047,6 @@ declare const VCounter: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -1163,15 +1090,14 @@ declare const VCounter: {
         }>>;
     };
     value: string | number;
+    style: vue.StyleValue;
 } & {
     max?: string | number | undefined;
+    class?: any;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -1204,9 +1130,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1237,9 +1160,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1285,9 +1205,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1310,9 +1227,6 @@ declare const VCounter: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -1356,6 +1270,7 @@ declare const VCounter: {
         }>>;
     };
     value: string | number;
+    style: vue.StyleValue;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     transition: Omit<{
         type: vue.PropType<string | boolean | (vue.TransitionProps & {
@@ -1389,9 +1304,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1422,9 +1334,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1470,9 +1379,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1495,9 +1401,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1565,9 +1468,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1598,9 +1498,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1646,9 +1543,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1671,9 +1565,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1717,6 +1608,11 @@ declare const VCounter: {
             }>>;
         };
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     active: BooleanConstructor;
     max: (StringConstructor | NumberConstructor)[];
     value: {
@@ -1756,9 +1652,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1789,9 +1682,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1837,9 +1727,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1862,9 +1749,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1932,9 +1816,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1965,9 +1846,6 @@ declare const VCounter: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -2013,9 +1891,6 @@ declare const VCounter: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -2038,9 +1913,6 @@ declare const VCounter: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -2084,6 +1956,11 @@ declare const VCounter: {
             }>>;
         };
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     active: BooleanConstructor;
     max: (StringConstructor | NumberConstructor)[];
     value: {

package/lib/components/VDefaultsProvider/index.d.ts

@@ -30,9 +30,6 @@ declare const VDefaultsProvider: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -63,9 +60,6 @@ declare const VDefaultsProvider: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -108,9 +102,6 @@ declare const VDefaultsProvider: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -133,9 +124,6 @@ declare const VDefaultsProvider: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;

package/lib/components/VDialog/VDialog.mjs

@@ -10,7 +10,7 @@ import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useScopeId } from "../../composables/scopeId.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
 import { computed, mergeProps, nextTick, ref, watch } from 'vue';
-import { genericComponent, IN_BROWSER, useRender } from "../../util/index.mjs";
+import { focusableChildren, genericComponent, IN_BROWSER, useRender } from "../../util/index.mjs";
 import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Types
 export const VDialog = genericComponent()({
   name: 'VDialog',
@@ -52,7 +52,7 @@ export const VDialog = genericComponent()({
       ![document, overlay.value.contentEl].includes(after) &&
       // It isn't inside the dialog body
       !overlay.value.contentEl.contains(after)) {
-        const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+        const focusable = focusableChildren(overlay.value.contentEl);
         if (!focusable.length) return;
         const firstElement = focusable[0];
         const lastElement = focusable[focusable.length - 1];
@@ -93,7 +93,8 @@ export const VDialog = genericComponent()({
         "class": ['v-dialog', {
           'v-dialog--fullscreen': props.fullscreen,
           'v-dialog--scrollable': props.scrollable
-        }]
+        }, props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,