@leaflink/stash 52.0.3 → 53.0.0

package/dist/Step.js

@@ -1,9 +1,9 @@
-import { defineComponent as x, useSlots as g, useCssModule as y, inject as k, computed as d, onBeforeMount as b, createElementBlock as r, openBlock as i, normalizeClass as a, unref as t, createCommentVNode as u, createElementVNode as n, createBlock as B, toDisplayString as _, createTextVNode as N, renderSlot as C } from "vue";
+import { defineComponent as k, useSlots as g, useCssModule as y, inject as w, computed as d, onBeforeMount as b, createElementBlock as r, openBlock as i, normalizeClass as a, unref as t, createCommentVNode as u, createElementVNode as n, createBlock as B, toDisplayString as _, createTextVNode as N, renderSlot as C } from "vue";
 import { t as E } from "./locale.js";
 import T from "./Icon.js";
 import { S as z } from "./keys-C8Zfr_By.js";
 import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const S = { key: 1 }, I = /* @__PURE__ */ x({
+const S = { key: 1 }, I = /* @__PURE__ */ k({
   __name: "Step",
   props: {
     active: { type: Boolean, default: !1 },
@@ -15,27 +15,27 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
     disabled: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 }
   },
-  setup(m) {
-    const e = m, w = g(), s = y(), l = k(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, v = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), h = d(
+  setup(v) {
+    const e = v, f = g(), s = y(), l = w(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, h = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), x = d(
       () => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
     );
     return b(() => {
       l && l.registerStep(e.nested);
-    }), (f, K) => (i(), r("li", {
-      class: a(["stash-step tw-relative tw-flex tw-w-full", [
+    }), (m, K) => (i(), r("li", {
+      class: a(["stash-step relative flex w-full", [
         t(s).step,
         {
           [t(s)["nested-step--active"]]: e.nested && e.active,
-          "last:tw-w-auto": c.value && !t(o),
+          "last:w-auto": c.value && !t(o),
           [t(s)["stash-step--singular"]]: t(o),
-          "tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center": t(o)
+          "relative w-full shrink-0 snap-start flex-col justify-center": t(o)
         }
       ]]),
       "data-test": "stash-step"
     }, [
       e.nested ? u("", !0) : (i(), r("div", {
         key: 0,
-        class: a(["stash-step__indicator tw-flex tw-flex-col tw-items-center", { "tw-mr-3": !t(o) }]),
+        class: a(["stash-step__indicator flex flex-col items-center", { "mr-3": !t(o) }]),
         "data-test": "stash-step|indicator"
       }, [
         n("div", {
@@ -52,24 +52,21 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
         }, [
           (e.completed || e.error || e.loading) && !e.active ? (i(), B(T, {
             key: 0,
-            name: v.value,
+            name: h.value,
             class: a({ "fx-spin": e.loading }),
             size: "dense"
           }, null, 8, ["name", "class"])) : (i(), r("span", S, _(e.step), 1))
         ], 2),
         n("div", {
-          class: a(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
-            t(s).line,
-            { [t(s)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
-          ]])
+          class: a(["my-1.5 w-px bg-ice-500", [t(s).line, { [t(s)["line--expanded"]]: e.completed || e.active, hidden: c.value }]])
         }, null, 2)
       ], 2)),
       n("div", {
-        class: a(["tw-flex", [
+        class: a(["flex", [
           {
-            "tw-w-full tw-flex-row tw-items-center": c.value,
-            "tw-mt-1.5 tw-justify-center": t(o),
-            "tw-flex-col": !c.value || t(o)
+            "w-full flex-row items-center": c.value,
+            "mt-1.5 justify-center": t(o),
+            "flex-col": !c.value || t(o)
           }
         ]])
       }, [
@@ -77,13 +74,13 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
           class: a(["stash-step__title", [
             t(s).title,
             {
-              "tw-whitespace-nowrap": c.value,
-              "tw-cursor-pointer": !e.active && (e.completed || e.error),
-              "tw-cursor-not-allowed": e.disabled,
-              "tw-text-ice-900": p.value,
-              "!tw-font-semibold": e.active,
-              "tw-text-white": !e.disabled && !p.value,
-              "tw-place-self-center": t(o)
+              "whitespace-nowrap": c.value,
+              "cursor-pointer": !e.active && (e.completed || e.error),
+              "cursor-not-allowed": e.disabled,
+              "text-ice-900": p.value,
+              "!font-semibold": e.active,
+              "text-white": !e.disabled && !p.value,
+              "place-self-center": t(o)
             }
           ]]),
           "data-test": "stash-step|title"
@@ -91,9 +88,9 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
           N(_(e.text) + " ", 1),
           t(o) ? (i(), r("p", {
             key: 0,
-            class: a(["stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs", p.value ? "tw-text-ice-700" : "tw-text-white"]),
+            class: a(["stash-step__pagination-label mb-0 text-center text-xs", p.value ? "text-ice-700" : "text-white"]),
             "data-test": "stash-step|pagination-label"
-          }, _(h.value), 3)) : u("", !0)
+          }, _(x.value), 3)) : u("", !0)
         ], 2),
         c.value ? (i(), r("div", {
           key: 0,
@@ -101,35 +98,35 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
             t(s).line,
             {
               [t(s)["line--expanded"]]: e.completed || e.active,
-              "tw-mx-1.5 tw-border-t group-last:tw-hidden": !t(o)
+              "mx-1.5 border-t group-last:hidden": !t(o)
             }
           ])
         }, null, 2)) : u("", !0),
         n("div", {
-          class: a(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(w).default, "tw-hidden": c.value }])
+          class: a(["stash-step--nested-steps", { "pb-9": !m.nested && !t(f).default, hidden: c.value }])
         }, [
           n("ul", {
-            class: a([t(s).nested, { "tw-hidden": !t(w).default }])
+            class: a([t(s).nested, { hidden: !t(f).default }])
           }, [
-            C(f.$slots, "default")
+            C(m.$slots, "default")
           ], 2)
         ], 2)
       ], 2)
     ], 2));
   }
-}), R = "_step_73127_2", V = "_title_73127_11", P = "_line_73127_22", $ = "_circle_73127_62", D = "_nested_73127_18", H = {
+}), R = "_step_1tkd1_5", V = "_title_1tkd1_14", P = "_line_1tkd1_25", $ = "_circle_1tkd1_65", D = "_nested_1tkd1_21", H = {
   step: R,
   title: V,
-  "nested-step--active": "_nested-step--active_73127_18",
+  "nested-step--active": "_nested-step--active_1tkd1_21",
   line: P,
-  "line--expanded": "_line--expanded_73127_27",
-  "stash-step--singular": "_stash-step--singular_73127_31",
+  "line--expanded": "_line--expanded_1tkd1_30",
+  "stash-step--singular": "_stash-step--singular_1tkd1_34",
   circle: $,
-  "circle--todo": "_circle--todo_73127_75",
-  "circle--active": "_circle--active_73127_81",
-  "circle--loading": "_circle--loading_73127_87",
-  "circle--completed": "_circle--completed_73127_94",
-  "circle--error": "_circle--error_73127_101",
+  "circle--todo": "_circle--todo_1tkd1_78",
+  "circle--active": "_circle--active_1tkd1_84",
+  "circle--loading": "_circle--loading_1tkd1_90",
+  "circle--completed": "_circle--completed_1tkd1_97",
+  "circle--error": "_circle--error_1tkd1_104",
   nested: D
 }, J = {
   $style: H

package/dist/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step tw-relative tw-flex tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n      :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n          'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n          'tw-flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'tw-whitespace-nowrap': isHorizontal,\n            'tw-cursor-pointer': !props.active && (props.completed || props.error),\n            'tw-cursor-not-allowed': props.disabled,\n            'tw-text-ice-900': isLightThemed,\n            '!tw-font-semibold': props.active,\n            'tw-text-white': !props.disabled && !isLightThemed,\n            'tw-place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'tw-text-ice-700' : 'tw-text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'tw-mx-1.5 tw-border-t group-last:tw-hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div\n        class=\"stash-step--nested-steps\"\n        :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n      >\n        <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .step::before {\n    content: '●';\n    position: absolute;\n    color: theme('colors.white');\n    left: -28px;\n    opacity: 0;\n    transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n  }\n\n  .title {\n    font-weight: theme('fontWeight.medium');\n    font-size: 1rem;\n    margin-top: 1px;\n    user-select: none;\n  }\n\n  .nested-step--active::before {\n    opacity: 1;\n  }\n\n  .line {\n    flex-grow: 0;\n    transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n  }\n\n  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .stash-step--singular .line {\n    @apply tw-absolute\n      tw-inset-x-0\n      tw-top-3\n      tw-h-px\n      tw-border-t-0\n      before:tw-absolute\n      before:tw-left-0\n      before:tw-right-2/4\n      before:tw-mr-16\n      before:tw-block\n      before:tw-h-px\n      before:tw-bg-ice-500\n      after:tw-absolute\n      after:tw-left-2/4\n      after:tw-right-0\n      after:tw-ml-16\n      after:tw-block\n      after:tw-h-px\n      after:tw-bg-ice-500;\n  }\n\n  .stash-step--singular .line::after,\n  .stash-step--singular .line::before {\n    content: '';\n  }\n\n  .step:not(.stash-step--singular):last-child .line {\n    display: none;\n  }\n\n  .circle {\n    width: theme('spacing.6');\n    height: theme('spacing.6');\n    line-height: theme('spacing.6');\n    border-radius: theme('borderRadius.full');\n    display: grid;\n    place-items: center;\n    font-weight: theme('fontWeight.medium');\n    transition:\n      background-color 500ms,\n      color 500ms;\n  }\n\n  .circle--todo {\n    background-color: rgb(255 255 255 / 50%);\n    color: #4d4a69;\n    border: 1px solid #747293;\n  }\n\n  .circle--active {\n    background-color: var(--color-blue-500);\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--loading {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-ice-700);\n    cursor: pointer;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-green-500);\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-red-500);\n    cursor: pointer;\n  }\n\n  .nested {\n    padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n  }\n\n  .nested li + li {\n    margin-top: theme('spacing.3');\n  }\n\n  .nested .title {\n    font-weight: theme('fontWeight.normal');\n    font-size: 0.9rem;\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBV,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKc,IAAkBJ;AAAA,MAAS,MAC/BK,EAAE,0BAA0B,EAAE,KAAKf,EAAM,MAAM,OAAO,OAAOM,KAAA,gBAAAA,EAAiB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIlG,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACFA,EAAgB,aAAaN,EAAM,MAAM;AAAA,IAE7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step relative flex w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'relative w-full shrink-0 snap-start flex-col justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator flex flex-col items-center\"\n      :class=\"{ 'mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"my-1.5 w-px bg-ice-500\"\n        :class=\"[classes.line, { [classes['line--expanded']]: props.completed || props.active, hidden: isHorizontal }]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"flex\"\n      :class=\"[\n        {\n          'w-full flex-row items-center': isHorizontal,\n          'mt-1.5 justify-center': showResponsiveNav,\n          'flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'whitespace-nowrap': isHorizontal,\n            'cursor-pointer': !props.active && (props.completed || props.error),\n            'cursor-not-allowed': props.disabled,\n            'text-ice-900': isLightThemed,\n            '!font-semibold': props.active,\n            'text-white': !props.disabled && !isLightThemed,\n            'place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label mb-0 text-center text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'text-ice-700' : 'text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'mx-1.5 border-t group-last:hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div class=\"stash-step--nested-steps\" :class=\"{ 'pb-9': !nested && !slots.default, hidden: isHorizontal }\">\n        <ul :class=\"[classes.nested, { hidden: !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .step::before {\n      content: '●';\n      position: absolute;\n      color: var(--color-white);\n      left: -28px;\n      opacity: 0;\n      transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n    }\n\n    .title {\n      font-weight: var(--font-weight-medium);\n      font-size: 1rem;\n      margin-top: 1px;\n      user-select: none;\n    }\n\n    .nested-step--active::before {\n      opacity: 1;\n    }\n\n    .line {\n      flex-grow: 0;\n      transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n    }\n\n    .line--expanded {\n      flex-grow: 1;\n    }\n\n    .stash-step--singular .line {\n      @apply absolute\n        inset-x-0\n        top-3\n        h-px\n        border-t-0\n        before:absolute\n        before:left-0\n        before:right-2/4\n        before:mr-16\n        before:block\n        before:h-px\n        before:bg-ice-500\n        after:absolute\n        after:left-2/4\n        after:right-0\n        after:ml-16\n        after:block\n        after:h-px\n        after:bg-ice-500;\n    }\n\n    .stash-step--singular .line::after,\n    .stash-step--singular .line::before {\n      content: '';\n    }\n\n    .step:not(.stash-step--singular):last-child .line {\n      display: none;\n    }\n\n    .circle {\n      width: --spacing(6);\n      height: --spacing(6);\n      line-height: --spacing(6);\n      border-radius: calc(infinity * 1px);\n      display: grid;\n      place-items: center;\n      font-weight: var(--font-weight-medium);\n      transition:\n        background-color 500ms,\n        color 500ms;\n    }\n\n    .circle--todo {\n      background-color: rgb(255 255 255 / 50%);\n      color: #4d4a69;\n      border: 1px solid #747293;\n    }\n\n    .circle--active {\n      background-color: var(--color-blue-500);\n      color: var(--color-white);\n      border: 1px solid transparent;\n    }\n\n    .circle--loading {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-ice-700);\n      cursor: pointer;\n    }\n\n    .circle--completed {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-green-500);\n      cursor: pointer;\n    }\n\n    .circle--error {\n      background-color: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      color: var(--color-red-500);\n      cursor: pointer;\n    }\n\n    .nested {\n      padding: calc(--spacing(3) + --spacing(1.5)) 0;\n    }\n\n    .nested li + li {\n      margin-top: --spacing(3);\n    }\n\n    .nested .title {\n      font-weight: var(--font-weight-normal);\n      font-size: 0.9rem;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBV,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKc,IAAkBJ;AAAA,MAAS,MAC/BK,EAAE,0BAA0B,EAAE,KAAKf,EAAM,MAAM,OAAO,OAAOM,KAAA,gBAAAA,EAAiB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIlG,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACFA,EAAgB,aAAaN,EAAM,MAAM;AAAA,IAE7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Stepper.js

@@ -1,11 +1,11 @@
 import { defineComponent as I, ref as N, computed as i, watch as o, watchEffect as g, provide as y, nextTick as E, createElementBlock as R, openBlock as n, createElementVNode as T, createBlock as d, createCommentVNode as v, normalizeClass as p, renderSlot as z, unref as f, withCtx as m, createVNode as h } from "vue";
 import A from "./useMediaQuery.js";
 import B from "./useStepper.js";
-import w from "./Button.js";
-import x from "./Icon.js";
+import x from "./Button.js";
+import S from "./Icon.js";
 import { S as L } from "./keys-C8Zfr_By.js";
 var V = /* @__PURE__ */ ((r) => (r.VERTICAL = "vertical", r.HORIZONTAL = "horizontal", r))(V || {});
-const P = { class: "tw-relative" }, Y = /* @__PURE__ */ I({
+const P = { class: "relative" }, Y = /* @__PURE__ */ I({
   __name: "Stepper",
   props: {
     step: { default: -1 },
@@ -16,14 +16,14 @@ const P = { class: "tw-relative" }, Y = /* @__PURE__ */ I({
     theme: { default: "dark" }
   },
   emits: ["update:step", "update:substep"],
-  setup(r, { expose: S, emit: b }) {
-    const t = r, l = b, c = N(), e = B({
+  setup(r, { expose: b, emit: _ }) {
+    const t = r, l = _, c = N(), e = B({
       linear: t.linear,
       activeStep: t.step,
       activeSubstep: t.substep,
       ref: c
-    }), _ = A("screen and (min-width: 961px)"), a = i(
-      () => t.orientation === "horizontal" && (!_.value || t.useResponsiveNav)
+    }), w = A("screen and (min-width: 961px)"), a = i(
+      () => t.orientation === "horizontal" && (!w.value || t.useResponsiveNav)
     ), k = i(() => e.activeStepIndex.value <= 0), C = i(
       () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
     );
@@ -49,7 +49,7 @@ const P = { class: "tw-relative" }, Y = /* @__PURE__ */ I({
       stepCount: e.stepCount,
       theme: t.theme,
       showResponsiveNav: a
-    }), S({
+    }), b({
       back: e.back,
       next: e.next,
       goTo: e.goTo,
@@ -67,42 +67,42 @@ const P = { class: "tw-relative" }, Y = /* @__PURE__ */ I({
       T("ul", {
         ref_key: "stepperListRef",
         ref: c,
-        class: p(["stash-stepper tw-flex", {
-          "tw-flex-col": t.orientation === "vertical",
+        class: p(["stash-stepper flex", {
+          "flex-col": t.orientation === "vertical",
           "stash-stepper--vertical": t.orientation === "vertical",
           "stash-stepper--horizontal": t.orientation === "horizontal",
-          "tw-mx-9 tw-snap-x tw-snap-mandatory tw-overflow-x-hidden": a.value
+          "mx-9 snap-x snap-mandatory overflow-x-hidden": a.value
         }]),
         "data-test": "stash-stepper"
       }, [
         z(s.$slots, "default")
       ], 2),
-      a.value ? (n(), d(w, {
+      a.value ? (n(), d(x, {
         key: 0,
-        class: p(["stash-stepper__arrow stash-stepper__arrow--prev", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
+        class: p(["stash-stepper__arrow stash-stepper__arrow--prev", t.theme === "light" ? "text-blue-500" : "text-white"]),
         "data-test": "stash-stepper|prev-arrow",
         disabled: k.value,
         icon: "",
         onClick: f(e).back
       }, {
         default: m(() => [
-          h(x, {
+          h(S, {
             name: "chevron-left",
             size: "dense"
           })
         ]),
         _: 1
       }, 8, ["class", "disabled", "onClick"])) : v("", !0),
-      a.value ? (n(), d(w, {
+      a.value ? (n(), d(x, {
         key: 1,
-        class: p(["stash-stepper__arrow stash-stepper__arrow--next", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
+        class: p(["stash-stepper__arrow stash-stepper__arrow--next", t.theme === "light" ? "text-blue-500" : "text-white"]),
         "data-test": "stash-stepper|next-arrow",
         disabled: C.value,
         icon: "",
         onClick: f(e).next
       }, {
         default: m(() => [
-          h(x, {
+          h(S, {
             name: "chevron-right",
             size: "dense"
           })

package/dist/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.types.ts","../src/components/Stepper/Stepper.vue"],"sourcesContent":["import type { Ref } from 'vue';\n\nimport Stepper from './Stepper.vue';\n\n/**\n * Helper type for the template ref (the \"ref\" attribute) on a Stepper instance\n * @see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs\n */\nexport type StepperRef = Ref<InstanceType<typeof Stepper> | null>;\n\nexport enum StepperOrientationEnum {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\nexport type StepperOrientation = `${StepperOrientationEnum}`;\n\nexport type StepperTheme = 'dark' | 'light';\n","<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 = 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":["StepperOrientationEnum","props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;AAUO,IAAKA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFHA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;AC+BV,UAAMC,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,EAAA,GACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQP,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKI;AAAA,IAAA,CACN,GAEKI,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMX,EAAM,gBAAgB,iBAAiB,CAACQ,EAAc,SAASR,EAAM;AAAA,IAAA,GAEvEY,IAAsBD,EAAS,MAAML,EAAQ,gBAAgB,SAAS,CAAC,GACvEO,IAAsBF;AAAA,MAC1B,MACE,CAACL,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACzBC,EAAA;AAAA,MACF;AAAA,IAAA,GAGFF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IAAA,GAOzCE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACpBM,EAAA;AAAA,IAEJ,CAAC,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcb,EAAQ;AAAA,MACtB,aAAaN,EAAM;AAAA,MACnB,WAAWM,EAAQ;AAAA,MACnB,OAAON,EAAM;AAAA,MACb,mBAAAU;AAAA,IAAA,CACD,GAEDU,EAAa;AAAA,MACX,MAAMd,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeU,IAAe;AAC5B,UAAI,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAA;AAEN,YAAMC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACFA,EAAK,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/components/Stepper/Stepper.types.ts","../src/components/Stepper/Stepper.vue"],"sourcesContent":["import type { Ref } from 'vue';\n\nimport Stepper from './Stepper.vue';\n\n/**\n * Helper type for the template ref (the \"ref\" attribute) on a Stepper instance\n * @see: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs\n */\nexport type StepperRef = Ref<InstanceType<typeof Stepper> | null>;\n\nexport enum StepperOrientationEnum {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\nexport type StepperOrientation = `${StepperOrientationEnum}`;\n\nexport type StepperTheme = 'dark' | 'light';\n","<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 = 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=\"relative\">\n    <ul\n      ref=\"stepperListRef\"\n      class=\"stash-stepper flex\"\n      :class=\"{\n        'flex-col': props.orientation === 'vertical',\n        'stash-stepper--vertical': props.orientation === 'vertical',\n        'stash-stepper--horizontal': props.orientation === 'horizontal',\n        'mx-9 snap-x snap-mandatory 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' ? 'text-blue-500' : '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' ? 'text-blue-500' : '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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-stepper--vertical .stash-step:last-child .stash-step--nested-steps {\n      @apply hidden;\n    }\n\n    .stash-stepper__arrow {\n      @apply absolute\n        top-0\n        flex\n        h-6\n        w-6\n        min-w-auto\n        items-center\n        justify-center\n        rounded-full\n        border\n        border-solid\n        border-ice-500\n        text-center\n        disabled:text-ice-500 disabled:opacity-50;\n    }\n\n    .stash-stepper__arrow--prev {\n      @apply left-0;\n    }\n\n    .stash-stepper__arrow--next {\n      @apply right-0;\n    }\n  }\n</style>\n"],"names":["StepperOrientationEnum","props","__props","emit","__emit","stepperListRef","ref","stepper","useStepper","isLargeScreen","useMediaQuery","showResponsiveNav","computed","isPrevArrowDisabled","isNextArrowDisabled","watch","value","scrollToStep","watchEffect","provide","STEPPER_INJECTION_KEY","__expose","nextTick","step"],"mappings":";;;;;;AAUO,IAAKA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFHA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;AC+BV,UAAMC,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,EAAA,GACjBC,IAAUC,EAAW;AAAA,MACzB,QAAQP,EAAM;AAAA,MACd,YAAYA,EAAM;AAAA,MAClB,eAAeA,EAAM;AAAA,MACrB,KAAKI;AAAA,IAAA,CACN,GAEKI,IAAgBC,EAAc,+BAA+B,GAC7DC,IAAoBC;AAAA,MACxB,MAAMX,EAAM,gBAAgB,iBAAiB,CAACQ,EAAc,SAASR,EAAM;AAAA,IAAA,GAEvEY,IAAsBD,EAAS,MAAML,EAAQ,gBAAgB,SAAS,CAAC,GACvEO,IAAsBF;AAAA,MAC1B,MACE,CAACL,EAAQ,gBAAgBA,EAAQ,gBAAgB,KAAK,KACtDA,EAAQ,gBAAgB,UAAUA,EAAQ,MAAM,MAAM,SAAS;AAAA,IAAA;AAGnE,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAAA,GAG9CD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IAAA,GAGjDD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACzBC,EAAA;AAAA,MACF;AAAA,IAAA,GAGFF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IAAA,GAOzCE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACpBM,EAAA;AAAA,IAEJ,CAAC,GAEDE,EAAQC,GAAuB;AAAA,MAC7B,cAAcb,EAAQ;AAAA,MACtB,aAAaN,EAAM;AAAA,MACnB,WAAWM,EAAQ;AAAA,MACnB,OAAON,EAAM;AAAA,MACb,mBAAAU;AAAA,IAAA,CACD,GAEDU,EAAa;AAAA,MACX,MAAMd,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,MAAMA,EAAQ;AAAA,MACd,iBAAiBA,EAAQ;AAAA,MACzB,cAAcA,EAAQ;AAAA,IAAA,CACvB;AAMD,mBAAeU,IAAe;AAC5B,UAAI,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAA;AAEN,YAAMC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACFA,EAAK,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Switch.js

@@ -1,8 +1,8 @@
-import { defineComponent as v, useAttrs as g, useSlots as y, useCssModule as C, computed as o, createElementBlock as i, openBlock as d, unref as a, normalizeClass as s, createElementVNode as c, createCommentVNode as u, mergeProps as S, withDirectives as A, vModelCheckbox as V, toDisplayString as _, renderSlot as B, createTextVNode as M } from "vue";
+import { defineComponent as v, useAttrs as g, useSlots as y, useCssModule as C, computed as o, createElementBlock as i, openBlock as d, unref as a, normalizeClass as s, createElementVNode as l, createCommentVNode as _, mergeProps as S, withDirectives as A, vModelCheckbox as V, toDisplayString as b, renderSlot as B, createTextVNode as M } from "vue";
 import T from "@leaflink/snitch";
-import E from "lodash-es/uniqueId";
-import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const z = ["data-test"], D = ["for"], I = ["id", "disabled", "name", "value"], $ = /* @__PURE__ */ v({
+import q from "lodash-es/uniqueId";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const N = ["data-test"], z = ["for"], D = ["id", "disabled", "name", "value"], I = /* @__PURE__ */ v({
   name: "ll-switch",
   inheritAttrs: !1,
   __name: "Switch",
@@ -16,96 +16,96 @@ const z = ["data-test"], D = ["for"], I = ["id", "disabled", "name", "value"], $
     value: { default: "" }
   },
   emits: ["update:checked"],
-  setup(b, { emit: p }) {
-    const t = b, l = g(), f = y(), n = C(), m = p;
-    if (typeof t.value == "boolean" && T.warn("Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), l.onChange)
+  setup(p, { emit: w }) {
+    const e = p, c = g(), f = y(), n = C(), m = w;
+    if (typeof e.value == "boolean" && T.warn("Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true"), c.onChange)
       throw new Error("ll-switch: use the @update:checked event instead of @change.");
     const k = o(() => {
-      const e = { ...l };
-      return delete e["data-test"], delete e.class, e;
+      const t = { ...c };
+      return delete t["data-test"], delete t.class, t;
     }), h = o({
       get() {
-        return t.checked;
+        return e.checked;
       },
-      set(e) {
-        m("update:checked", e);
+      set(t) {
+        m("update:checked", t);
       }
-    }), r = o(() => t.id || E("switch-"));
-    return (e, w) => (d(), i("div", {
-      class: s(["stash-switch", a(l).class]),
-      "data-test": a(l)["data-test"] || "stash-switch"
+    }), r = o(() => e.id || q("switch-"));
+    return (t, u) => (d(), i("div", {
+      class: s(["stash-switch", a(c).class]),
+      "data-test": a(c)["data-test"] || "stash-switch"
     }, [
-      c("label", S({
+      l("label", S({
         for: r.value,
-        class: [{ "tw-pointer-events-none": t.disabled }, "tw-flex tw-cursor-pointer"],
+        class: [{ "pointer-events-none": e.disabled }, "flex cursor-pointer"],
         "data-test": "stash-switch|label"
       }, k.value), [
-        c("span", {
-          class: s(["tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]", { [a(n).active]: t.checked }])
+        l("span", {
+          class: s(["relative inline-block h-5 w-[34px] min-w-[34px]", { [a(n).active]: e.checked }])
         }, [
-          c("span", {
-            class: s(["stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]", {
-              "tw-bg-blue-500": t.checked && !t.disabled,
-              "tw-bg-ice-700": !t.checked && !t.disabled,
-              "stash-switch__track--disabled tw-bg-ice-500": t.disabled,
-              "stash-switch__track--on": t.checked,
-              "stash-switch__track--off": !t.checked
+          l("span", {
+            class: s(["stash-switch__track absolute top-0.5 h-4 w-full rounded-[10px]", {
+              "bg-blue-500": e.checked && !e.disabled,
+              "bg-ice-700": !e.checked && !e.disabled,
+              "stash-switch__track--disabled bg-ice-500": e.disabled,
+              "stash-switch__track--on": e.checked,
+              "stash-switch__track--off": !e.checked
             }]),
             "data-test": "stash-switch|track"
           }, null, 2),
-          c("span", {
-            class: s(["stash-switch__control tw-absolute tw-left-0 tw-size-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow", [
+          l("span", {
+            class: s(["stash-switch__control absolute left-0 size-5 rounded-[10px] border border-solid border-ice-500 bg-white shadow", [
               a(n).control,
               {
-                "stash-switch__control--on": t.checked,
-                "stash-switch__control--off": !t.checked,
-                "stash-switch__control--disabled": t.disabled
+                "stash-switch__control--on": e.checked,
+                "stash-switch__control--off": !e.checked,
+                "stash-switch__control--disabled": e.disabled
               }
             ]]),
             "data-test": "stash-switch|control"
           }, null, 2)
         ], 2),
-        A(c("input", {
+        A(l("input", {
           id: r.value,
-          "onUpdate:modelValue": w[0] || (w[0] = (x) => h.value = x),
+          "onUpdate:modelValue": u[0] || (u[0] = (x) => h.value = x),
           type: "checkbox",
-          disabled: t.disabled,
-          name: t.name,
+          disabled: e.disabled,
+          name: e.name,
           tabindex: "0",
-          value: e.value,
-          class: "tw-sr-only"
-        }, null, 8, I), [
+          value: t.value,
+          class: "sr-only"
+        }, null, 8, D), [
           [V, h.value]
         ]),
-        t.label ? (d(), i("span", {
+        e.label ? (d(), i("span", {
           key: 0,
           class: s([{
-            "tw-text-ice-900": t.checked && !t.disabled,
-            "tw-text-ice-700": !t.checked && !t.disabled,
-            "stash-switch__label-text--on": t.checked,
-            "stash-switch__label-text--off": !t.checked,
-            "stash-switch__label-text--disabled tw-text-ice-500": t.disabled
-          }, "stash-switch__label-text tw-relative tw-top-px tw-ml-1.5"]),
+            "text-ice-900": e.checked && !e.disabled,
+            "text-ice-700": !e.checked && !e.disabled,
+            "stash-switch__label-text--on": e.checked,
+            "stash-switch__label-text--off": !e.checked,
+            "stash-switch__label-text--disabled text-ice-500": e.disabled
+          }, "stash-switch__label-text relative top-px ml-1.5"]),
           "data-test": "stash-switch|label-text"
-        }, _(t.label), 3)) : u("", !0)
-      ], 16, D),
-      t.hintText || a(f).hint ? (d(), i("span", {
+        }, b(e.label), 3)) : _("", !0)
+      ], 16, z),
+      e.hintText || a(f).hint ? (d(), i("span", {
         key: 0,
-        class: s(["stash-switch__hint tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs", { "stash-switch__hint--disabled tw-text-ice-500": t.disabled }]),
+        class: s(["stash-switch__hint ml-[40px] mt-1.5 block whitespace-pre-line text-xs", { "stash-switch__hint--disabled text-ice-500": e.disabled }]),
         "data-test": "stash-switch|hint"
       }, [
-        B(e.$slots, "hint", {}, () => [
-          M(_(t.hintText), 1)
+        B(t.$slots, "hint", {}, () => [
+          M(b(e.hintText), 1)
         ])
-      ], 2)) : u("", !0)
-    ], 10, z));
+      ], 2)) : _("", !0)
+    ], 10, N));
   }
-}), q = "_control_8a1ic_2", P = "_active_8a1ic_5", U = {
-  control: q,
+}), $ = "_control_qbv7l_3", P = "_active_qbv7l_6", U = {
+  control: $,
   active: P
 }, j = {
   $style: U
-}, K = /* @__PURE__ */ N($, [["__cssModules", j]]);
+}, K = /* @__PURE__ */ E(I, [["__cssModules", j]]);
 export {
   K as default
 };

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n  export interface SwitchProps {\n    /**\n     * The current checked value, can be a boolean or an array of values\n     */\n    checked?: boolean | Array<string | number>;\n\n    /**\n     * Prevent the user from changing the switch state.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * Unique ID for the switch, required for accessibility purposes\n     */\n    id?: string;\n\n    /**\n     * Label text to display with switch\n     */\n    label?: string;\n\n    /**\n     * HTML name property\n     */\n    name?: string;\n\n    /**\n     * Value associated with switch when it is `checked`.  This value is\n     * used to compare against `checked` property when passed as an array.\n     */\n    value?: string | number;\n  }\n\n  defineOptions({\n    name: 'll-switch',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<SwitchProps>(), {\n    checked: false,\n    disabled: false,\n    hintText: '',\n    id: undefined,\n    label: '',\n    name: '',\n    value: '',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'update:checked', value: SwitchProps['checked']): void;\n  }>();\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-switch: use the @update:checked event instead of @change.');\n  }\n\n  const switchAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n  <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n    <label\n      :for=\"switchId\"\n      :class=\"{ 'tw-pointer-events-none': props.disabled }\"\n      class=\"tw-flex tw-cursor-pointer\"\n      data-test=\"stash-switch|label\"\n      v-bind=\"switchAttrs\"\n    >\n      <span\n        class=\"tw-relative tw-inline-block tw-h-5 tw-w-[34px] tw-min-w-[34px]\"\n        :class=\"{ [classes.active]: props.checked }\"\n      >\n        <span\n          class=\"stash-switch__track tw-absolute tw-top-0.5 tw-h-4 tw-w-full tw-rounded-[10px]\"\n          :class=\"{\n            'tw-bg-blue-500': props.checked && !props.disabled,\n            'tw-bg-ice-700': !props.checked && !props.disabled,\n            'stash-switch__track--disabled tw-bg-ice-500': props.disabled,\n            'stash-switch__track--on': props.checked,\n            'stash-switch__track--off': !props.checked,\n          }\"\n          data-test=\"stash-switch|track\"\n        ></span>\n        <span\n          class=\"stash-switch__control tw-absolute tw-left-0 tw-size-5 tw-rounded-[10px] tw-border tw-border-solid tw-border-ice-500 tw-bg-white tw-shadow\"\n          :class=\"[\n            classes.control,\n            {\n              'stash-switch__control--on': props.checked,\n              'stash-switch__control--off': !props.checked,\n              'stash-switch__control--disabled': props.disabled,\n            },\n          ]\"\n          data-test=\"stash-switch|control\"\n        ></span>\n      </span>\n      <input\n        :id=\"switchId\"\n        v-model=\"internalValue\"\n        type=\"checkbox\"\n        :disabled=\"props.disabled\"\n        :name=\"props.name\"\n        tabindex=\"0\"\n        :value=\"value\"\n        class=\"tw-sr-only\"\n      />\n      <span\n        v-if=\"props.label\"\n        :class=\"{\n          'tw-text-ice-900': props.checked && !props.disabled,\n          'tw-text-ice-700': !props.checked && !props.disabled,\n          'stash-switch__label-text--on': props.checked,\n          'stash-switch__label-text--off': !props.checked,\n          'stash-switch__label-text--disabled tw-text-ice-500': props.disabled,\n        }\"\n        class=\"stash-switch__label-text tw-relative tw-top-px tw-ml-1.5\"\n        data-test=\"stash-switch|label-text\"\n      >\n        {{ props.label }}\n      </span>\n    </label>\n    <span\n      v-if=\"props.hintText || slots.hint\"\n      class=\"stash-switch__hint tw-ml-[40px] tw-mt-1.5 tw-block tw-whitespace-pre-line tw-text-xs\"\n      :class=\"{ 'stash-switch__hint--disabled tw-text-ice-500': props.disabled }\"\n      data-test=\"stash-switch|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style module>\n  .control {\n    transition: left 0.2s ease-in-out;\n\n    .active & {\n      @apply tw-left-3.5; /* track width - switch width */\n    }\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","classes","useCssModule","emit","__emit","logger","switchAttrs","computed","tempAttrs","internalValue","value","switchId","uniqueId"],"mappings":";;;;;;;;;;;;;;;;;;;AAgDE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAOC;AAQb,QAJI,OAAOT,EAAM,SAAU,aACzBU,EAAO,KAAK,6FAA6F,GAGvGR,EAAM;AACR,YAAM,IAAI,MAAM,8DAA8D;AAGhF,UAAMS,IAAcC,EAAS,MAAM;AACjC,YAAMC,IAAY,EAAE,GAAGX,EAAA;AAEvB,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IACT,CAAC,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKC,IAAWJ,EAAS,MAAMZ,EAAM,MAAMiB,EAAS,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useCssModule, useSlots } from 'vue';\n\n  export interface SwitchProps {\n    /**\n     * The current checked value, can be a boolean or an array of values\n     */\n    checked?: boolean | Array<string | number>;\n\n    /**\n     * Prevent the user from changing the switch state.\n     */\n    disabled?: boolean;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * Unique ID for the switch, required for accessibility purposes\n     */\n    id?: string;\n\n    /**\n     * Label text to display with switch\n     */\n    label?: string;\n\n    /**\n     * HTML name property\n     */\n    name?: string;\n\n    /**\n     * Value associated with switch when it is `checked`.  This value is\n     * used to compare against `checked` property when passed as an array.\n     */\n    value?: string | number;\n  }\n\n  defineOptions({\n    name: 'll-switch',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<SwitchProps>(), {\n    checked: false,\n    disabled: false,\n    hintText: '',\n    id: undefined,\n    label: '',\n    name: '',\n    value: '',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'update:checked', value: SwitchProps['checked']): void;\n  }>();\n\n  if (typeof props.value === 'boolean') {\n    logger.warn('Switch: use `checked` to toggle the state; `value` is what will be set if `checked` is true');\n  }\n\n  if (attrs.onChange) {\n    throw new Error('ll-switch: use the @update:checked event instead of @change.');\n  }\n\n  const switchAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs['data-test'];\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const internalValue = computed({\n    get() {\n      return props.checked;\n    },\n    set(value) {\n      emit('update:checked', value);\n    },\n  });\n\n  const switchId = computed(() => props.id || uniqueId('switch-'));\n</script>\n\n<template>\n  <div class=\"stash-switch\" :class=\"attrs['class']\" :data-test=\"attrs['data-test'] || 'stash-switch'\">\n    <label\n      :for=\"switchId\"\n      :class=\"{ 'pointer-events-none': props.disabled }\"\n      class=\"flex cursor-pointer\"\n      data-test=\"stash-switch|label\"\n      v-bind=\"switchAttrs\"\n    >\n      <span class=\"relative inline-block h-5 w-[34px] min-w-[34px]\" :class=\"{ [classes.active]: props.checked }\">\n        <span\n          class=\"stash-switch__track absolute top-0.5 h-4 w-full rounded-[10px]\"\n          :class=\"{\n            'bg-blue-500': props.checked && !props.disabled,\n            'bg-ice-700': !props.checked && !props.disabled,\n            'stash-switch__track--disabled bg-ice-500': props.disabled,\n            'stash-switch__track--on': props.checked,\n            'stash-switch__track--off': !props.checked,\n          }\"\n          data-test=\"stash-switch|track\"\n        ></span>\n        <span\n          class=\"stash-switch__control absolute left-0 size-5 rounded-[10px] border border-solid border-ice-500 bg-white shadow\"\n          :class=\"[\n            classes.control,\n            {\n              'stash-switch__control--on': props.checked,\n              'stash-switch__control--off': !props.checked,\n              'stash-switch__control--disabled': props.disabled,\n            },\n          ]\"\n          data-test=\"stash-switch|control\"\n        ></span>\n      </span>\n      <input\n        :id=\"switchId\"\n        v-model=\"internalValue\"\n        type=\"checkbox\"\n        :disabled=\"props.disabled\"\n        :name=\"props.name\"\n        tabindex=\"0\"\n        :value=\"value\"\n        class=\"sr-only\"\n      />\n      <span\n        v-if=\"props.label\"\n        :class=\"{\n          'text-ice-900': props.checked && !props.disabled,\n          'text-ice-700': !props.checked && !props.disabled,\n          'stash-switch__label-text--on': props.checked,\n          'stash-switch__label-text--off': !props.checked,\n          'stash-switch__label-text--disabled text-ice-500': props.disabled,\n        }\"\n        class=\"stash-switch__label-text relative top-px ml-1.5\"\n        data-test=\"stash-switch|label-text\"\n      >\n        {{ props.label }}\n      </span>\n    </label>\n    <span\n      v-if=\"props.hintText || slots.hint\"\n      class=\"stash-switch__hint ml-[40px] mt-1.5 block whitespace-pre-line text-xs\"\n      :class=\"{ 'stash-switch__hint--disabled text-ice-500': props.disabled }\"\n      data-test=\"stash-switch|hint\"\n    >\n      <!-- @slot for displaying hint text -->\n      <slot name=\"hint\">{{ props.hintText }}</slot>\n    </span>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .control {\n      transition: left 0.2s ease-in-out;\n\n      .active & {\n        left: calc(var(--spacing) * 3.5); /* track width - switch width (14px) */\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","classes","useCssModule","emit","__emit","logger","switchAttrs","computed","tempAttrs","internalValue","value","switchId","uniqueId"],"mappings":";;;;;;;;;;;;;;;;;;;AAgDE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAOC;AAQb,QAJI,OAAOT,EAAM,SAAU,aACzBU,EAAO,KAAK,6FAA6F,GAGvGR,EAAM;AACR,YAAM,IAAI,MAAM,8DAA8D;AAGhF,UAAMS,IAAcC,EAAS,MAAM;AACjC,YAAMC,IAAY,EAAE,GAAGX,EAAA;AAEvB,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IACT,CAAC,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAC9B;AAAA,IAAA,CACD,GAEKC,IAAWJ,EAAS,MAAMZ,EAAM,MAAMiB,EAAS,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}