@vuetify/nightly 3.4.0-alpha.1-dev.2023-10-06 → 3.4.0-alpha.1-dev.2023-10-21

package/lib/labs/VStepper/VStepperActions.mjs

@@ -1,6 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 // Components
-import { VBtn } from "../../components/VBtn/VBtn.mjs"; // Composables
+import { VBtn } from "../../components/VBtn/VBtn.mjs";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.mjs"; // Composables
 import { useLocale } from "../../composables/locale.mjs"; // Utilities
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVStepperActionsProps = propsFactory({
@@ -40,20 +41,40 @@ export const VStepperActions = genericComponent()({
       emit('click:next');
     }
     useRender(() => {
+      const prevSlotProps = {
+        onClick: onClickPrev
+      };
+      const nextSlotProps = {
+        onClick: onClickNext
+      };
       return _createVNode("div", {
         "class": "v-stepper-actions"
-      }, [_createVNode(VBtn, {
-        "disabled": ['prev', true].includes(props.disabled),
-        "text": t(props.prevText),
-        "variant": "text",
-        "onClick": onClickPrev
-      }, null), _createVNode(VBtn, {
-        "disabled": ['next', true].includes(props.disabled),
-        "color": props.color,
-        "text": t(props.nextText),
-        "variant": "tonal",
-        "onClick": onClickNext
-      }, null)]);
+      }, [_createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            disabled: ['prev', true].includes(props.disabled),
+            text: t(props.prevText),
+            variant: 'text'
+          }
+        }
+      }, {
+        default: () => [slots.prev?.({
+          props: prevSlotProps
+        }) ?? _createVNode(VBtn, prevSlotProps, null)]
+      }), _createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            color: props.color,
+            disabled: ['next', true].includes(props.disabled),
+            text: t(props.nextText),
+            variant: 'tonal'
+          }
+        }
+      }, {
+        default: () => [slots.next?.({
+          props: nextSlotProps
+        }) ?? _createVNode(VBtn, nextSlotProps, null)]
+      })]);
     });
     return {};
   }

