@leaflink/stash 51.11.1 → 51.12.1

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 | boolean;\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     * Shows a label above the select\n     */\n    label?: string;\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    label: undefined,\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    :label=\"props.label\"\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-size-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":";;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAQC;AAWd,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,GAAO,IAAAJ,EAAY,SAAS,CAAC;AACtC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAEvD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,CAAK,KAAK,SAASA,CAAK;AAAA,IAAA;AAOjE,aAASE,EAAaF,GAA4C;AAEzD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,CAAK,KAAK,WAAWA,CAAK;AAAA,IAAA;AAGrE,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 | boolean;\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     * Shows a label above the select\n     */\n    label?: string;\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    label: undefined,\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    :label=\"props.label\"\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-size-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":";;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAQC;AAWd,QAAID,EAAM;AACR,YAAM,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACR,YAAM,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;AAC5C,aAAOT,EAAiB,SAASa,CAAK;AAAA,IACxC,CAAC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,CAAK,KAAK,SAASA,CAAK;AAAA,IACjE;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,CAAK,KAAK,WAAWA,CAAK;AAAA,IACrE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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","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,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAC;AAEL,aAAIT,EAAM,UACDS,EAAA,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WAC7BS,EAAA,SAAS,GAAGT,EAAM,MAAM,OAG1BS;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":";;AACS,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACRS,EAAO,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WACpCS,EAAO,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;"}

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,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,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,EAAG,CAAA;AAAA,IAClG;AAGA,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACcA,EAAA,aAAaN,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\"\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":";;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,WAAW,YACXA,EAAA,aAAa,cAFHA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;AC+BV,UAAMC,IAAQC,GASRC,IAAOC,GAWPC,IAAiBC,EAAI,GACrBC,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,IAC7E,GACMY,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,IACnE;AAEA,IAAAQ;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,gBAAgB,QAAQS;AAAA,IAC9C,GAEAD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWT,EAAQ,mBAAmB,QAAQS;AAAA,IACjD,GAEAD;AAAA,MACE,MAAMR,EAAQ,gBAAgB;AAAA,MAC9B,CAACS,MAAU;AACT,QAAAb,EAAK,eAAea,CAAK,GACZC,EAAA;AAAA,MAAA;AAAA,IAEjB,GAEAF;AAAA,MACE,MAAMR,EAAQ,mBAAmB;AAAA,MACjC,CAACS,MAAUb,EAAK,kBAAkBa,CAAK;AAAA,IACzC,GAMAE,EAAY,MAAM;AAChB,MAAIP,EAAkB,SACPM,EAAA;AAAA,IACf,CACD,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,GAEYU,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;AACxB,UAAA,CAACN,EAAkB;AACrB;AAIF,YAAMW,EAAS;AAET,YAAAC,IAAOhB,EAAQ,kBAAkB;AAEvC,MAAIgB,KACGA,EAAA,eAAe,EAAE,UAAU,WAAW,QAAQ,SAAS,OAAO,WAAW;AAAA,IAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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,EAAS,GACjBC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAOC;AAQb,QAJI,OAAOT,EAAM,SAAU,aACzBU,EAAO,KAAK,6FAA6F,GAGvGR,EAAM;AACF,YAAA,IAAI,MAAM,8DAA8D;AAG1E,UAAAS,IAAcC,EAAS,MAAM;AAC3B,YAAAC,IAAY,EAAE,GAAGX,EAAM;AAE7B,oBAAOW,EAAU,WAAW,GAC5B,OAAOA,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAgBF,EAAS;AAAA,MAC7B,MAAM;AACJ,eAAOZ,EAAM;AAAA,MACf;AAAA,MACA,IAAIe,GAAO;AACT,QAAAP,EAAK,kBAAkBO,CAAK;AAAA,MAAA;AAAA,IAC9B,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=\"{ '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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tab.js

