@leaflink/stash 44.0.0-beta.6 → 44.0.0-beta.7

package/dist/Tab.js

@@ -1,9 +1,9 @@
-import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-4a40f015.js";
+import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-69d1b046.js";
 import "vue";
 import "@leaflink/snitch";
 import "./Badge.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";
 import "./constants.js";

package/dist/{Tab.vue_vue_type_script_setup_true_lang-4a40f015.js → Tab.vue_vue_type_script_setup_true_lang-69d1b046.js}

@@ -1,7 +1,7 @@
 import { defineComponent as x, inject as T, computed as o, onMounted as k, nextTick as g, toRefs as u, openBlock as c, createElementBlock as y, normalizeClass as _, unref as n, withKeys as C, createBlock as P, resolveDynamicComponent as B, mergeProps as E, withCtx as b, createElementVNode as $, createVNode as N, renderSlot as A } from "vue";
 import I from "@leaflink/snitch";
 import j from "./Badge.js";
-import { T as D } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import { T as D } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 const L = ["id", "aria-selected", "aria-controls", "aria-disabled"], V = { class: "tw-mt-0.5" }, J = /* @__PURE__ */ x({
   __name: "Tab",
   props: {
@@ -88,4 +88,4 @@ const L = ["id", "aria-selected", "aria-controls", "aria-disabled"], V = { class
 export {
   J as _
 };
-//# sourceMappingURL=Tab.vue_vue_type_script_setup_true_lang-4a40f015.js.map
+//# sourceMappingURL=Tab.vue_vue_type_script_setup_true_lang-69d1b046.js.map

package/dist/{Tab.vue_vue_type_script_setup_true_lang-4a40f015.js.map → Tab.vue_vue_type_script_setup_true_lang-69d1b046.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang-4a40f015.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 } 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 = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | 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 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(`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  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=\"\n        tw-flex\n        tw-cursor-pointer\n        tw-items-center\n        tw-justify-center\n        tw-whitespace-nowrap\n        tw-border-solid\n        tw-py-1.5\n        tw-text-sm\n        tw-font-medium\n        hover:tw-no-underline\n      \"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-bg-white': 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"],"names":["tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","props","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;iBAoDQA,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,MACpBC,EAAM,UAAUJ,EAAU,KAClC,GAEKK,IAAKF,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASE,EAAQC,GAAkB;AACjC,MAAIH,EAAM,YAIVL,EAAaQ,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUL,EAAS,MAAM,YAAYC,EAAM,KAAK,EAAE;AAExD,IAAAK,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUR,EAAY,SAAS,CAAC,SAAS,eAAeM,EAAQ,KAAK,KAEhGG,EAAO,KAAK,yBAAyBP,EAAM,KAAK,kJAAkJI,EAAQ,KAAK,iDAAiD;AAAA,IAClQ,CACD;AAEK,UAAAI,IAAwBT,EAAS,MACjCC,EAAM,MAAMA,EAAM,kBACbS,EAAOT,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfS,EAAOT,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang-69d1b046.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 } 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 = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | 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 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(`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  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=\"\n        tw-flex\n        tw-cursor-pointer\n        tw-items-center\n        tw-justify-center\n        tw-whitespace-nowrap\n        tw-border-solid\n        tw-py-1.5\n        tw-text-sm\n        tw-font-medium\n        hover:tw-no-underline\n      \"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-bg-white': 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"],"names":["tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","props","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;iBAoDQA,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,MACpBC,EAAM,UAAUJ,EAAU,KAClC,GAEKK,IAAKF,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASE,EAAQC,GAAkB;AACjC,MAAIH,EAAM,YAIVL,EAAaQ,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUL,EAAS,MAAM,YAAYC,EAAM,KAAK,EAAE;AAExD,IAAAK,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUR,EAAY,SAAS,CAAC,SAAS,eAAeM,EAAQ,KAAK,KAEhGG,EAAO,KAAK,yBAAyBP,EAAM,KAAK,kJAAkJI,EAAQ,KAAK,iDAAiD;AAAA,IAClQ,CACD;AAEK,UAAAI,IAAwBT,EAAS,MACjCC,EAAM,MAAMA,EAAM,kBACbS,EAAOT,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfS,EAAOT,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Table.js

@@ -9,7 +9,7 @@ import N from "./EmptyState.js";
 import D from "./Loading.js";
 import h from "./TableCell.js";
 import E from "./TableRow.js";
-import { T as I } from "./Table.keys-1ebe4ecb.js";
+import { T as I } from "./Table.keys-75e99266.js";
 import { S as V } from "./misc-d0eec261.js";
 import "./locale.js";
 import "lodash-es/get";
@@ -24,7 +24,7 @@ import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
 import "./Button.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
-import "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import "./Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js";
 var A = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(A || {}), O = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(O || {});
 const J = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separate" }, ut = /* @__PURE__ */ T({
   __name: "Table",

package/dist/{Table.keys-1ebe4ecb.js → Table.keys-75e99266.js}

@@ -1,11 +1,11 @@
-const o = "_root_1la2u_2", t = {
+const o = "_root_jdd28_2", t = {
   root: o,
-  "layout--scroll": "_layout--scroll_1la2u_6",
-  "has-actions": "_has-actions_1la2u_12",
-  "layout--stack": "_layout--stack_1la2u_16",
-  "is-control": "_is-control_1la2u_28",
-  "root--density-comfortable": "_root--density-comfortable_1la2u_52"
-}, _ = "_root_10hu1_2", l = {
+  "layout--scroll": "_layout--scroll_jdd28_6",
+  "has-actions": "_has-actions_jdd28_12",
+  "layout--stack": "_layout--stack_jdd28_16",
+  "is-control": "_is-control_jdd28_28",
+  "root--density-comfortable": "_root--density-comfortable_jdd28_52"
+}, _ = "_root_10hu1_2", e = {
   root: _,
   "is-expandable": "_is-expandable_10hu1_9",
   "root--hidden-divider": "_root--hidden-divider_10hu1_14",
@@ -16,12 +16,12 @@ const o = "_root_1la2u_2", t = {
   "row-control-cell": "_row-control-cell_10hu1_62",
   "row-expansion-content": "_row-expansion-content_10hu1_73",
   "row-expansion": "_row-expansion_10hu1_73"
-}, a = Object.freeze({
+}, s = Object.freeze({
   key: Symbol("TABLE_INJECTION_KEY")
 });
 export {
-  a as T,
-  l as a,
+  s as T,
+  e as a,
   t as s
 };
-//# sourceMappingURL=Table.keys-1ebe4ecb.js.map
+//# sourceMappingURL=Table.keys-75e99266.js.map

package/dist/{Table.keys-1ebe4ecb.js.map → Table.keys-75e99266.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Table.keys-1ebe4ecb.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":";;;;;;;;;;;;;;;;;;GAGaA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}
+{"version":3,"file":"Table.keys-75e99266.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":";;;;;;;;;;;;;;;;;;GAGaA,IAA6C,OAAO,OAAO;AAAA,EACtE,KAAK,OAAO,qBAAqB;AACnC,CAAC;"}

package/dist/TableCell.js

@@ -7,7 +7,7 @@ import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as y, s as C } from "./Table.keys-1ebe4ecb.js";
+import { T as y, s as C } from "./Table.keys-75e99266.js";
 import "@leaflink/snitch";
 import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";

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: var(--border-radius);\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(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.row-toggle-expansion-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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: var(--border-radius);\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(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.stash-table-row__toggle-expansion-cell)) {\n      padding-left: 24px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderCell.js

@@ -6,7 +6,7 @@ import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d
 import "lodash-es/get";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as q } from "./Table.keys-1ebe4ecb.js";
+import { T as q } from "./Table.keys-75e99266.js";
 import "lodash-es/uniqueId";
 import "@leaflink/snitch";
 import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";

package/dist/TableHeaderRow.js

@@ -8,7 +8,7 @@ import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
-import { T as R } from "./Table.keys-1ebe4ecb.js";
+import { T as R } from "./Table.keys-75e99266.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import m from "./TableHeaderCell.js";
 import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";

package/dist/TableRow.js

@@ -1,9 +1,9 @@
-import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as g, watch as q, openBlock as p, createElementBlock as k, Fragment as z, createElementVNode as F, mergeProps as y, unref as e, createBlock as C, normalizeClass as c, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as S } from "vue";
+import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as k, watch as q, openBlock as c, createElementBlock as g, Fragment as z, createElementVNode as F, mergeProps as y, unref as e, createBlock as C, normalizeClass as p, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as S } from "vue";
 import J from "lodash-es/uniqueId";
-import { t as f } from "./locale.js";
+import { t as b } from "./locale.js";
 import L from "./Checkbox.js";
 import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
-import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-b6a57ae9.js";
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
@@ -11,7 +11,7 @@ import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
 import T from "./TableCell.js";
-import { T as G, a as H } from "./Table.keys-1ebe4ecb.js";
+import { T as G, a as H } from "./Table.keys-75e99266.js";
 import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
@@ -30,93 +30,94 @@ const Q = /* @__PURE__ */ A({
     isSelectDisabled: { type: Boolean, default: !1 }
   },
   emits: ["update:isSelected", "update:isExpanded"],
-  setup(B, { emit: b }) {
+  setup(B, { emit: f }) {
     const n = B, h = D(), t = M(), i = V(), E = j(G.key);
     if (!E)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E, a = P(n.isExpanded), s = g(() => $ && !!i.expansion), I = g(() => {
-      var l;
-      let o = ((l = i.default) == null ? void 0 : l.call(i, { toggleExpand: d }).length) ?? 0;
-      return u.value && (o += 1), s.value && !v.value && (o += 1), o;
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E, o = P(n.isExpanded), l = k(() => $ && !!i.expansion), I = k(() => {
+      var s;
+      let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: d }).length) ?? 0;
+      return u.value && (a += 1), l.value && !v.value && (a += 1), a;
     }), _ = J("table-row-");
-    function d(o) {
-      if (!s.value)
+    function d(a) {
+      if (!l.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
-      const l = typeof o == "boolean" ? o : !a.value;
-      a.value = l, b("update:isExpanded", l);
+      const s = typeof a == "boolean" ? a : !o.value;
+      o.value = s, f("update:isExpanded", s);
     }
     return q(
       () => n.isExpanded,
       () => d(n.isExpanded)
-    ), (o, l) => (p(), k(z, null, [
+    ), (a, s) => (c(), g(z, null, [
       F("tr", y({
         class: ["stash-table-row", [
           e(t).root,
           e(t)[`layout--${e(r)}`],
           {
-            [e(t)["is-expandable"]]: s.value,
-            [e(t)["is-expanded"]]: a.value,
-            [e(t)["root--hidden-divider"]]: o.hideExpansionDivider,
+            [e(t)["is-expandable"]]: l.value,
+            [e(t)["is-expanded"]]: o.value,
+            [e(t)["root--hidden-divider"]]: a.hideExpansionDivider,
             "tw-p-gutter": e(r) === "stack",
-            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(r) === "stack" && !s.value,
+            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(r) === "stack" && !l.value,
             "tw-pt-[60px]": e(R) && e(r) === "stack" && !e(u)
           }
         ]],
         "data-test": "stash-table-row"
       }, e(h)), [
-        e(u) ? (p(), C(T, {
+        e(u) ? (c(), C(T, {
           key: 0,
           "is-control": "",
-          class: c(["stash-table-row__selection-cell tw-min-w-[48px]", e(t)["row-control-cell"]])
+          class: p(["stash-table-row__selection-cell tw-min-w-[48px]", e(t)["row-control-cell"]]),
+          "data-test": "stash-table-row|selection-cell"
         }, {
           default: m(() => [
             w(L, {
-              class: c(e(t)["row-selection-checkbox"]),
+              class: p(e(t)["row-selection-checkbox"]),
               checked: n.isSelected,
               disabled: n.isSelectDisabled,
-              title: e(f)("ll.select.self"),
-              "onUpdate:checked": l[0] || (l[0] = (N) => b("update:isSelected", N))
+              title: e(b)("ll.select.self"),
+              "onUpdate:checked": s[0] || (s[0] = (N) => f("update:isSelected", N))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
         }, 8, ["class"])) : x("", !0),
-        s.value && !e(v) ? (p(), C(T, {
+        l.value && !e(v) ? (c(), C(T, {
           key: 1,
-          class: c(["row-toggle-expansion-cell tw-px-0", e(t)["row-control-cell"]]),
-          "data-test": "table-row-toggle-expansion-cell",
+          class: p(["stash-table-row__toggle-expansion-cell tw-px-0", e(t)["row-control-cell"]]),
+          "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
           default: m(() => [
             w(O, {
               "aria-controls": e(_),
-              "aria-label": a.value ? e(f)("ll.table.collapseRow") : e(f)("ll.table.expandRow"),
-              direction: a.value ? "up" : "down",
-              "is-expanded": a.value,
+              "aria-label": o.value ? e(b)("ll.table.collapseRow") : e(b)("ll.table.expandRow"),
+              direction: o.value ? "up" : "down",
+              "is-expanded": o.value,
               onClick: d
             }, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
           ]),
           _: 1
         }, 8, ["class"])) : x("", !0),
-        S(o.$slots, "default", {
-          isRowExpanded: a.value,
+        S(a.$slots, "default", {
+          isRowExpanded: o.value,
           toggleExpand: d
         })
       ], 16),
-      s.value ? (p(), k("tr", y({
+      l.value ? (c(), g("tr", y({
         key: 0,
-        class: ["stash-table-row stash-table-row-expansion", e(t)["row-expansion"]],
+        class: ["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]],
         "data-test": "stash-table-row"
       }, e(h)), [
         w(U, {
           is: "td",
           id: e(_),
-          class: c(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(t)["row-expansion-content"]]),
-          "data-test": "table-row-expansion-cell",
+          class: p(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(t)["row-expansion-content"]]),
+          "data-test": "stash-table-row|expansion-cell",
           colspan: I.value,
-          "is-expanded": a.value
+          "is-expanded": o.value
         }, {
           default: m(() => [
-            S(o.$slots, "expansion")
+            S(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])

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, useSlots, watch } from 'vue';\n\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\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  });\n\n  const emit =\n    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 = useSlots();\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 && !!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      },\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    >\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=\"row-toggle-expansion-cell tw-px-0\"\n      data-test=\"table-row-toggle-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  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row-expansion\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\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=\"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: var(--border-radius);\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: var(--ll-space-3);\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: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    margin-bottom: var(--ll-space-3);\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":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,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,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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, useSlots, watch } from 'vue';\n\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\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  });\n\n  const emit =\n    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 = useSlots();\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 && !!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      },\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  </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\"\n    v-bind=\"attrs\"\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: var(--border-radius);\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: var(--ll-space-3);\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: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    margin-bottom: var(--ll-space-3);\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":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,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,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
-import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
+import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 import { _ as r } from "./_plugin-vue_export-helper-dad06003.js";
 import "vue";
 import "lodash-es/debounce";

package/dist/{Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js → Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js}

@@ -1,16 +1,16 @@
-import { defineComponent as z, useCssModule as U, ref as r, computed as b, provide as V, onMounted as j, onUpdated as J, onDeactivated as R, onBeforeUnmount as q, openBlock as k, createElementBlock as F, createElementVNode as f, normalizeStyle as K, normalizeClass as I, renderSlot as L, createBlock as W, withCtx as A, unref as p, createTextVNode as Y, toDisplayString as G, createVNode as H, createCommentVNode as P } from "vue";
+import { defineComponent as z, useCssModule as U, ref as a, computed as b, provide as V, onMounted as j, onUpdated as J, onDeactivated as R, onBeforeUnmount as q, openBlock as k, createElementBlock as F, createElementVNode as f, normalizeStyle as K, normalizeClass as I, renderSlot as L, createBlock as W, withCtx as A, unref as p, createTextVNode as Y, toDisplayString as G, createVNode as H, createCommentVNode as P } from "vue";
 import Q from "lodash-es/debounce";
 import X from "lodash-es/uniqueId";
 import { DEBOUNCE as Z } from "./constants.js";
 import { t as ee } from "./locale.js";
 import te from "./Dropdown.js";
 import oe from "./Icon.js";
-const ae = Object.freeze({
+const re = Object.freeze({
   key: Symbol("TABS_INJECTION_KEY")
 });
 var N = /* @__PURE__ */ ((s) => (s.Line = "line", s.Enclosed = "enclosed", s))(N || {});
-const re = {
-  class: "root stash-tabs tw-relative",
+const ae = {
+  class: "stash-tabs tw-relative",
   role: "tabList",
   "data-test": "stash-tabs"
 }, se = ["aria-controls", "aria-expanded", "onClick"], ie = ["id"], be = /* @__PURE__ */ z({
@@ -21,7 +21,7 @@ const re = {
   },
   emits: ["update:activeTab"],
   setup(s, { emit: O }) {
-    const d = s, D = U(), l = r(), c = r(), i = r(void 0), M = "IntersectionObserver" in window, a = r(/* @__PURE__ */ new Set()), m = r(0), h = r(), _ = X("more-dropdown-menu-"), u = r(!1), E = b({
+    const d = s, D = U(), l = a(), c = a(), i = a(void 0), M = "IntersectionObserver" in window, r = a(/* @__PURE__ */ new Set()), m = a(0), h = a(), E = X("more-dropdown-menu-"), u = a(!1), g = b({
       get() {
         return d.activeTab;
       },
@@ -30,18 +30,18 @@ const re = {
       }
     });
     function B(t) {
-      E.value = t;
+      g.value = t;
     }
-    V(ae.key, {
-      activeTab: b(() => E.value),
+    V(re.key, {
+      activeTab: b(() => g.value),
       variant: b(() => d.variant),
       setActiveTab: B
     });
-    function g() {
+    function y() {
       var w, C, T;
       if (!M || !l.value)
         return;
-      const t = Array.from((w = l.value) == null ? void 0 : w.children), y = {
+      const t = Array.from((w = l.value) == null ? void 0 : w.children), _ = {
         root: l.value,
         rootMargin: "0px",
         threshold: Array.from({ length: 100 }).map((e, o) => (o + 1) / 100)
@@ -49,17 +49,17 @@ const re = {
       if (i.value = new IntersectionObserver((e) => {
         e.forEach((o) => {
           const n = o.target.getAttribute("id");
-          o.intersectionRatio > 0.94 ? a.value.has(n) && a.value.delete(n) : n && !a.value.has(n) && a.value.add(n);
+          o.intersectionRatio > 0.94 ? r.value.has(n) && r.value.delete(n) : n && !r.value.has(n) && r.value.add(n);
         });
-      }, y), t.forEach((e) => {
+      }, _), t.forEach((e) => {
         var o;
-        (o = i.value) == null || o.observe(e), a.value.has(e.getAttribute("id")) ? e.classList.add("tw-invisible") : e.classList.remove("tw-invisible");
+        (o = i.value) == null || o.observe(e), r.value.has(e.getAttribute("id")) ? e.classList.add("tw-invisible") : e.classList.remove("tw-invisible");
       }), m.value = (T = (C = h.value) == null ? void 0 : C.$el) == null ? void 0 : T.getBoundingClientRect().width, !c.value)
         return;
       Array.from(c.value.children).forEach((e) => {
         const o = e.firstElementChild;
         o.className = "", e.className = "", e.classList.add(
-          D["tabs__overflowed-tab"],
+          D["menu-tab"],
           "tw-rounded",
           "tw-text-sm",
           "tw-p-1.5",
@@ -75,16 +75,16 @@ const re = {
           "aria-disabled:hover:tw-cursor-default",
           "aria-selected:tw-text-white",
           "aria-selected:tw-bg-blue-500"
-        ), a.value.has(e.getAttribute("id")) ? e.classList.remove("tw-hidden") : e.classList.add("tw-hidden"), e.removeEventListener("click", () => {
+        ), r.value.has(e.getAttribute("id")) ? e.classList.remove("tw-hidden") : e.classList.add("tw-hidden"), e.removeEventListener("click", () => {
         });
       });
     }
-    const S = Q(g, Z.FAST, { leading: !0 });
+    const S = Q(y, Z.FAST, { leading: !0 });
     function v() {
       i.value && (i.value.disconnect(), i.value = void 0);
     }
     j(() => {
-      g();
+      y();
     }), J(() => {
       v(), S();
     }), R(() => {
@@ -95,7 +95,7 @@ const re = {
     function $(t) {
       t(), u.value = !u.value;
     }
-    return (t, y) => (k(), F("div", re, [
+    return (t, _) => (k(), F("div", ae, [
       f("ul", {
         ref_key: "tabListEl",
         ref: l,
@@ -109,7 +109,7 @@ const re = {
         }])
       }, [
         L(t.$slots, "default"),
-        a.value.size ? (k(), W(te, {
+        r.value.size ? (k(), W(te, {
           key: 0,
           ref_key: "moreDropdownEl",
           ref: h,
@@ -118,7 +118,7 @@ const re = {
           toggle: A(({ toggle: x }) => [
             f("button", {
               "aria-haspopup": "menu",
-              "aria-controls": p(_),
+              "aria-controls": p(E),
               "aria-expanded": u.value,
               class: I(["tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700", { "tw-border-t-4 tw-border-transparent": d.variant === "enclosed" }]),
               type: "button",
@@ -130,10 +130,10 @@ const re = {
           ]),
           default: A(() => [
             f("ul", {
-              id: p(_),
+              id: p(E),
               ref_key: "moreDropdownMenuEl",
               ref: c,
-              class: "tabs__dropdown-list tw-space-y-1.5 tw-px-1.5 tw-pb-1.5",
+              class: "tw-space-y-1.5 tw-px-1.5 tw-pb-1.5",
               role: "menu"
             }, [
               L(t.$slots, "default")
@@ -145,12 +145,12 @@ const re = {
     ]));
   }
 }), fe = {
-  "tabs__overflowed-tab": "_tabs__overflowed-tab_luaul_2"
+  "menu-tab": "_menu-tab_frbn6_2"
 };
 export {
-  ae as T,
+  re as T,
   be as _,
   N as a,
   fe as s
 };
-//# sourceMappingURL=Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js.map
+//# sourceMappingURL=Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js.map

package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, Ref, ref, useCssModule } from 'vue';\n\n  import { DEBOUNCE } from '../../constants';\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit =\n    defineEmits<{\n      (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n    }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n  const classes = useCssModule();\n\n  const tabListEl = ref();\n  const moreDropdownMenuEl = ref();\n  const observer: Ref<IntersectionObserver | undefined> = ref(undefined);\n  const hasIntersectionObserver = 'IntersectionObserver' in window;\n  const overflowIds = ref<Set<string>>(new Set());\n  const moreDropdownWidth = ref(0);\n  const moreDropdownEl = ref<InstanceType<typeof Dropdown>>();\n  const moreMenuId = uniqueId('more-dropdown-menu-');\n  const isMoreMenuOpen = ref(false);\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  function initObserve() {\n    if (!hasIntersectionObserver) {\n      return;\n    }\n\n    if (!tabListEl.value) {\n      return;\n    }\n\n    const tabs = Array.from(tabListEl.value?.children as HTMLLIElement[]);\n    const options = {\n      root: tabListEl.value,\n      rootMargin: '0px',\n      threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n    };\n\n    observer.value = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        const dataId = entry.target.getAttribute('id') as string;\n        /**\n         * Check for partial intersection.\n         * Zooming out can result in ratio of approx 0.984\n         * Anything higher will result in nav items disappearing\n         */\n        if (entry.intersectionRatio > 0.94) {\n          // show tab, hide in dropdown\n          if (overflowIds.value.has(dataId)) {\n            overflowIds.value.delete(dataId);\n          }\n        } else {\n          // hide tab, show in dropdown\n          if (dataId && !overflowIds.value.has(dataId)) {\n            overflowIds.value.add(dataId);\n          }\n        }\n      });\n    }, options);\n\n    tabs.forEach((element) => {\n      observer.value?.observe(element);\n      if (overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-invisible');\n      } else {\n        element.classList.remove('tw-invisible');\n      }\n    });\n\n    moreDropdownWidth.value = moreDropdownEl.value?.$el?.getBoundingClientRect().width;\n\n    if (!moreDropdownMenuEl.value) {\n      return;\n    }\n\n    const dropdownList = Array.from(moreDropdownMenuEl.value.children as HTMLLIElement[]);\n    dropdownList.forEach((element) => {\n      const firstElementChild = element.firstElementChild as Element;\n      firstElementChild.className = '';\n      element.className = '';\n\n      element.classList.add(\n        classes['menu-tab'],\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:tw-text-white',\n        'hover:tw-bg-blue-500',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-text-white',\n        'aria-selected:tw-bg-blue-500',\n      );\n\n      if (!overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-hidden');\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      element.removeEventListener('click', () => {});\n    });\n  }\n\n  const debouncedInitObserve = debounce(initObserve, DEBOUNCE.FAST, { leading: true });\n\n  function destroyObserver() {\n    if (observer.value) {\n      observer.value.disconnect();\n      observer.value = undefined;\n    }\n  }\n\n  onMounted(() => {\n    initObserve();\n  });\n\n  onUpdated(() => {\n    destroyObserver();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    destroyObserver();\n  });\n\n  onBeforeUnmount(() => {\n    destroyObserver();\n  });\n\n  function onMoreClick(toggleMoreDropdown) {\n    toggleMoreDropdown();\n    isMoreMenuOpen.value = !isMoreMenuOpen.value;\n  }\n</script>\n\n<template>\n  <div class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <ul\n      ref=\"tabListEl\"\n      :style=\"{\n        width: `calc(100% - ${moreDropdownWidth}px)`,\n      }\"\n      class=\"stash-tabs-list tw-flex tw-items-end tw-overflow-hidden\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <slot></slot>\n\n      <Dropdown v-if=\"overflowIds.size\" ref=\"moreDropdownEl\" class=\"!tw-absolute tw-right-0 tw-top-0\">\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-controls=\"moreMenuId\"\n            :aria-expanded=\"isMoreMenuOpen\"\n            class=\"\n              tw-flex\n              tw-cursor-pointer\n              tw-items-center\n              tw-justify-center\n              tw-border-solid\n              tw-px-6\n              tw-py-1.5\n              tw-text-sm\n              tw-font-medium\n              tw-text-blue-500\n              hover:tw-text-blue-700\n            \"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"onMoreClick(toggle)\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n        <template #default>\n          <ul :id=\"moreMenuId\" ref=\"moreDropdownMenuEl\" class=\"tw-space-y-1.5 tw-px-1.5 tw-pb-1.5\" role=\"menu\">\n            <slot></slot>\n          </ul>\n        </template>\n      </Dropdown>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .menu-tab > a {\n    /* prevents the global link styles to overwrite the overflowed tab styles */\n    &,\n    &:hover,\n    &:focus {\n      color: inherit;\n    }\n  }\n</style>\n"],"names":["TABS_INJECTION","TabVariant","classes","useCssModule","tabListEl","ref","moreDropdownMenuEl","observer","hasIntersectionObserver","overflowIds","moreDropdownWidth","moreDropdownEl","moreMenuId","uniqueId","isMoreMenuOpen","currentActiveTab","computed","props","nv","emit","setActiveTab","newTabValue","provide","initObserve","tabs","_a","options","v","i","entries","entry","dataId","element","_c","_b","firstElementChild","debouncedInitObserve","debounce","DEBOUNCE","destroyObserver","onMounted","onUpdated","onDeactivated","onBeforeUnmount","onMoreClick","toggleMoreDropdown"],"mappings":";;;;;;;AAGa,MAAAA,KAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHW,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;iBCoCJC,IAAUC,KAEVC,IAAYC,KACZC,IAAqBD,KACrBE,IAAkDF,EAAI,MAAS,GAC/DG,IAA0B,0BAA0B,QACpDC,IAAcJ,EAAqB,oBAAA,IAAK,CAAA,GACxCK,IAAoBL,EAAI,CAAC,GACzBM,IAAiBN,KACjBO,IAAaC,EAAS,qBAAqB,GAC3CC,IAAiBT,EAAI,EAAK,GAE1BU,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOC,EAAM;AAAA,MACf;AAAA,MACA,IAAIC,GAA4B;AAC9B,QAAAC,EAAK,oBAAoBD,CAAE;AAAA,MAC7B;AAAA,IAAA,CACD;AAED,aAASE,EAAaC,GAAqC;AACzD,MAAAN,EAAiB,QAAQM;AAAA,IAC3B;AAEA,IAAAC,EAAQtB,GAAe,KAAK;AAAA,MAC1B,WAAWgB,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,cAAAG;AAAA,IAAA,CACD;AAED,aAASG,IAAc;;AAKjB,UAJA,CAACf,KAID,CAACJ,EAAU;AACb;AAGF,YAAMoB,IAAO,MAAM,MAAKC,IAAArB,EAAU,UAAV,gBAAAqB,EAAiB,QAA2B,GAC9DC,IAAU;AAAA,QACd,MAAMtB,EAAU;AAAA,QAChB,YAAY;AAAA,QACZ,WAAW,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,EAAE,IAAI,CAACuB,GAAGC,OAAOA,IAAI,KAAK,GAAG;AAAA,MAAA;AAoChE,UAjCJrB,EAAS,QAAQ,IAAI,qBAAqB,CAACsB,MAAY;AAC7C,QAAAA,EAAA,QAAQ,CAACC,MAAU;AACzB,gBAAMC,IAASD,EAAM,OAAO,aAAa,IAAI;AAMzC,UAAAA,EAAM,oBAAoB,OAExBrB,EAAY,MAAM,IAAIsB,CAAM,KAClBtB,EAAA,MAAM,OAAOsB,CAAM,IAI7BA,KAAU,CAACtB,EAAY,MAAM,IAAIsB,CAAM,KAC7BtB,EAAA,MAAM,IAAIsB,CAAM;AAAA,QAEhC,CACD;AAAA,SACAL,CAAO,GAELF,EAAA,QAAQ,CAACQ,MAAY;;AACf,SAAAP,IAAAlB,EAAA,UAAA,QAAAkB,EAAO,QAAQO,IACpBvB,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW,IACpDA,EAAA,UAAU,IAAI,cAAc,IAE5BA,EAAA,UAAU,OAAO,cAAc;AAAA,MACzC,CACD,GAEDtB,EAAkB,SAAQuB,KAAAC,IAAAvB,EAAe,UAAf,gBAAAuB,EAAsB,QAAtB,gBAAAD,EAA2B,wBAAwB,OAEzE,CAAC3B,EAAmB;AACtB;AAIW,MADQ,MAAM,KAAKA,EAAmB,MAAM,QAA2B,EACvE,QAAQ,CAAC0B,MAAY;AAChC,cAAMG,IAAoBH,EAAQ;AAClC,QAAAG,EAAkB,YAAY,IAC9BH,EAAQ,YAAY,IAEpBA,EAAQ,UAAU;AAAA,UAChB9B,EAAQ,UAAU;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,GAGGO,EAAY,MAAM,IAAIuB,EAAQ,aAAa,IAAI,CAAW,IAGrDA,EAAA,UAAU,OAAO,WAAW,IAF5BA,EAAA,UAAU,IAAI,WAAW,GAK3BA,EAAA,oBAAoB,SAAS,MAAM;AAAA,QAAA,CAAE;AAAA,MAAA,CAC9C;AAAA,IACH;AAEM,UAAAI,IAAuBC,EAASd,GAAae,EAAS,MAAM,EAAE,SAAS,IAAM;AAEnF,aAASC,IAAkB;AACzB,MAAIhC,EAAS,UACXA,EAAS,MAAM,cACfA,EAAS,QAAQ;AAAA,IAErB;AAEA,IAAAiC,EAAU,MAAM;AACF,MAAAjB;IAAA,CACb,GAEDkB,EAAU,MAAM;AACE,MAAAF,KACKH;IAAA,CACtB,GAEDM,EAAc,MAAM;AACF,MAAAH;IAAA,CACjB,GAEDI,EAAgB,MAAM;AACJ,MAAAJ;IAAA,CACjB;AAED,aAASK,EAAYC,GAAoB;AACpB,MAAAA,KACJ/B,EAAA,QAAQ,CAACA,EAAe;AAAA,IACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}