package/lib/labs/VStepper/VStepperActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepperActions.mjs","names":["VBtn","useLocale","genericComponent","propsFactory","useRender","makeVStepperActionsProps","color","String","disabled","type","Boolean","default","prevText","nextText","VStepperActions","name","props","emits","click:prev","click:next","setup","_ref","emit","slots","t","onClickPrev","onClickNext","_createVNode","includes"],"sources":["../../../src/labs/VStepper/VStepperActions.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn/VBtn'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVStepperActionsProps = propsFactory({\n  color: String,\n  disabled: {\n    type: [Boolean, String] as PropType<boolean | 'next' | 'prev'>,\n    default: false,\n  },\n  prevText: {\n    type: String,\n    default: '$vuetify.stepper.prev',\n  },\n  nextText: {\n    type: String,\n    default: '$vuetify.stepper.next',\n  },\n}, 'VStepperActions')\n\nexport const VStepperActions = genericComponent()({\n  name: 'VStepperActions',\n\n  props: makeVStepperActionsProps(),\n\n  emits: {\n    'click:prev': () => true,\n    'click:next': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { t } = useLocale()\n    function onClickPrev () {\n      emit('click:prev')\n    }\n\n    function onClickNext () {\n      emit('click:next')\n    }\n\n    useRender(() => {\n      return (\n        <div class=\"v-stepper-actions\">\n          <VBtn\n            disabled={['prev', true].includes(props.disabled)}\n            text={ t(props.prevText) }\n            variant=\"text\"\n            onClick={ onClickPrev }\n          />\n\n          <VBtn\n            disabled={['next', true].includes(props.disabled)}\n            color={ props.color }\n            text={ t(props.nextText) }\n            variant=\"tonal\"\n            onClick={ onClickNext }\n          />\n        </div>\n      )\n    })\n    return {}\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,IAAI,0CAEb;AAAA,SACSC,SAAS,wCAElB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,wBAAwB,GAAGF,YAAY,CAAC;EACnDG,KAAK,EAAEC,MAAM;EACbC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACC,OAAO,EAAEH,MAAM,CAAwC;IAC9DI,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEF,MAAM;IACZI,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEF,MAAM;IACZI,OAAO,EAAE;EACX;AACF,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,MAAMG,eAAe,GAAGZ,gBAAgB,EAAE,CAAC;EAChDa,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEX,wBAAwB,EAAE;EAEjCY,KAAK,EAAE;IACL,YAAY,EAAEC,CAAA,KAAM,IAAI;IACxB,YAAY,EAAEC,CAAA,KAAM;EACtB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG;IAAE,CAAC,GAAGvB,SAAS,EAAE;IACzB,SAASwB,WAAWA,CAAA,EAAI;MACtBH,IAAI,CAAC,YAAY,CAAC;IACpB;IAEA,SAASI,WAAWA,CAAA,EAAI;MACtBJ,IAAI,CAAC,YAAY,CAAC;IACpB;IAEAlB,SAAS,CAAC,MAAM;MACd,OAAAuB,YAAA;QAAA,SACa;MAAmB,IAAAA,YAAA,CAAA3B,IAAA;QAAA,YAEhB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC4B,QAAQ,CAACZ,KAAK,CAACR,QAAQ,CAAC;QAAA,QAC1CgB,CAAC,CAACR,KAAK,CAACJ,QAAQ,CAAC;QAAA,WAChB,MAAM;QAAA,WACJa;MAAW,UAAAE,YAAA,CAAA3B,IAAA;QAAA,YAIX,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC4B,QAAQ,CAACZ,KAAK,CAACR,QAAQ,CAAC;QAAA,SACzCQ,KAAK,CAACV,KAAK;QAAA,QACZkB,CAAC,CAACR,KAAK,CAACH,QAAQ,CAAC;QAAA,WAChB,OAAO;QAAA,WACLa;MAAW;IAI7B,CAAC,CAAC;IACF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VStepperActions.mjs","names":["VBtn","VDefaultsProvider","useLocale","genericComponent","propsFactory","useRender","makeVStepperActionsProps","color","String","disabled","type","Boolean","default","prevText","nextText","VStepperActions","name","props","emits","click:prev","click:next","setup","_ref","emit","slots","t","onClickPrev","onClickNext","prevSlotProps","onClick","nextSlotProps","_createVNode","includes","text","variant","prev","next"],"sources":["../../../src/labs/VStepper/VStepperActions.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VStepperActionsSlots = {\n  prev: {\n    props: { onClick: () => void }\n  }\n  next: {\n    props: { onClick: () => void }\n  }\n}\n\nexport const makeVStepperActionsProps = propsFactory({\n  color: String,\n  disabled: {\n    type: [Boolean, String] as PropType<boolean | 'next' | 'prev'>,\n    default: false,\n  },\n  prevText: {\n    type: String,\n    default: '$vuetify.stepper.prev',\n  },\n  nextText: {\n    type: String,\n    default: '$vuetify.stepper.next',\n  },\n}, 'VStepperActions')\n\nexport const VStepperActions = genericComponent<VStepperActionsSlots>()({\n  name: 'VStepperActions',\n\n  props: makeVStepperActionsProps(),\n\n  emits: {\n    'click:prev': () => true,\n    'click:next': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { t } = useLocale()\n    function onClickPrev () {\n      emit('click:prev')\n    }\n\n    function onClickNext () {\n      emit('click:next')\n    }\n\n    useRender(() => {\n      const prevSlotProps = {\n        onClick: onClickPrev,\n      }\n      const nextSlotProps = {\n        onClick: onClickNext,\n      }\n\n      return (\n        <div class=\"v-stepper-actions\">\n          <VDefaultsProvider\n            defaults={{\n              VBtn: {\n                disabled: ['prev', true].includes(props.disabled),\n                text: t(props.prevText),\n                variant: 'text',\n              },\n            }}\n          >\n            { slots.prev?.({ props: prevSlotProps }) ?? (\n              <VBtn { ...prevSlotProps } />\n            )}\n          </VDefaultsProvider>\n\n          <VDefaultsProvider\n            defaults={{\n              VBtn: {\n                color: props.color,\n                disabled: ['next', true].includes(props.disabled),\n                text: t(props.nextText),\n                variant: 'tonal',\n              },\n            }}\n          >\n            { slots.next?.({ props: nextSlotProps }) ?? (\n              <VBtn { ...nextSlotProps } />\n            )}\n          </VDefaultsProvider>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VStepperActions = InstanceType<typeof VStepperActions>\n"],"mappings":";AAAA;AAAA,SACSA,IAAI;AAAA,SACJC,iBAAiB,oEAE1B;AAAA,SACSC,SAAS,wCAElB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAYA,OAAO,MAAMC,wBAAwB,GAAGF,YAAY,CAAC;EACnDG,KAAK,EAAEC,MAAM;EACbC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAACC,OAAO,EAAEH,MAAM,CAAwC;IAC9DI,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEF,MAAM;IACZI,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEF,MAAM;IACZI,OAAO,EAAE;EACX;AACF,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,MAAMG,eAAe,GAAGZ,gBAAgB,EAAwB,CAAC;EACtEa,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEX,wBAAwB,EAAE;EAEjCY,KAAK,EAAE;IACL,YAAY,EAAEC,CAAA,KAAM,IAAI;IACxB,YAAY,EAAEC,CAAA,KAAM;EACtB,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG;IAAE,CAAC,GAAGvB,SAAS,EAAE;IACzB,SAASwB,WAAWA,CAAA,EAAI;MACtBH,IAAI,CAAC,YAAY,CAAC;IACpB;IAEA,SAASI,WAAWA,CAAA,EAAI;MACtBJ,IAAI,CAAC,YAAY,CAAC;IACpB;IAEAlB,SAAS,CAAC,MAAM;MACd,MAAMuB,aAAa,GAAG;QACpBC,OAAO,EAAEH;MACX,CAAC;MACD,MAAMI,aAAa,GAAG;QACpBD,OAAO,EAAEF;MACX,CAAC;MAED,OAAAI,YAAA;QAAA,SACa;MAAmB,IAAAA,YAAA,CAAA9B,iBAAA;QAAA,YAEhB;UACRD,IAAI,EAAE;YACJS,QAAQ,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAACuB,QAAQ,CAACf,KAAK,CAACR,QAAQ,CAAC;YACjDwB,IAAI,EAAER,CAAC,CAACR,KAAK,CAACJ,QAAQ,CAAC;YACvBqB,OAAO,EAAE;UACX;QACF;MAAC;QAAAtB,OAAA,EAAAA,CAAA,MAECY,KAAK,CAACW,IAAI,GAAG;UAAElB,KAAK,EAAEW;QAAc,CAAC,CAAC,IAAAG,YAAA,CAAA/B,IAAA,EAC3B4B,aAAa,OACzB;MAAA,IAAAG,YAAA,CAAA9B,iBAAA;QAAA,YAIS;UACRD,IAAI,EAAE;YACJO,KAAK,EAAEU,KAAK,CAACV,KAAK;YAClBE,QAAQ,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAACuB,QAAQ,CAACf,KAAK,CAACR,QAAQ,CAAC;YACjDwB,IAAI,EAAER,CAAC,CAACR,KAAK,CAACH,QAAQ,CAAC;YACvBoB,OAAO,EAAE;UACX;QACF;MAAC;QAAAtB,OAAA,EAAAA,CAAA,MAECY,KAAK,CAACY,IAAI,GAAG;UAAEnB,KAAK,EAAEa;QAAc,CAAC,CAAC,IAAAC,YAAA,CAAA/B,IAAA,EAC3B8B,aAAa,OACzB;MAAA;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VStepper/VStepperItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepperItem.mjs","names":["VAvatar","VIcon","makeGroupItemProps","useGroupItem","Ripple","computed","VStepperSymbol","genericComponent","propsFactory","useRender","makeVStepperItemProps","color","String","title","subtitle","complete","Boolean","completeIcon","type","default","editable","editIcon","error","errorIcon","icon","ripple","Object","rules","Array","VStepperItem","name","directives","props","emits","val","setup","_ref","slots","group","step","value","isValid","every","handler","canEdit","disabled","hasError","hasCompleted","length","slotProps","hasColor","isSelected","hasTitle","hasSubtitle","onClick","toggle","_withDirectives","_createVNode","selectedClass","undefined","_resolveDirective"],"sources":["../../../src/labs/VStepper/VStepperItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VIcon } from '@/components/VIcon/VIcon'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed } from 'vue'\nimport { VStepperSymbol } from './VStepper'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type StepperItemSlot = {\n  canEdit: boolean\n  hasError: boolean\n  hasCompleted: boolean\n  title?: string\n  subtitle?: string\n  step: any\n}\n\nexport type VStepperItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n}\n\nexport type ValidationRule = () => string | boolean\n\nexport const makeVStepperItemProps = propsFactory({\n  color: String,\n  title: String,\n  subtitle: String,\n  complete: Boolean,\n  completeIcon: {\n    type: String,\n    default: '$complete',\n  },\n  editable: Boolean,\n  editIcon: {\n    type: String,\n    default: '$edit',\n  },\n  error: Boolean,\n  errorIcon: {\n    type: String,\n    default: '$error',\n  },\n  icon: String,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  rules: {\n    type: Array as PropType<readonly ValidationRule[]>,\n    default: () => ([]),\n  },\n\n  ...makeGroupItemProps(),\n}, 'VStepperItem')\n\nexport const VStepperItem = genericComponent<VStepperItemSlots>()({\n  name: 'VStepperItem',\n\n  directives: { Ripple },\n\n  props: makeVStepperItemProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const group = useGroupItem(props, VStepperSymbol, true)\n    const step = computed(() => group?.value.value ?? props.value)\n    const isValid = computed(() => props.rules.every(handler => handler() === true))\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || !isValid.value)\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (props.editable) return props.editIcon\n\n      return props.icon\n    })\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    useRender(() => {\n      const hasColor = (\n        !group ||\n        group.isSelected.value ||\n        hasCompleted.value ||\n        canEdit.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n      const hasTitle = !!(props.title || slots.title)\n      const hasSubtitle = !!(props.subtitle || slots.subtitle)\n\n      function onClick () {\n        group?.toggle()\n      }\n\n      return (\n        <button\n          class={[\n            'v-stepper-item',\n            {\n              'v-stepper-item--complete': hasCompleted.value,\n              'v-stepper-item--disabled': props.disabled,\n              'v-stepper-item--error': hasError.value,\n            },\n            group?.selectedClass.value,\n          ]}\n          disabled={ !props.editable }\n          v-ripple={[\n            props.ripple && props.editable,\n            null,\n            null,\n          ]}\n          onClick={ onClick }\n        >\n          <VAvatar\n            key=\"stepper-avatar\"\n            class=\"v-stepper-item__avatar\"\n            color={ hasColor ? props.color : undefined }\n            size={ 24 }\n          >\n            { slots.icon?.(slotProps.value) ?? (\n              icon.value ? (\n                <VIcon icon={ icon.value }></VIcon>\n              ) : step.value\n            )}\n          </VAvatar>\n\n          <div class=\"v-stepper-item__content\">\n            { hasTitle && (\n              <div\n                key=\"title\"\n                class=\"v-stepper-item__title\"\n              >\n                { slots.title?.(slotProps.value) ?? props.title }\n              </div>\n            )}\n\n            { hasSubtitle && (\n              <div\n                key=\"subtitle\"\n                class=\"v-stepper-item__subtitle\"\n              >\n                { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n              </div>\n            )}\n\n            { slots.default?.(slotProps.value) }\n          </div>\n        </button>\n      )\n    })\n    return {}\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VStepperItem.mjs","names":["VAvatar","VIcon","makeGroupItemProps","useGroupItem","Ripple","computed","VStepperSymbol","genericComponent","propsFactory","useRender","makeVStepperItemProps","color","String","title","subtitle","complete","Boolean","completeIcon","type","default","editable","editIcon","error","errorIcon","icon","ripple","Object","rules","Array","VStepperItem","name","directives","props","emits","val","setup","_ref","slots","group","step","value","isValid","every","handler","canEdit","disabled","hasError","hasCompleted","length","slotProps","hasColor","isSelected","hasTitle","hasSubtitle","onClick","toggle","_withDirectives","_createVNode","selectedClass","undefined","_resolveDirective"],"sources":["../../../src/labs/VStepper/VStepperItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VIcon } from '@/components/VIcon/VIcon'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed } from 'vue'\nimport { VStepperSymbol } from './VStepper'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type StepperItemSlot = {\n  canEdit: boolean\n  hasError: boolean\n  hasCompleted: boolean\n  title?: string\n  subtitle?: string\n  step: any\n}\n\nexport type VStepperItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  title: StepperItemSlot\n  subtitle: StepperItemSlot\n}\n\nexport type ValidationRule = () => string | boolean\n\nexport const makeVStepperItemProps = propsFactory({\n  color: String,\n  title: String,\n  subtitle: String,\n  complete: Boolean,\n  completeIcon: {\n    type: String,\n    default: '$complete',\n  },\n  editable: Boolean,\n  editIcon: {\n    type: String,\n    default: '$edit',\n  },\n  error: Boolean,\n  errorIcon: {\n    type: String,\n    default: '$error',\n  },\n  icon: String,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  rules: {\n    type: Array as PropType<readonly ValidationRule[]>,\n    default: () => ([]),\n  },\n\n  ...makeGroupItemProps(),\n}, 'VStepperItem')\n\nexport const VStepperItem = genericComponent<VStepperItemSlots>()({\n  name: 'VStepperItem',\n\n  directives: { Ripple },\n\n  props: makeVStepperItemProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const group = useGroupItem(props, VStepperSymbol, true)\n    const step = computed(() => group?.value.value ?? props.value)\n    const isValid = computed(() => props.rules.every(handler => handler() === true))\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || !isValid.value)\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (props.editable) return props.editIcon\n\n      return props.icon\n    })\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    useRender(() => {\n      const hasColor = (\n        !group ||\n        group.isSelected.value ||\n        hasCompleted.value ||\n        canEdit.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n      const hasTitle = !!(props.title || slots.title)\n      const hasSubtitle = !!(props.subtitle || slots.subtitle)\n\n      function onClick () {\n        group?.toggle()\n      }\n\n      return (\n        <button\n          class={[\n            'v-stepper-item',\n            {\n              'v-stepper-item--complete': hasCompleted.value,\n              'v-stepper-item--disabled': props.disabled,\n              'v-stepper-item--error': hasError.value,\n            },\n            group?.selectedClass.value,\n          ]}\n          disabled={ !props.editable }\n          v-ripple={[\n            props.ripple && props.editable,\n            null,\n            null,\n          ]}\n          onClick={ onClick }\n        >\n          <VAvatar\n            key=\"stepper-avatar\"\n            class=\"v-stepper-item__avatar\"\n            color={ hasColor ? props.color : undefined }\n            size={ 24 }\n          >\n            { slots.icon?.(slotProps.value) ?? (\n              icon.value ? (\n                <VIcon icon={ icon.value }></VIcon>\n              ) : step.value\n            )}\n          </VAvatar>\n\n          <div class=\"v-stepper-item__content\">\n            { hasTitle && (\n              <div\n                key=\"title\"\n                class=\"v-stepper-item__title\"\n              >\n                { slots.title?.(slotProps.value) ?? props.title }\n              </div>\n            )}\n\n            { hasSubtitle && (\n              <div\n                key=\"subtitle\"\n                class=\"v-stepper-item__subtitle\"\n              >\n                { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n              </div>\n            )}\n\n            { slots.default?.(slotProps.value) }\n          </div>\n        </button>\n      )\n    })\n    return {}\n  },\n})\n\nexport type VStepperItem = InstanceType<typeof VStepperItem>\n"],"mappings":"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"}

