@leaflink/stash 48.0.0 → 48.1.0

package/dist/Stepper.js

@@ -1,9 +1,9 @@
-import { defineComponent as C, ref as I, computed as o, watch as r, watchEffect as g, provide as y, nextTick as E, openBlock as i, createElementBlock as N, createElementVNode as z, normalizeClass as p, renderSlot as T, createBlock as u, unref as d, withCtx as v, createVNode as m, createCommentVNode as f } from "vue";
-import B from "./useMediaQuery.js";
-import A from "./useStepper.js";
+import { defineComponent as C, ref as I, computed as r, watch as o, watchEffect as g, provide as y, nextTick as N, openBlock as i, createElementBlock as E, createElementVNode as z, normalizeClass as p, renderSlot as B, createBlock as u, unref as d, withCtx as v, createVNode as m, createCommentVNode as f } from "vue";
+import R from "./useMediaQuery.js";
+import T from "./useStepper.js";
 import h from "./Button.js";
 import w from "./Icon.js";
-import { S as R } from "./keys-7ecef029.js";
+import { S as A } from "./keys-7ecef029.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
@@ -16,35 +16,38 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
     substep: { default: -1 },
     linear: { type: Boolean, default: !1 },
     orientation: { default: "vertical" },
+    useResponsiveNav: { type: Boolean, default: !1 },
     theme: { default: "dark" }
   },
   emits: ["update:step", "update:substep"],
   setup(x, { expose: _, emit: n }) {
-    const t = x, l = I(), e = A({
+    const t = x, l = I(), e = T({
       linear: t.linear,
       activeStep: t.step,
       activeSubstep: t.substep,
       ref: l
-    }), S = B("screen and (min-width: 961px)"), a = o(() => t.orientation === "horizontal" && !S.value), b = o(() => e.activeStepIndex.value <= 0), k = o(
+    }), S = R("screen and (min-width: 961px)"), a = r(
+      () => t.orientation === "horizontal" && (!S.value || t.useResponsiveNav)
+    ), b = r(() => e.activeStepIndex.value <= 0), k = r(
       () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
     );
-    r(
+    o(
       () => t.step,
       (s) => e.activeStepIndex.value = s
-    ), r(
+    ), o(
       () => t.substep,
       (s) => e.activeSubstepIndex.value = s
-    ), r(
+    ), o(
       () => e.activeStepIndex.value,
       (s) => {
         n("update:step", s), c();
       }
-    ), r(
+    ), o(
       () => e.activeSubstepIndex.value,
       (s) => n("update:substep", s)
     ), g(() => {
       a.value && c();
-    }), y(R, {
+    }), y(A, {
       registerStep: e.registerStep,
       orientation: t.orientation,
       stepCount: e.stepCount,
@@ -60,11 +63,11 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
     async function c() {
       if (!a.value)
         return;
-      await E();
+      await N();
       const s = e.activeStepElement.value;
       s && s.scrollIntoView({ behavior: "instant", inline: "start", block: "nearest" });
     }
-    return (s, L) => (i(), N("div", V, [
+    return (s, L) => (i(), E("div", V, [
       z("ul", {
         ref_key: "stepperListRef",
         ref: l,
@@ -76,7 +79,7 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
         }]),
         "data-test": "stash-stepper"
       }, [
-        T(s.$slots, "default")
+        B(s.$slots, "default")
       ], 2),
       a.value ? (i(), u(h, {
         key: 0,

package/dist/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the step changes\n       */\n      (e: 'update:step', step: number): void;\n      /**\n       * Emitted when the substep changes\n       */\n      (e: 'update:substep', substep: number): void;\n    }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(() => props.orientation === 'horizontal' && !isLargeScreen.value);\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"tw-relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper tw-flex\"\n      :class=\"{\n        'tw-flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n    @apply tw-hidden;\n  }\n\n  .stash-stepper__arrow {\n    @apply tw-absolute\n      tw-top-0\n      tw-flex\n      tw-h-6\n      tw-w-6\n      tw-min-w-auto\n      tw-items-center\n      tw-justify-center\n      tw-rounded-full\n      tw-border\n      tw-border-solid\n      tw-border-ice-500\n      tw-text-center\n      disabled:tw-text-ice-500 disabled:tw-opacity-50;\n  }\n\n  .stash-stepper__arrow--prev {\n    @apply tw-left-0;\n  }\n\n  .stash-stepper__arrow--next {\n    @apply tw-right-0;\n  }\n</style>\n"],"names":["stepperListRef","ref","stepper","useStepper","props","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","emit","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAyDQA,IAAiBC,KACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQC,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKJ;AAAA,IAAA,CACN,GAEKK,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC,EAAS,MAAMJ,EAAM,gBAAgB,gBAAgB,CAACC,EAAc,KAAK,GAC7FI,IAAsBD,EAAS,MAAMN,EAAQ,gBAAgB,SAAS,CAAC,GACvEQ,IAAsBF;AAAA,MAC1B,MACE,CAACN,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAS;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,gBAAgB,QAAQU;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,mBAAmB,QAAQU;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMT,EAAQ,gBAAgB;AAAA,MAC9B,CAACU,MAAU;AACT,QAAAC,EAAK,eAAeD,CAAK,GACZE;MACf;AAAA,IAAA,GAGFH;AAAA,MACE,MAAMT,EAAQ,mBAAmB;AAAA,MACjC,CAACU,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAOzCG,EAAY,MAAM;AAChB,MAAIR,EAAkB,SACPO;IACf,CACD,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcf,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,WAAWF,EAAQ;AAAA,MACnB,OAAOE,EAAM;AAAA,MACb,mBAAAG;AAAA,IAAA,CACD,GAEYW,EAAA;AAAA,MACX,MAAMhB,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeY,IAAe;AACxB,UAAA,CAACP,EAAkB;AACrB;AAIF,YAAMY,EAAS;AAET,YAAAC,IAAOlB,EAAQ,kBAAkB;AAEvC,MAAIkB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { StepperOrientation, StepperTheme } from './Stepper.types';\n  export * from './Stepper.types';\n\n  export interface StepperProps {\n    /**\n     * The current step index\n     */\n    step?: number;\n    /**\n     * The current substep index\n     */\n    substep?: number;\n    /**\n     * A linear stepper prevents navigation to steps that are ahead of the completed ones\n     */\n    linear?: boolean;\n    /**\n     * Determines whether the stepper is horizontal or vertical\n     */\n    orientation?: StepperOrientation;\n    /**\n     * Force responsive view on horizontal orientation\n     */\n    useResponsiveNav?: boolean;\n    /**\n     * Determines the theme of the stepper\n     */\n    theme?: StepperTheme;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, nextTick, provide, ref, watch, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import useStepper from '../../composables/useStepper/useStepper';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from './keys';\n\n  const props = withDefaults(defineProps<StepperProps>(), {\n    step: -1,\n    substep: -1,\n    linear: false,\n    orientation: 'vertical',\n    theme: 'dark',\n    useResponsiveNav: false,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the step changes\n       */\n      (e: 'update:step', step: number): void;\n      /**\n       * Emitted when the substep changes\n       */\n      (e: 'update:substep', substep: number): void;\n    }>();\n\n  const stepperListRef = ref();\n  const stepper = useStepper({\n    linear: props.linear,\n    activeStep: props.step,\n    activeSubstep: props.substep,\n    ref: stepperListRef,\n  });\n\n  const isLargeScreen = useMediaQuery('screen and (min-width: 961px)');\n  const showResponsiveNav = computed(\n    () => props.orientation === 'horizontal' && (!isLargeScreen.value || props.useResponsiveNav),\n  );\n  const isPrevArrowDisabled = computed(() => stepper.activeStepIndex.value <= 0);\n  const isNextArrowDisabled = computed(\n    () =>\n      !stepper.isStepCompleted(stepper.activeStepIndex.value) ||\n      stepper.activeStepIndex.value === stepper.steps.value.length - 1,\n  );\n\n  watch(\n    () => props.step,\n    (value) => (stepper.activeStepIndex.value = value),\n  );\n\n  watch(\n    () => props.substep,\n    (value) => (stepper.activeSubstepIndex.value = value),\n  );\n\n  watch(\n    () => stepper.activeStepIndex.value,\n    (value) => {\n      emit('update:step', value);\n      scrollToStep();\n    },\n  );\n\n  watch(\n    () => stepper.activeSubstepIndex.value,\n    (value) => emit('update:substep', value),\n  );\n\n  /**\n   * Watches for media query changes to determine if the mobile horizontal stepper is active.\n   * This is done to ensure the mobile stepper remains in sync with any step changes at the desktop view.\n   */\n  watchEffect(() => {\n    if (showResponsiveNav.value) {\n      scrollToStep();\n    }\n  });\n\n  provide(STEPPER_INJECTION_KEY, {\n    registerStep: stepper.registerStep,\n    orientation: props.orientation,\n    stepCount: stepper.stepCount,\n    theme: props.theme,\n    showResponsiveNav,\n  });\n\n  defineExpose({\n    back: stepper.back,\n    next: stepper.next,\n    goTo: stepper.goTo,\n    isStepCompleted: stepper.isStepCompleted,\n    isStepActive: stepper.isStepActive,\n  });\n\n  /**\n   * Scrolls to the active step when the horizontal stepper is active.\n   * This limited to top-level steps only.\n   */\n  async function scrollToStep() {\n    if (!showResponsiveNav.value) {\n      return;\n    }\n\n    // allows the DOM to update before scrolling to the active step.\n    await nextTick();\n\n    const step = stepper.activeStepElement.value;\n\n    if (step) {\n      step.scrollIntoView({ behavior: 'instant', inline: 'start', block: 'nearest' });\n    }\n  }\n</script>\n\n<template>\n  <div class=\"tw-relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper tw-flex\"\n      :class=\"{\n        'tw-flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden': showResponsiveNav,\n      }\"\n      data-test=\"stash-stepper\"\n    >\n      <!-- @slot Default slot to compose multiple steps -->\n      <slot></slot>\n    </ul>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--prev\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|prev-arrow\"\n      :disabled=\"isPrevArrowDisabled\"\n      icon\n      @click=\"stepper.back\"\n    >\n      <Icon name=\"chevron-left\" size=\"dense\" />\n    </Button>\n    <Button\n      v-if=\"showResponsiveNav\"\n      class=\"stash-stepper__arrow stash-stepper__arrow--next\"\n      :class=\"props.theme === 'light' ? 'tw-text-blue-500' : 'tw-text-white'\"\n      data-test=\"stash-stepper|next-arrow\"\n      :disabled=\"isNextArrowDisabled\"\n      icon\n      @click=\"stepper.next\"\n    >\n      <Icon name=\"chevron-right\" size=\"dense\" />\n    </Button>\n  </div>\n</template>\n\n<style>\n  .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n    @apply tw-hidden;\n  }\n\n  .stash-stepper__arrow {\n    @apply tw-absolute\n      tw-top-0\n      tw-flex\n      tw-h-6\n      tw-w-6\n      tw-min-w-auto\n      tw-items-center\n      tw-justify-center\n      tw-rounded-full\n      tw-border\n      tw-border-solid\n      tw-border-ice-500\n      tw-text-center\n      disabled:tw-text-ice-500 disabled:tw-opacity-50;\n  }\n\n  .stash-stepper__arrow--prev {\n    @apply tw-left-0;\n  }\n\n  .stash-stepper__arrow--next {\n    @apply tw-right-0;\n  }\n</style>\n"],"names":["stepperListRef","ref","stepper","useStepper","props","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","emit","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBA8DQA,IAAiBC,KACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQC,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKJ;AAAA,IAAA,CACN,GAEKK,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMJ,EAAM,gBAAgB,iBAAiB,CAACC,EAAc,SAASD,EAAM;AAAA,IAAA,GAEvEK,IAAsBD,EAAS,MAAMN,EAAQ,gBAAgB,SAAS,CAAC,GACvEQ,IAAsBF;AAAA,MAC1B,MACE,CAACN,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAS;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,gBAAgB,QAAQU;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAWV,EAAQ,mBAAmB,QAAQU;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMT,EAAQ,gBAAgB;AAAA,MAC9B,CAACU,MAAU;AACT,QAAAC,EAAK,eAAeD,CAAK,GACZE;MACf;AAAA,IAAA,GAGFH;AAAA,MACE,MAAMT,EAAQ,mBAAmB;AAAA,MACjC,CAACU,MAAUC,EAAK,kBAAkBD,CAAK;AAAA,IAAA,GAOzCG,EAAY,MAAM;AAChB,MAAIR,EAAkB,SACPO;IACf,CACD,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcf,EAAQ;AAAA,MACtB,aAAaE,EAAM;AAAA,MACnB,WAAWF,EAAQ;AAAA,MACnB,OAAOE,EAAM;AAAA,MACb,mBAAAG;AAAA,IAAA,CACD,GAEYW,EAAA;AAAA,MACX,MAAMhB,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeY,IAAe;AACxB,UAAA,CAACP,EAAkB;AACrB;AAIF,YAAMY,EAAS;AAET,YAAAC,IAAOlB,EAAQ,kBAAkB;AAEvC,MAAIkB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Stepper.vue.d.ts

@@ -40,6 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     linear: boolean;
     orientation: string;
     theme: string;
+    useResponsiveNav: boolean;
 }>, {
     back: () => void;
     next: () => void;
@@ -55,6 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     linear: boolean;
     orientation: string;
     theme: string;
+    useResponsiveNav: boolean;
 }>>> & {
     "onUpdate:step"?: ((step: number) => any) | undefined;
     "onUpdate:substep"?: ((substep: number) => any) | undefined;
@@ -64,6 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     substep: number;
     linear: boolean;
     orientation: StepperOrientation;
+    useResponsiveNav: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;
@@ -88,6 +91,10 @@ export declare interface StepperProps {
      * Determines whether the stepper is horizontal or vertical
      */
     orientation?: StepperOrientation;
+    /**
+     * Force responsive view on horizontal orientation
+     */
+    useResponsiveNav?: boolean;
     /**
      * Determines the theme of the stepper
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "48.0.0",
+  "version": "48.1.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",