@@ -1,7 +1,7 @@
-import { defineComponent as x, useCssModule as T, inject as y, computed as n, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
+import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
 import j from "@leaflink/snitch";
 import D from "./Badge.js";
-import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
+import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
   __name: "Tab",
@@ -18,24 +18,24 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
     const e = p, v = T(), l = y(L.key);
     if (!l)
       throw Error("The Tab component must be a child of the Tabs component.");
-    const { setActiveTab: w, activeTab: f, variant: o } = l, t = n(() => e.value === f.value), m = n(() => e.to ? "router-link" : e.href ? "a" : "button");
+    const { setActiveTab: w, activeTab: f, variant: o } = l, t = r(() => e.value === f.value), m = r(() => e.to ? "router-link" : e.href ? "a" : "button");
     function d(i) {
       e.disabled || w(i);
     }
-    const r = n(() => `tabpanel-${e.value}`);
+    const n = r(() => `tabpanel-${e.value}`);
     k(async () => {
-      await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(r.value) && j.warn(
-        `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${r.value}" and a "role" attribute with value "tabpanel".`
+      await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.value) && j.warn(
+        `The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${n.value}" and a "role" attribute with value "tabpanel".`
       );
     });
-    const h = n(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
+    const h = r(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
     return (i, s) => (u(), C("li", {
       id: `tab-${e.value}`,
       role: "tab",
       "aria-selected": t.value,
-      "aria-controls": r.value,
+      "aria-controls": n.value,
       "aria-disabled": e.disabled,
-      class: $(["stash-tab tw-list-none", [
+      class: $(["stash-tab", [
         {
           "stash-tab--active is-active": t.value,
           "stash-tab--disabled": e.disabled,

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab tw-list-none\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAa,GAEvBC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAY,IAAAL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IAAA;AAGvB,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MACrM;AAAA,IACF,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAC,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAA,GAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAA,GAEF,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEhGG,EAAO;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAGzM,CAAC;AAED,UAAMI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n      // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AACpD,aAAO,CAAC,GACLI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB,eAAaC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAAA,CAGtE,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n      // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto': computedLayout === 'scroll' },\n      { 'tw-shadow': isShadowEnabled },\n      {\n        'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack',\n      },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;AAIO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACoEV,UAAMC,IAAQC,GAcR;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IAAA,IACZC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFH,EAAM,MACd,GAEKa,IAAiBD,EAAkB,MACnCZ,EAAM,eACD,WAGFA,EAAM,MACd,GAEKc,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AACpD,aAAO,CAAC,GACLI,IAAAhB,EAAM,iBAAN,QAAAgB,EAAoB,eAAaC,IAAAjB,EAAM,iBAAN,gBAAAiB,EAAoB,cAAa;AAAA,IAGvE,CAAC,GAEKC,IAAYN,EAAS,MAAA;;AAAO;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAhB,EAAM,iBAAN,gBAAAgB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMZ,EAAM,WAAWE,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMZ,EAAM,qBAAqB;AAAA,MACjE,YAAYY,EAAS,MAAMZ,EAAM,UAAU;AAAA,MAC3C,cAAcY,EAAS,MAAMZ,EAAM,YAAY;AAAA,MAC/C,cAAcY;AAAA,QACZ,MACEZ,EAAM,gBACN,CAACA,EAAM,aACP,EAACK,KAAA,QAAAA,EAAmB,UACpB,CAACL,EAAM,WACP,EAACI,KAAA,QAAAA,EAAiB;AAAA,MAAA;AAAA,MAEtB,QAAQS;AAAA,IAAA,CACT,GAEDS,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQN,EAAM;AAAA,IAEvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.keys-LHQf6FEH.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.keys-LHQf6FEH.js","sources":["../src/components/Table/Table.keys.ts"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TableInjection } from './Table.types';\n\nexport const TABLE_INJECTION: Injection<TableInjection> = Object.freeze({\n  key: Symbol('TABLE_INJECTION_KEY'),\n});\n"],"names":["TABLE_INJECTION"],"mappings":"AAGa,MAAAA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}
+{"version":3,"file":"Table.keys-LHQf6FEH.js","sources":["../src/components/Table/Table.keys.ts"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TableInjection } from './Table.types';\n\nexport const TABLE_INJECTION: Injection<TableInjection> = Object.freeze({\n  key: Symbol('TABLE_INJECTION_KEY'),\n});\n"],"names":["TABLE_INJECTION"],"mappings":"AAGO,MAAMA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}

package/dist/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableCellProps {\n    /**\n     * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n     */\n    isControl?: boolean;\n    /**\n     * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n     */\n    mobileHeader?: string;\n  }\n\n  const props = withDefaults(defineProps<TableCellProps>(), {\n    isControl: false,\n    mobileHeader: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableCell must be used within a Table component');\n  }\n\n  const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n  <td\n    class=\"stash-table-cell\"\n    data-test=\"stash-table-cell\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-p-3': layout === 'scroll',\n        'tw-p-1.5': layout === 'stack',\n        'lg:tw-p-3': density === 'compact',\n        'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  .layout--scroll {\n    background-color: var(--color-white);\n    border: none;\n    border-bottom: 1px solid var(--color-ice-200);\n  }\n\n  .layout--scroll.has-actions:last-of-type {\n    text-align: center;\n  }\n\n  .layout--stack {\n    background-color: var(--color-ice-100);\n    border-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .layout--stack.has-actions:last-of-type {\n    background-color: transparent;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  .layout--stack.is-control {\n    background-color: transparent;\n  }\n\n  /* On large screens, layout--stack should match layout--scroll */\n  @media screen('lg') {\n    .layout--stack {\n      background-color: var(--color-white);\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: initial;\n    }\n\n    .layout--stack.has-actions:last-of-type {\n      background-color: var(--color-white);\n      position: initial;\n      right: initial;\n      text-align: center;\n      top: initial;\n    }\n\n    .layout--stack.is-control {\n      background-color: var(--color-white);\n    }\n\n    .root--density-comfortable:last-of-type:not(.has-actions) {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(\n        :global(.stash-table-header-row__selection-cell),\n        :global(.stash-table-row__selection-cell),\n        :global(.stash-table-row__toggle-expansion-cell)\n      ) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAa,GAEvBC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAW,IAAAL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableCellProps {\n    /**\n     * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n     */\n    isControl?: boolean;\n    /**\n     * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n     */\n    mobileHeader?: string;\n  }\n\n  const props = withDefaults(defineProps<TableCellProps>(), {\n    isControl: false,\n    mobileHeader: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableCell must be used within a Table component');\n  }\n\n  const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n  <td\n    class=\"stash-table-cell\"\n    data-test=\"stash-table-cell\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-p-3': layout === 'scroll',\n        'tw-p-1.5': layout === 'stack',\n        'lg:tw-p-3': density === 'compact',\n        'lg:tw-px-3 lg:tw-py-6': density === 'comfortable',\n        [classes['is-control']]: props.isControl,\n      },\n    ]\"\n  >\n    <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-font-medium tw-text-ice-900 lg:tw-hidden\">\n      {{ props.mobileHeader }}\n    </div>\n    <!-- @slot default -->\n    <slot></slot>\n  </td>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  .layout--scroll {\n    background-color: var(--color-white);\n    border: none;\n    border-bottom: 1px solid var(--color-ice-200);\n  }\n\n  .layout--scroll.has-actions:last-of-type {\n    text-align: center;\n  }\n\n  .layout--stack {\n    background-color: var(--color-ice-100);\n    border-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .layout--stack.has-actions:last-of-type {\n    background-color: transparent;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  .layout--stack.is-control {\n    background-color: transparent;\n  }\n\n  /* On large screens, layout--stack should match layout--scroll */\n  @media screen('lg') {\n    .layout--stack {\n      background-color: var(--color-white);\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: initial;\n    }\n\n    .layout--stack.has-actions:last-of-type {\n      background-color: var(--color-white);\n      position: initial;\n      right: initial;\n      text-align: center;\n      top: initial;\n    }\n\n    .layout--stack.is-control {\n      background-color: var(--color-white);\n    }\n\n    .root--density-comfortable:last-of-type:not(.has-actions) {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(\n        :global(.stash-table-header-row__selection-cell),\n        :global(.stash-table-row__selection-cell),\n        :global(.stash-table-row__toggle-expansion-cell)\n      ) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAIRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableHeaderCellProps {\n    /**\n     * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n     * For example: `'product_name'` (with no leading dash/hyphen).\n     */\n    sortId?: SortValueDeserialized['id'];\n  }\n\n  const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n    sortId: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableHeaderCell must be used within a Table component');\n  }\n\n  const { density, hasActions } = tableInjection;\n\n  // #region sorting\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n  const isSortable = computed(() => !!props.sortId);\n  const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n  function onRootClick() {\n    if (isSortable.value && typeof updateCurrentSort === 'function') {\n      updateCurrentSort(props.sortId, { shouldEmit: true });\n    }\n  }\n  // #endregion sorting\n</script>\n\n<template>\n  <th\n    class=\"stash-table-header-cell tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'tw-bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n          class=\"tw-absolute tw-text-ice-700\"\n          :class=\"[classes.caret, classes['caret-up']]\"\n          data-test=\"icon|caret-up\"\n          name=\"caret-up\"\n          size=\"dense\"\n        />\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'desc'\"\n          class=\"tw-absolute tw-text-ice-700\"\n          :class=\"[classes.caret, classes['caret-down']]\"\n          data-test=\"icon|caret-down\"\n          name=\"caret-down\"\n          size=\"dense\"\n        />\n      </div>\n    </div>\n  </th>\n</template>\n\n<style module>\n  .root {\n    border-left: none;\n    border-top: none;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .root:last-of-type {\n    border-right: 0;\n  }\n\n  .has-actions:last-of-type .content-wrapper {\n    justify-content: flex-end !important;\n  }\n\n  .caret-up {\n    top: -5px;\n  }\n\n  .caret-down {\n    top: 2px;\n  }\n\n  :global(.stash-table-header-cell--sorted) .caret {\n    top: -2px; /* vertically center the caret icon */\n  }\n\n  @media screen('lg') {\n    .root--density-comfortable:last-of-type {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(\n        :global(.stash-table-header-row__selection-cell),\n        :global(.stash-table-row__selection-cell)\n      ) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAGRC,IAAUC,EAAa,GAEvBC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGnE,UAAA,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IACtB,GACMC,IAAaC,EAAS,MAAM,CAAC,CAACd,EAAM,MAAM,GAC1Ce,IAAeD,EAAS,MAAML,EAAc,UAAUT,EAAM,MAAM;AAExE,aAASgB,IAAc;AACrB,MAAIH,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBX,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../src/components/TableHeaderCell/TableHeaderCell.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { DATA_VIEW_INJECTION, SortValueDeserialized } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n\n  export interface TableHeaderCellProps {\n    /**\n     * A unique value correlated to the data in this header's column (without a leading hyphen/dash).\n     * For example: `'product_name'` (with no leading dash/hyphen).\n     */\n    sortId?: SortValueDeserialized['id'];\n  }\n\n  const props = withDefaults(defineProps<TableHeaderCellProps>(), {\n    sortId: '',\n  });\n  const classes = useCssModule();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n  if (!tableInjection) {\n    throw new Error('TableHeaderCell must be used within a Table component');\n  }\n\n  const { density, hasActions } = tableInjection;\n\n  // #region sorting\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n  const isSortable = computed(() => !!props.sortId);\n  const isActiveSort = computed(() => currentSortId.value === props.sortId);\n\n  function onRootClick() {\n    if (isSortable.value && typeof updateCurrentSort === 'function') {\n      updateCurrentSort(props.sortId, { shouldEmit: true });\n    }\n  }\n  // #endregion sorting\n</script>\n\n<template>\n  <th\n    class=\"stash-table-header-cell tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900\"\n    :class=\"[\n      classes.root,\n      {\n        'tw-bg-white': !isActiveSort,\n        'stash-table-header-cell--sorted tw-bg-blue-100': isActiveSort,\n        [classes['root--density-compact']]: density === 'compact',\n        [classes['root--density-comfortable']]: density === 'comfortable',\n        [classes['has-actions']]: hasActions,\n        'tw-cursor-pointer': isSortable,\n      },\n    ]\"\n    data-test=\"stash-table-header-cell\"\n    @click=\"onRootClick\"\n  >\n    <div class=\"tw-flex tw-justify-between\" :class=\"classes['content-wrapper']\">\n      <!-- @slot default -->\n      <slot></slot>\n      <div v-if=\"isSortable\" class=\"tw-relative tw-h-4 tw-w-3\">\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'asc'\"\n          class=\"tw-absolute tw-text-ice-700\"\n          :class=\"[classes.caret, classes['caret-up']]\"\n          data-test=\"icon|caret-up\"\n          name=\"caret-up\"\n          size=\"dense\"\n        />\n        <Icon\n          v-if=\"!isActiveSort || currentSortOrder === 'desc'\"\n          class=\"tw-absolute tw-text-ice-700\"\n          :class=\"[classes.caret, classes['caret-down']]\"\n          data-test=\"icon|caret-down\"\n          name=\"caret-down\"\n          size=\"dense\"\n        />\n      </div>\n    </div>\n  </th>\n</template>\n\n<style module>\n  .root {\n    border-left: none;\n    border-top: none;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .root:last-of-type {\n    border-right: 0;\n  }\n\n  .has-actions:last-of-type .content-wrapper {\n    justify-content: flex-end !important;\n  }\n\n  .caret-up {\n    top: -5px;\n  }\n\n  .caret-down {\n    top: 2px;\n  }\n\n  :global(.stash-table-header-cell--sorted) .caret {\n    top: -2px; /* vertically center the caret icon */\n  }\n\n  @media screen('lg') {\n    .root--density-comfortable:last-of-type {\n      padding-right: 24px;\n    }\n\n    .root--density-comfortable:first-of-type:not(\n        :global(.stash-table-header-row__selection-cell),\n        :global(.stash-table-row__selection-cell)\n      ) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","currentSortId","currentSortOrder","updateCurrentSort","DATA_VIEW_INJECTION","isSortable","computed","isActiveSort","onRootClick"],"mappings":";;;;;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,SAAAG,GAAS,YAAAC,EAAA,IAAeJ,GAG1B,EAAE,eAAAK,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBN;AAAA,MAC7DO,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAEhBC,IAAaC,EAAS,MAAM,CAAC,CAACd,EAAM,MAAM,GAC1Ce,IAAeD,EAAS,MAAML,EAAc,UAAUT,EAAM,MAAM;AAExE,aAASgB,IAAc;AACrB,MAAIH,EAAW,SAAS,OAAOF,KAAsB,cACnDA,EAAkBX,EAAM,QAAQ,EAAE,YAAY,IAAM;AAAA,IAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <!-- This is just an empty cell to ensure proper alignment. \"Select all\" control should be in the toolbar. -->\n    <TableHeaderCell\n      v-if=\"hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell-empty\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell-empty\"\n    />\n\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell\"\n    >\n      <Checkbox\n        v-if=\"!hasToolbar\"\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","onSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAiB,IAAAL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAZ,EAAK,QAAQ,GAODU,EAAA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n</script>\n\n<template>\n  <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <!-- This is just an empty cell to ensure proper alignment. \"Select all\" control should be in the toolbar. -->\n    <TableHeaderCell\n      v-if=\"hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell-empty\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell-empty\"\n    />\n\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header|selection-cell\"\n    >\n      <Checkbox\n        v-if=\"!hasToolbar\"\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","onSelect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAA,IAAeL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAZ,EAAK,QAAQ,GAObU,EAAY;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n        'stash-table-row--accent': props.accentColor,\n        'tw-relative': props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        'tw-absolute': props.accentColor,\n        [`tw-bg-${props.accentColor}`]: props.accentColor,\n        'tw-block': props.accentColor,\n        'tw-h-full': props.accentColor,\n        'tw-w-1': props.accentColor,\n        'tw-top-0': props.accentColor,\n        'tw-left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GACvBC,IAAQC,EAGV,GAEEC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,MAAWP,GAE5EQ,IAAgBC,EAAInB,EAAM,UAAU,GACpCoB,IAAkBC,EAAS,MAAMN,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEc,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAhB,EAAM,YAAN,gBAAAgB,EAAA,KAAAhB,GAAgB,EAAE,cAAAiB,EAAc,GAAE,WAAU;AAExD,aAAIT,EAAa,UACNO,KAAA,IAGPH,EAAgB,SAAS,CAACN,EAAsB,UACzCS,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB3B,EAAK,qBAAqB2B,CAAU;AAAA,IAAA;AAGtC,WAAAC;AAAA,MACE,MAAM9B,EAAM;AAAA,MACZ,MAAMyB,EAAazB,EAAM,UAAU;AAAA,IACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n        'stash-table-row--accent': props.accentColor,\n        'tw-relative': props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        'tw-absolute': props.accentColor,\n        [`tw-bg-${props.accentColor}`]: props.accentColor,\n        'tw-block': props.accentColor,\n        'tw-h-full': props.accentColor,\n        'tw-w-1': props.accentColor,\n        'tw-top-0': props.accentColor,\n        'tw-left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBE,UAAMA,IAAQC,GAWRC,IAAOC,GAKPC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAQC,EAAA,GAKRC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,MAAWP,GAE5EQ,IAAgBC,EAAInB,EAAM,UAAU,GACpCoB,IAAkBC,EAAS,MAAMN,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEc,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAhB,EAAM,YAAN,gBAAAgB,EAAA,KAAAhB,GAAgB,EAAE,cAAAiB,EAAA,GAAgB,WAAU;AAExD,aAAIT,EAAa,UACfO,KAAS,IAGPH,EAAgB,SAAS,CAACN,EAAsB,UAClDS,KAAS,IAGJA;AAAA,IACT,CAAC,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACrC,UAAI,CAACR,EAAgB;AACnB,cAAM,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACV,EAAc;AAEvE,MAAAA,EAAc,QAAQW,GACtB3B,EAAK,qBAAqB2B,CAAU;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM9B,EAAM;AAAA,MACZ,MAAMyB,EAAazB,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
-import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
+import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
+import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-CmnBP4i1.js";
 import { _ as a } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const t = {
   "menu-tab": "_menu-tab_frbn6_2"