package/lib/labs/VStepper/VStepperItem.sass

@@ -6,11 +6,11 @@
   align-self: stretch
   display: inline-flex
   flex: none
-  opacity: var(--v-medium-emphasis-opacity)
-  padding: 1.5rem
-  transition-duration: .2s
-  transition-property: opacity
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+  opacity: $stepper-item-opacity
+  padding: $stepper-item-padding
+  transition-duration: $stepper-item-transition-duration
+  transition-property: $stepper-item-transition-property
+  transition-timing-function: $stepper-item-transition-timing-function
 
   &--selected
     opacity: 1
@@ -29,13 +29,13 @@
     flex-basis: $stepper-alt-labels-flex-basis
 
 .v-stepper-item__avatar.v-avatar
-  background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
-  color: rgb(var(--v-theme-on-surface-variant))
-  font-size: .75rem
-  margin-inline-end: 8px
+  background: $stepper-item-avatar-background
+  color: $stepper-item-avatar-color
+  font-size: $stepper-item-avatar-font-size
+  margin-inline-end: $stepper-item-avatar-margin-inline-end
 
   .v-icon
-    font-size: .875rem
+    font-size: $stepper-item-avatar-icon-font-size
 
   .v-stepper-item--selected &,
   .v-stepper-item--complete &
