@leaflink/stash 48.16.1 → 48.17.0

package/dist/Select.vue.d.ts

@@ -1,11 +1,10 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { Placement } from '@floating-ui/vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -34,7 +33,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectProps>, {
     preventEmpty: boolean;
     allowEmpty: null;
     label: string;
@@ -72,14 +71,14 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     menuPlacement: string;
     enableTeleport: boolean;
     teleportTo: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (selectedOptions: any) => void;
     clear: () => void;
     add: (optionAdded: any) => void;
     remove: (optionRemoved: any, index: number) => void;
     opened: () => void;
     closed: (selectedOptions: any) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectProps>, {
     preventEmpty: boolean;
     allowEmpty: null;
     label: string;
@@ -117,35 +116,35 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     menuPlacement: string;
     enableTeleport: boolean;
     teleportTo: string;
-}>>> & {
+}>>> & Readonly<{
     onRemove?: ((optionRemoved: any, index: number) => any) | undefined;
-    onClear?: (() => any) | undefined;
     "onUpdate:model-value"?: ((selectedOptions: any) => any) | undefined;
+    onClear?: (() => any) | undefined;
     onAdd?: ((optionAdded: any) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: ((selectedOptions: any) => any) | undefined;
-}, {
+}>, {
+    lazy: () => any[];
+    error: string;
     name: string;
+    disabled: boolean;
     label: string;
     id: string;
     icon: string | boolean;
-    error: string;
-    disabled: boolean;
-    placeholder: string;
-    value: any;
     trackBy: string;
     addBottomSpace: boolean;
     errorText: string;
     hintText: string;
     showOptionalInLabel: boolean;
+    placeholder: string;
     hint: string;
     preventEmpty: boolean;
     allowEmpty: string | boolean | null;
     displayBy: string;
     searchBy: string[];
     options: any[] | readonly any[];
-    lazy: () => any[];
     modelValue: any;
+    value: any;
     hideSearch: boolean;
     searchable: string | boolean | null;
     preserveSearchTerm: boolean;
@@ -162,7 +161,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     menuPlacement: Placement;
     enableTeleport: boolean;
     teleportTo: string | HTMLElement;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     selected?(_: {
         option: any;
     }): any;

package/dist/SelectStatus.js

@@ -1,7 +1,7 @@
-import { defineComponent as S, useAttrs as b, useCssModule as g, computed as u, openBlock as o, createBlock as C, normalizeClass as l, unref as O, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as m, normalizeStyle as p } from "vue";
+import { defineComponent as S, useAttrs as b, useCssModule as C, computed as u, openBlock as o, createBlock as O, normalizeClass as l, unref as V, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as m, normalizeStyle as p } from "vue";
 import f from "./Icon.js";
-import V from "./Select.js";
-import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
+import $ from "./Select.js";
+import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
@@ -25,11 +25,11 @@ import "./utils/colorScheme.js";
 import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
-const j = { class: "tw-mr-6 tw-truncate" }, E = {
+const N = { class: "tw-mr-6 tw-truncate" }, D = {
   key: 1,
   class: "tw-flex tw-items-center",
   "data-test": "select-status|value"
-}, N = { class: "tw-ml-1.5 tw-mr-6 tw-truncate" }, D = { class: "tw-flex tw-min-w-0" }, I = /* @__PURE__ */ S({
+}, I = { class: "tw-ml-1.5 tw-mr-6 tw-truncate" }, L = { class: "tw-flex tw-min-w-0" }, M = /* @__PURE__ */ S({
   name: "ll-select-status",
   __name: "SelectStatus",
   props: {
@@ -44,34 +44,34 @@ const j = { class: "tw-mr-6 tw-truncate" }, E = {
     value: { type: [Number, String, Boolean, null], default: null }
   },
   emits: ["update:model-value"],
-  setup(w, { emit: y }) {
-    const e = w, _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = b(), x = g();
+  setup(y, { emit: w }) {
+    const _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = b(), v = C(), e = y;
     if (e.value)
       throw new Error("ll-select-status: use :model-value or v-model instead of :value.");
     if (h.onInput)
       throw new Error("ll-select-status: use the @update:model-value event instead of @input");
-    const r = u(() => e.statusOptions.find((t) => t[e.trackBy] === e.modelValue)), v = u(() => {
+    const x = w, r = u(() => e.statusOptions.find((t) => t[e.trackBy] === e.modelValue)), B = u(() => {
       const { color: t = "" } = r.value || {};
       return _.includes(t);
     });
-    function B(t) {
+    function k(t) {
       return t != null && t.includes("-") ? `tw-bg-${t}` : `tw-bg-${t}-500`;
     }
     function n(t) {
       return t != null && t.includes("-") ? `tw-text-${t}` : `tw-text-${t}-500`;
     }
-    function k(t) {
-      y("update:model-value", (t == null ? void 0 : t[e.trackBy]) ?? "");
+    function g(t) {
+      x("update:model-value", (t == null ? void 0 : t[e.trackBy]) ?? "");
     }
-    return (t, z) => (o(), C(V, {
+    return (t, A) => (o(), O($, {
       ref: "select",
       "hide-search": "",
       single: "",
       class: l([[
-        O(x).select,
+        V(v).select,
         {
           "stash-select-status--filled": e.secondary,
-          "stash-select-status--filled-dark": e.secondary && v.value
+          "stash-select-status--filled-dark": e.secondary && B.value
         }
       ], "stash-select-status"]),
       disabled: e.disabled,
@@ -81,16 +81,16 @@ const j = { class: "tw-mr-6 tw-truncate" }, E = {
       "track-by": e.trackBy,
       "model-value": r.value,
       "data-test": "stash-select-status",
-      "onUpdate:modelValue": k
+      "onUpdate:modelValue": g
     }, {
       selected: d(({ option: s }) => [
         e.secondary ? (o(), i("div", {
           key: 0,
-          class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3", [B(s.color)]]),
+          class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3", [k(s.color)]]),
           "data-test": "select-status|value"
         }, [
-          a("span", j, c(s[e.displayBy]), 1)
-        ], 2)) : (o(), i("div", E, [
+          a("span", N, c(s[e.displayBy]), 1)
+        ], 2)) : (o(), i("div", D, [
           m(f, {
             "data-test": "select-status|value-icon",
             name: s.icon || "circle-status",
@@ -100,11 +100,11 @@ const j = { class: "tw-mr-6 tw-truncate" }, E = {
             ]),
             style: p({ color: s.hexCode })
           }, null, 8, ["name", "class", "style"]),
-          a("span", N, c(s[e.displayBy]), 1)
+          a("span", I, c(s[e.displayBy]), 1)
         ]))
       ]),
       option: d(({ option: s }) => [
-        a("div", D, [
+        a("div", L, [
           m(f, {
             "data-test": "svg|status-color",
             name: s.icon || "circle-status",
@@ -123,13 +123,13 @@ const j = { class: "tw-mr-6 tw-truncate" }, E = {
       _: 1
     }, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value"]));
   }
-}), L = "_select_2rxjj_25", M = {
-  select: L,
-  "stash-select__chips": "_stash-select__chips_2rxjj_30"
-}, T = {
-  $style: M
-}, mt = /* @__PURE__ */ $(I, [["__cssModules", T]]);
+}), T = "_select_1gtqy_27", q = {
+  select: T,
+  "stash-select__chips": "_stash-select__chips_1gtqy_32"
+}, z = {
+  $style: q
+}, pt = /* @__PURE__ */ E(M, [["__cssModules", z]]);
 export {
-  mt as default
+  pt as default
 };
 //# sourceMappingURL=SelectStatus.js.map

package/dist/SelectStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes\n       */\n      (e: 'update:model-value', value: unknown): void;\n    }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"\n          stash-select-status--selected\n          tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\n        \"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(.stash-select-status--filled\n      .stash-select--active\n      .stash-select__content:focus-within\n      .stash-select__border-selector) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8DQA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC;AAYhB,QAAIC,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAWnF,UAAAK,IAAcC,EAAS,MACpBF,EAAM,cAAc,KAAK,CAACG,MAAWA,EAAOH,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKI,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAN,EAAiB,SAASU,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,MAAU,SAASA;AAAA,IAC5D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,MAAU,WAAWA;AAAA,IAChE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAC,EAAK,uBAAsBD,KAAA,gBAAAA,EAAQT,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC,KAEVC,IAAQC;AAUd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,MAAU,SAASA;AAAA,IAC5D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,MAAU,WAAWA;AAAA,IAChE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/SelectStatus.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -27,7 +26,7 @@ declare type __VLS_WithDefaults<P, D> = {
     }> : P[K];
 };
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
     disabled: boolean;
     displayBy: string;
     secondary: boolean;
@@ -35,9 +34,9 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     placeholder: string;
     trackBy: string;
     value: null;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (value: unknown) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
     disabled: boolean;
     displayBy: string;
     secondary: boolean;
@@ -45,20 +44,20 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     placeholder: string;
     trackBy: string;
     value: null;
-}>>> & {
+}>>> & Readonly<{
     "onUpdate:model-value"?: ((value: unknown) => any) | undefined;
-}, {
-    secondary: boolean;
+}>, {
     disabled: boolean;
-    placeholder: string;
-    value: string | number | boolean | null;
+    secondary: boolean;
     trackBy: string;
+    placeholder: string;
     displayBy: string;
+    value: string | number | boolean | null;
     noTruncate: boolean;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
-declare type IconName = typeof iconNames[number];
+declare type IconName = (typeof iconNames)[number];
 
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton tw-animate-pulse tw-bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular tw-rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text tw-rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular tw-rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'tw-max-w-fit': hasChildren && !props.width,\n      'tw-h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .text-variant::before {\n    content: '\\00a0';\n  }\n\n  .has-children > * {\n    visibility: hidden;\n  }\n</style>\n"],"names":["SkeletonVariants","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles","props"],"mappings":";;AACc,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;iBA6BNC,IAAQC,KACRC,IAAUC,KAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIC,EAAM,UACDD,EAAA,QAAQ,GAAGC,EAAM,YAItBA,EAAM,UAAUA,EAAM,YAAY,WAC7BD,EAAA,SAAS,GAAGC,EAAM,aAGpBD;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton tw-animate-pulse tw-bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular tw-rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text tw-rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular tw-rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'tw-max-w-fit': hasChildren && !props.width,\n      'tw-h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .text-variant::before {\n    content: '\\00a0';\n  }\n\n  .has-children > * {\n    visibility: hidden;\n  }\n</style>\n"],"names":["SkeletonVariants","props","__props","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles"],"mappings":";;AACc,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,KACRC,IAAUC,KAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACDS,EAAA,QAAQ,GAAGT,EAAM,YAItBA,EAAM,UAAUA,EAAM,YAAY,WAC7BS,EAAA,SAAS,GAAGT,EAAM,aAGpBS;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Skeleton.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,19 +32,19 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
     height: undefined;
     variant: SkeletonVariants;
     width: undefined;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
     height: undefined;
     variant: SkeletonVariants;
     width: undefined;
-}>>>, {
-    height: string | number;
+}>>> & Readonly<{}>, {
     width: string | number;
+    height: string | number;
     variant: "text" | "circular" | "rectangular";
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

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 tw-whitespace-nowrap\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\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-whitespace-nowrap 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: background-color 500ms, 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":["slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","props","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAsDQA,IAAQC,KACRC,IAAUC,KAEVC,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,MACpBI,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKC,IAAkBL;AAAA,MAAS,MAC/BM,EAAE,0BAA0B,EAAE,KAAKF,EAAM,MAAM,OAAO,OAAOR,KAAA,gBAAAA,EAAiB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIlG,WAAAW,EAAc,MAAM;AAClB,MAAIX,KACcA,EAAA,aAAaQ,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 tw-whitespace-nowrap\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\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-whitespace-nowrap 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: background-color 500ms, 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,KACRC,IAAUC,KAEVC,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,KACcA,EAAA,aAAaN,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Step.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,7 +32,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
     active: boolean;
     completed: boolean;
     error: boolean;
@@ -41,7 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     step: undefined;
     disabled: boolean;
     loading: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
     active: boolean;
     completed: boolean;
     error: boolean;
@@ -49,15 +48,15 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     step: undefined;
     disabled: boolean;
     loading: boolean;
-}>>>, {
+}>>> & Readonly<{}>, {
     error: boolean;
     disabled: boolean;
-    step: string;
     loading: boolean;
     active: boolean;
+    step: string;
     nested: boolean;
     completed: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Stepper.js

@@ -1,15 +1,15 @@
-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 { defineComponent as I, ref as g, computed as r, watch as o, watchEffect as y, provide as N, nextTick as E, openBlock as i, createElementBlock as z, createElementVNode as B, normalizeClass as p, renderSlot as R, createBlock as u, unref as d, withCtx as v, createVNode as m, createCommentVNode as f } from "vue";
+import T from "./useMediaQuery.js";
+import A from "./useStepper.js";
 import h from "./Button.js";
 import w from "./Icon.js";
-import { S as A } from "./keys-7ecef029.js";
+import { S as V } from "./keys-7ecef029.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
+const L = { class: "tw-relative" }, G = /* @__PURE__ */ I({
   __name: "Stepper",
   props: {
     step: { default: -1 },
@@ -20,15 +20,15 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
     theme: { default: "dark" }
   },
   emits: ["update:step", "update:substep"],
-  setup(x, { expose: _, emit: n }) {
-    const t = x, l = I(), e = T({
+  setup(x, { expose: _, emit: S }) {
+    const t = x, n = S, l = g(), e = A({
       linear: t.linear,
       activeStep: t.step,
       activeSubstep: t.substep,
       ref: l
-    }), S = R("screen and (min-width: 961px)"), a = r(
-      () => t.orientation === "horizontal" && (!S.value || t.useResponsiveNav)
-    ), b = r(() => e.activeStepIndex.value <= 0), k = r(
+    }), b = T("screen and (min-width: 961px)"), a = r(
+      () => t.orientation === "horizontal" && (!b.value || t.useResponsiveNav)
+    ), k = r(() => e.activeStepIndex.value <= 0), C = r(
       () => !e.isStepCompleted(e.activeStepIndex.value) || e.activeStepIndex.value === e.steps.value.length - 1
     );
     o(
@@ -45,9 +45,9 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
     ), o(
       () => e.activeSubstepIndex.value,
       (s) => n("update:substep", s)
-    ), g(() => {
+    ), y(() => {
       a.value && c();
-    }), y(A, {
+    }), N(V, {
       registerStep: e.registerStep,
       orientation: t.orientation,
       stepCount: e.stepCount,
@@ -63,12 +63,12 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
     async function c() {
       if (!a.value)
         return;
-      await N();
+      await E();
       const s = e.activeStepElement.value;
       s && s.scrollIntoView({ behavior: "instant", inline: "start", block: "nearest" });
     }
-    return (s, L) => (i(), E("div", V, [
-      z("ul", {
+    return (s, P) => (i(), z("div", L, [
+      B("ul", {
         ref_key: "stepperListRef",
         ref: l,
         class: p(["stash-stepper tw-flex", {
@@ -79,13 +79,13 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
         }]),
         "data-test": "stash-stepper"
       }, [
-        B(s.$slots, "default")
+        R(s.$slots, "default")
       ], 2),
       a.value ? (i(), u(h, {
         key: 0,
         class: p(["stash-stepper__arrow stash-stepper__arrow--prev", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
         "data-test": "stash-stepper|prev-arrow",
-        disabled: b.value,
+        disabled: k.value,
         icon: "",
         onClick: d(e).back
       }, {
@@ -101,7 +101,7 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
         key: 1,
         class: p(["stash-stepper__arrow stash-stepper__arrow--next", t.theme === "light" ? "tw-text-blue-500" : "tw-text-white"]),
         "data-test": "stash-stepper|next-arrow",
-        disabled: k.value,
+        disabled: C.value,
         icon: "",
         onClick: d(e).next
       }, {
@@ -117,6 +117,6 @@ const V = { class: "tw-relative" }, F = /* @__PURE__ */ C({
   }
 });
 export {
-  F as default
+  G as default
 };
 //# sourceMappingURL=Stepper.js.map