@@ -45,7 +45,7 @@
     background: rgb(var(--v-theme-error))
 
   .v-stepper--alt-labels &
-    margin-bottom: 16px
+    margin-bottom: $stepper-item-alt-labels-margin-bottom
     margin-inline-end: 0
 
 .v-stepper-item__content
@@ -53,16 +53,16 @@
     // min-height: 28px
 
 .v-stepper-item__title
-  line-height: 1
+  line-height: $stepper-item-title-line-height
 
   .v-stepper--mobile &
     display: none
 
 .v-stepper-item__subtitle
-  font-size: .75rem
+  font-size: $stepper-item-subtitle-font-size
   text-align: left
-  line-height: 1
-  opacity: var(--v-medium-emphasis-opacity)
+  line-height: $stepper-item-subtitle-line-height
+  opacity: $stepper-item-subtitle-opacity
 
   .v-stepper--alt-labels &
     text-align: center

package/lib/labs/VStepper/_variables.scss

@@ -1,4 +1,27 @@
 @use '../../styles/settings';
 
-$stepper-alt-labels-header-divider: 35px -67px 0 !default;
+$stepper-actions-padding: 1rem !default;
+$stepper-actions-stepper-padding: 0 1.5rem 1rem !default;
+$stepper-actions-stepper-window-item-padding: 1.5rem 0 0 !default;
 $stepper-alt-labels-flex-basis : 175px !default;
+$stepper-alt-labels-header-divider: 35px -67px 0 !default;
+$stepper-border-radius: 4px !default;
+$stepper-elevation: 2 !default;
+$stepper-item-opacity: var(--v-medium-emphasis-opacity) !default;
+$stepper-item-padding: 1.5rem !default;
+$stepper-item-transition-duration: .2s !default;
+$stepper-item-transition-property: opacity !default;
+$stepper-item-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$stepper-header-divider-margin: 0 -16px !default;
+$stepper-header-elevation: 2 !default;
+$stepper-window-margin: 1.5rem !default;
+$stepper-item-avatar-background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity)) !default;
+$stepper-item-avatar-color: rgb(var(--v-theme-on-surface-variant)) !default;
+$stepper-item-avatar-font-size: .75rem !default;
+$stepper-item-avatar-margin-inline-end: 8px !default;
+$stepper-item-avatar-icon-font-size: .875rem !default;
+$stepper-item-alt-labels-margin-bottom: 16px !default;
+$stepper-item-title-line-height: 1 !default;
+$stepper-item-subtitle-font-size: .75rem !default;
+$stepper-item-subtitle-line-height: 1 !default;
+$stepper-item-subtitle-opacity: var(--v-medium-emphasis-opacity) !default;

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

@@ -404,6 +404,7 @@ declare const VStepperItem: {
         default: () => never[];
     };
 }>>;
+type VStepperItem = InstanceType<typeof VStepperItem>;
 
 type StepperItem = string | Record<string, any>;
 type VStepperSlot = {
@@ -460,6 +461,8 @@ declare const VStepper: {
                 title?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 subtitle?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 item?: ((arg: StepperItem) => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
             };
             elevation?: string | number | undefined;
             ref?: vue.VNodeRef | undefined;
@@ -478,6 +481,8 @@ declare const VStepper: {
                 title?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 subtitle?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 item?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+                prev?: false | (() => vue.VNodeChild) | undefined;
+                next?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
             onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
@@ -524,6 +529,8 @@ declare const VStepper: {
             "v-slot:item"?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
             "v-slot:header"?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
             "v-slot:actions"?: false | ((arg: VStepperSlot) => vue.VNodeChild) | undefined;
+            "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:icon"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             "v-slot:header-item"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         };
@@ -564,6 +571,12 @@ declare const VStepper: {
             item?: ((arg: StepperItem) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
+            prev?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            next?: (() => 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;
@@ -617,6 +630,8 @@ declare const VStepper: {
                 title?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 subtitle?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 item?: ((arg: StepperItem) => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
             };
             'v-slots'?: {
                 [x: `header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -629,6 +644,8 @@ declare const VStepper: {
                 title?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 subtitle?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
                 item?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+                prev?: false | (() => vue.VNodeChild) | undefined;
+                next?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             [x: `v-slot:header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -641,6 +658,8 @@ declare const VStepper: {
             "v-slot:title"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             "v-slot:subtitle"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             "v-slot:item"?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
         }, {
@@ -699,6 +718,12 @@ declare const VStepper: {
             item: (arg: StepperItem) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
+            prev: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            next: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
         }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -767,6 +792,8 @@ declare const VStepper: {
             title?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             subtitle?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             item?: ((arg: StepperItem) => vue.VNodeChild) | undefined;
+            prev?: (() => vue.VNodeChild) | undefined;
+            next?: (() => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
             [x: `header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -779,6 +806,8 @@ declare const VStepper: {
             title?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             subtitle?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
             item?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+            prev?: false | (() => vue.VNodeChild) | undefined;
+            next?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
         [x: `v-slot:header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -791,6 +820,8 @@ declare const VStepper: {
         "v-slot:title"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         "v-slot:subtitle"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         "v-slot:item"?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+        "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
     } & vue.ShallowUnwrapRef<{
@@ -848,6 +879,8 @@ declare const VStepper: {
         title?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         subtitle?: ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         item?: ((arg: StepperItem) => vue.VNodeChild) | undefined;
+        prev?: (() => vue.VNodeChild) | undefined;
+        next?: (() => vue.VNodeChild) | undefined;
     };
     'v-slots'?: {
         [x: `header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -860,6 +893,8 @@ declare const VStepper: {
         title?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         subtitle?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
         item?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+        prev?: false | (() => vue.VNodeChild) | undefined;
+        next?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
     [x: `v-slot:header-item.${string}`]: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
@@ -872,6 +907,8 @@ declare const VStepper: {
     "v-slot:title"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
     "v-slot:subtitle"?: false | ((arg: StepperItemSlot) => vue.VNodeChild) | undefined;
     "v-slot:item"?: false | ((arg: StepperItem) => vue.VNodeChild) | undefined;
+    "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
 }, {
@@ -930,6 +967,12 @@ declare const VStepper: {
     item: (arg: StepperItem) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    prev: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    next: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     prevText: {
         type: StringConstructor;
@@ -1079,6 +1122,7 @@ declare const VStepper: {
     nonLinear: BooleanConstructor;
     flat: BooleanConstructor;
 }>>;
+type VStepper = InstanceType<typeof VStepper>;
 
 declare const VStepperActions: {
     new (...args: any[]): {
@@ -1092,15 +1136,32 @@ declare const VStepperActions: {
             color?: string | undefined;
             style?: unknown;
             class?: unknown;
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
+            $children?: {} | vue.VNodeChild | {
+                prev?: ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
             };
             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;
+                prev?: false | ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: false | ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
             } | undefined;
             onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
@@ -1140,6 +1201,16 @@ declare const VStepperActions: {
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
+            "v-slot:next"?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
             "onClick:prev"?: (() => any) | undefined;
             "onClick:next"?: (() => any) | undefined;
         };
@@ -1150,7 +1221,18 @@ declare const VStepperActions: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            prev?: ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            next?: ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
         }>;
@@ -1165,14 +1247,41 @@ declare const VStepperActions: {
         } & {
             color?: string | undefined;
         } & {
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
+            $children?: {} | vue.VNodeChild | {
+                prev?: ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
             };
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
+                prev?: false | ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: false | ((arg: {
+                    props: {
+                        onClick: () => void;
+                    };
+                }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
+            "v-slot:next"?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
         } & {
             "onClick:prev"?: (() => any) | undefined;
             "onClick:next"?: (() => any) | undefined;
@@ -1184,7 +1293,18 @@ declare const VStepperActions: {
             prevText: string;
             nextText: string;
         }, {}, string, vue.SlotsType<Partial<{
-            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            prev: (arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            next: (arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
         }>>> & {
@@ -1214,14 +1334,41 @@ declare const VStepperActions: {
     } & {
         color?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
+        $children?: {} | vue.VNodeChild | {
+            prev?: ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
+            next?: ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
         };
         'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
+            prev?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
+            next?: false | ((arg: {
+                props: {
+                    onClick: () => void;
+                };
+            }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:prev"?: false | ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
+        "v-slot:next"?: false | ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
     } & {
         "onClick:prev"?: (() => any) | undefined;
         "onClick:next"?: (() => any) | undefined;
@@ -1236,14 +1383,41 @@ declare const VStepperActions: {
 } & {
     color?: string | undefined;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
+    $children?: {} | vue.VNodeChild | {
+        prev?: ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
+        next?: ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
     };
     'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
+        prev?: false | ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
+        next?: false | ((arg: {
+            props: {
+                onClick: () => void;
+            };
+        }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:prev"?: false | ((arg: {
+        props: {
+            onClick: () => void;
+        };
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:next"?: false | ((arg: {
+        props: {
+            onClick: () => void;
+        };
+    }) => vue.VNodeChild) | undefined;
 } & {
     "onClick:prev"?: (() => any) | undefined;
     "onClick:next"?: (() => any) | undefined;
@@ -1255,7 +1429,18 @@ declare const VStepperActions: {
     prevText: string;
     nextText: string;
 }, {}, string, vue.SlotsType<Partial<{
-    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    prev: (arg: {
+        props: {
+            onClick: () => void;
+        };
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    next: (arg: {
+        props: {
+            onClick: () => void;
+        };
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
@@ -1287,6 +1472,7 @@ declare const VStepperActions: {
         default: string;
     };
 }>>;
+type VStepperActions = InstanceType<typeof VStepperActions>;
 
 declare const VStepperHeader: {
     new (...args: any[]): {