@leaflink/stash 51.10.0 → 51.11.1

package/dist/TableRow.js

@@ -1,12 +1,12 @@
-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, createElementBlock as w, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as p, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as n, withCtx as x, createVNode as _ } 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, createElementBlock as x, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as E, renderSlot as y, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
 import L from "lodash-es/uniqueId";
-import { t as b } from "./locale.js";
+import { t as h } from "./locale.js";
 import O from "./Checkbox.js";
 import { _ as U } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
 import { _ as G } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
 import "lodash-es/cloneDeep";
 import "./DataView.keys-aSOnA4AD.js";
-import "./Illustration.vue_vue_type_script_setup_true_lang-BVzzNsRt.js";
+import "./Illustration.vue_vue_type_script_setup_true_lang-BrqEF8xe.js";
 import g from "./TableCell.js";
 import { T as H } from "./Table.keys-LHQf6FEH.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
@@ -22,82 +22,83 @@ const Q = /* @__PURE__ */ A({
   },
   emits: ["update:isSelected", "update:isExpanded"],
   setup(S, { emit: T }) {
-    const t = S, h = T, B = D(), o = M(), m = V(), f = j(H.key);
+    const t = S, m = T, B = D(), o = M(), i = V(), f = j(H.key);
     if (!f)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: i } = f, l = P(t.isExpanded), s = k(() => $.value && !!m.expansion), I = k(() => {
-      let a = m.default?.({ toggleExpand: d }).length ?? 0;
-      return u.value && (a += 1), s.value && !v.value && (a += 1), a;
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: w, layout: d } = f, l = P(t.isExpanded), n = k(() => $.value && !!i.expansion), I = k(() => {
+      var s;
+      let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
+      return w.value && (a += 1), n.value && !v.value && (a += 1), a;
     }), C = L("table-row-");
-    function d(a) {
-      if (!s.value)
+    function p(a) {
+      if (!n.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
-      const c = typeof a == "boolean" ? a : !l.value;
-      l.value = c, h("update:isExpanded", c);
+      const s = typeof a == "boolean" ? a : !l.value;
+      l.value = s, m("update:isExpanded", s);
     }
     return q(
       () => t.isExpanded,
-      () => d(t.isExpanded)
-    ), (a, c) => (r(), w(z, null, [
+      () => p(t.isExpanded)
+    ), (a, s) => (r(), x(z, null, [
       F("tr", J({
         class: ["stash-table-row", [
           e(o).root,
-          e(o)[`layout--${e(i)}`],
+          e(o)[`layout--${e(d)}`],
           {
-            [e(o)["is-expandable"]]: s.value,
+            [e(o)["is-expandable"]]: n.value,
             [e(o)["is-expanded"]]: l.value,
             [e(o)["root--hidden-divider"]]: a.hideExpansionDivider,
-            "tw-p-gutter": e(i) === "stack",
-            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(i) === "stack" && !s.value,
-            "tw-pt-[60px]": e(R) && e(i) === "stack" && !e(u),
+            "tw-p-gutter": e(d) === "stack",
+            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(d) === "stack" && !n.value,
+            "tw-pt-[60px]": e(R) && e(d) === "stack" && !e(w),
             "stash-table-row--accent": t.accentColor,
             "tw-relative": t.accentColor
           }
         ]],
         "data-test": "stash-table-row"
       }, e(B)), [
-        e(u) ? (r(), E(g, {
+        e(w) ? (r(), E(g, {
           key: 0,
           "is-control": "",
-          class: n(["stash-table-row__selection-cell tw-min-w-[48px]", e(o)["row-control-cell"]]),
+          class: c(["stash-table-row__selection-cell tw-min-w-[48px]", e(o)["row-control-cell"]]),
           "data-test": "stash-table-row|selection-cell"
         }, {
-          default: x(() => [
-            _(O, {
-              class: n(e(o)["row-selection-checkbox"]),
+          default: _(() => [
+            b(O, {
+              class: c(e(o)["row-selection-checkbox"]),
               checked: t.isSelected,
               disabled: t.isSelectDisabled,
-              title: e(b)("ll.select.self"),
-              "onUpdate:checked": c[0] || (c[0] = (N) => h("update:isSelected", N))
+              title: e(h)("ll.select.self"),
+              "onUpdate:checked": s[0] || (s[0] = (N) => m("update:isSelected", N))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
-        }, 8, ["class"])) : p("", !0),
-        s.value && !e(v) ? (r(), E(g, {
+        }, 8, ["class"])) : u("", !0),
+        n.value && !e(v) ? (r(), E(g, {
           key: 1,
-          class: n(["stash-table-row__toggle-expansion-cell tw-px-0", e(o)["row-control-cell"]]),
+          class: c(["stash-table-row__toggle-expansion-cell tw-px-0", e(o)["row-control-cell"]]),
           "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
-          default: x(() => [
-            _(U, {
+          default: _(() => [
+            b(U, {
               "aria-controls": e(C),
-              "aria-label": l.value ? e(b)("ll.table.collapseRow") : e(b)("ll.table.expandRow"),
+              "aria-label": l.value ? e(h)("ll.table.collapseRow") : e(h)("ll.table.expandRow"),
               direction: l.value ? "up" : "down",
               "is-expanded": l.value,
-              onClick: d
+              onClick: p
             }, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
           ]),
           _: 1
-        }, 8, ["class"])) : p("", !0),
+        }, 8, ["class"])) : u("", !0),
         y(a.$slots, "default", {
           isRowExpanded: l.value,
-          toggleExpand: d
+          toggleExpand: p
         }),
-        t.accentColor ? (r(), w("div", {
+        t.accentColor ? (r(), x("div", {
           key: 2,
           "data-test": "stash-table-row|accent",
-          class: n({
+          class: c({
             "tw-absolute": t.accentColor,
             [`tw-bg-${t.accentColor}`]: t.accentColor,
             "tw-block": t.accentColor,
@@ -106,27 +107,27 @@ const Q = /* @__PURE__ */ A({
             "tw-top-0": t.accentColor,
             "tw-left-0": t.accentColor
           })
-        }, null, 2)) : p("", !0)
+        }, null, 2)) : u("", !0)
       ], 16),
-      s.value ? (r(), w("tr", {
+      n.value ? (r(), x("tr", {
         key: 0,
-        class: n(["stash-table-row stash-table-row--expandable", e(o)["row-expansion"]]),
+        class: c(["stash-table-row stash-table-row--expandable", e(o)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
-        _(G, {
+        b(G, {
           is: "td",
           id: e(C),
-          class: n(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(o)["row-expansion-content"]]),
+          class: c(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(o)["row-expansion-content"]]),
           "data-test": "stash-table-row|expansion-cell",
           colspan: I.value,
           "is-expanded": l.value
         }, {
-          default: x(() => [
+          default: _(() => [
             y(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])
-      ], 2)) : p("", !0)
+      ], 2)) : u("", !0)
     ], 64));
   }
 }), W = "_root_1h1vo_2", X = {

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","toggleExpand","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","hideExpansionDivider","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.vue.d.ts

@@ -1,27 +1,68 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<TableRowProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:isSelected": (isChecked: boolean | (string | number)[]) => any;
-"update:isExpanded": (isExpanded: boolean) => any;
-}, string, PublicProps, Readonly<TableRowProps> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
+/**
+* If true, hides the divider between the parent row and expansion row
+*/
+hideExpansionDivider: boolean;
+isExpanded: boolean;
+isSelected: boolean;
+isSelectDisabled: boolean;
+accentColor: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:isSelected": (isChecked: boolean | (string | number)[]) => void;
+"update:isExpanded": (isExpanded: boolean) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
+/**
+* If true, hides the divider between the parent row and expansion row
+*/
+hideExpansionDivider: boolean;
+isExpanded: boolean;
+isSelected: boolean;
+isSelectDisabled: boolean;
+accentColor: undefined;
+}>>> & Readonly<{
 "onUpdate:isSelected"?: ((isChecked: boolean | (string | number)[]) => any) | undefined;
 "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
 }>, {
-accentColor: "ice-700" | "white" | "black" | "red-500" | "orange-500" | "blue-500" | "green-500" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-100" | "red-700" | "red-100" | "ice-500" | "ice-200" | "ice-100";
 isExpanded: boolean;
 isSelected: boolean;
+accentColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
 hideExpansionDivider: boolean;
 isSelectDisabled: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, Readonly<{
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<{
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
@@ -77,7 +118,7 @@ declare enum StashCommonColors {
     Black = "black"
 }
 
-declare interface TableRowProps {
+export declare interface TableRowProps {
     hideExpansionDivider?: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-Dprx064Y.js";
-import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-Dprx064Y.js";
+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 a } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const t = {
   "menu-tab": "_menu-tab_frbn6_2"

package/dist/Tabs.vue.d.ts

@@ -1,27 +1,32 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProperties } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentInternalInstance } from 'vue';
-import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
-import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
-import { DropdownOffset } from '../Dropdown/Dropdown.vue';
-import { DropdownProps } from '../Dropdown/Dropdown.vue';
-import { GlobalComponents } from 'vue';
-import { GlobalDirectives } from 'vue';
+import { ExtractPropTypes } from 'vue';
 import { InjectionKey } from 'vue';
-import { nextTick } from 'vue';
-import { OnCleanup } from '@vue/reactivity';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { ShallowUnwrapRef } from 'vue';
-import { Slot } from 'vue';
-import { VNodeProps } from 'vue';
-import { WatchOptions } from 'vue';
-import { WatchStopHandle } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -29,113 +34,17 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<TabsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:activeTab": (newTabValue: string) => any;
-}, string, PublicProps, Readonly<TabsProps> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TabsProps>, {
+variant: TabVariant;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:activeTab": (newTabValue: string) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TabsProps>, {
+variant: TabVariant;
+}>>> & Readonly<{
 "onUpdate:activeTab"?: ((newTabValue: string) => any) | undefined;
 }>, {
 variant: "line" | "enclosed";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-tabListEl: HTMLUListElement;
-moreDropdownEl: ({
-$: ComponentInternalInstance;
-$data: {};
-$props: {
-readonly align?: "right" | "left" | undefined;
-readonly label?: string | undefined;
-readonly closeManually?: boolean | undefined;
-readonly offset?: DropdownOffset | undefined;
-readonly reattach?: boolean | undefined;
-readonly contentClass?: string | string[] | undefined;
-readonly fluidContent?: boolean | undefined;
-readonly onToggle?: ((isActive: boolean) => any) | undefined;
-readonly onDismiss?: (() => any) | undefined;
-} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
-$attrs: {
-[x: string]: unknown;
-};
-$refs: {
-[x: string]: unknown;
-} & {
-dropdownRef: HTMLDivElement;
-contentRef: HTMLDivElement;
-};
-$slots: Readonly<{
-[name: string]: Slot<any> | undefined;
-}>;
-$root: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$parent: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$host: Element | null;
-$emit: ((event: "toggle", isActive: boolean) => void) & ((event: "dismiss") => void);
-$el: HTMLDivElement;
-$options: ComponentOptionsBase<Readonly<DropdownProps> & Readonly<{
-onToggle?: ((isActive: boolean) => any) | undefined;
-onDismiss?: (() => any) | undefined;
-}>, {
-isActive: ComputedRef<boolean>;
-toggle: () => Promise<void>;
-dismiss: (event?: Event | undefined) => void;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-toggle: (isActive: boolean) => any;
-dismiss: () => any;
-}, string, {
-label: string;
-align: "right" | "left";
-offset: DropdownOffset;
-closeManually: boolean;
-reattach: boolean;
-contentClass: string | string[];
-fluidContent: boolean;
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
-beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-created?: ((() => void) | (() => void)[]) | undefined;
-beforeMount?: ((() => void) | (() => void)[]) | undefined;
-mounted?: ((() => void) | (() => void)[]) | undefined;
-beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-updated?: ((() => void) | (() => void)[]) | undefined;
-activated?: ((() => void) | (() => void)[]) | undefined;
-deactivated?: ((() => void) | (() => void)[]) | undefined;
-beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-destroyed?: ((() => void) | (() => void)[]) | undefined;
-unmounted?: ((() => void) | (() => void)[]) | undefined;
-renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
-};
-$forceUpdate: () => void;
-$nextTick: nextTick;
-$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
-} & Readonly<{
-label: string;
-align: "right" | "left";
-offset: DropdownOffset;
-closeManually: boolean;
-reattach: boolean;
-contentClass: string | string[];
-fluidContent: boolean;
-}> & Omit<Readonly<DropdownProps> & Readonly<{
-onToggle?: ((isActive: boolean) => any) | undefined;
-onDismiss?: (() => any) | undefined;
-}>, "toggle" | "dismiss" | "isActive" | ("label" | "align" | "offset" | "closeManually" | "reattach" | "contentClass" | "fluidContent")> & ShallowUnwrapRef<    {
-isActive: ComputedRef<boolean>;
-toggle: () => Promise<void>;
-dismiss: (event?: Event | undefined) => void;
-}> & {} & ComponentCustomProperties & {} & {
-$slots: {
-toggle?(_: {
-isActive: boolean;
-toggle: () => Promise<void>;
-}): any;
-default?(_: {
-dismiss: (event?: Event | undefined) => void;
-isActive: boolean;
-}): any;
-};
-}) | null;
-moreDropdownMenuEl: HTMLUListElement;
-}, HTMLDivElement>, {
-    default?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js

@@ -0,0 +1,78 @@
+import { defineComponent as f, computed as a, provide as T, createElementBlock as h, openBlock as _, createVNode as n, unref as i, normalizeClass as r, withCtx as c, createElementVNode as x, createTextVNode as y, toDisplayString as g, renderSlot as C } from "vue";
+import { t as l } from "./locale.js";
+import I from "./Icon.js";
+import N from "./MoreActions.js";
+const k = Object.freeze({
+  key: Symbol("TABS_INJECTION_KEY")
+});
+var d = /* @__PURE__ */ ((e) => (e.Line = "line", e.Enclosed = "enclosed", e))(d || {});
+const E = {
+  class: "stash-tabs tw-relative",
+  role: "tabList",
+  "data-test": "stash-tabs"
+}, A = ["aria-expanded", "onClick"], z = /* @__PURE__ */ f({
+  __name: "Tabs",
+  props: {
+    activeTab: {},
+    variant: { default: d.Line }
+  },
+  emits: ["update:activeTab"],
+  setup(e, { emit: m }) {
+    const p = m, o = e, s = a({
+      get() {
+        return o.activeTab;
+      },
+      set(t) {
+        p("update:activeTab", t);
+      }
+    });
+    function u(t) {
+      s.value = t;
+    }
+    const v = a(() => `tab-${s.value}`);
+    return T(k.key, {
+      activeTab: a(() => s.value),
+      variant: a(() => o.variant),
+      setActiveTab: u
+    }), (t, S) => (_(), h("div", E, [
+      n(N, {
+        class: r(["stash-tabs-list tw-flex tw-items-end", {
+          "stash-tabs-list--line": t.variant === "line",
+          "stash-tabs-list--enclosed": t.variant === "enclosed",
+          "tw-gap-6": t.variant === "line"
+        }]),
+        "more-button-text": i(l)("ll.more"),
+        "dropdown-mode": "custom",
+        "auto-style-dropdown-items": "",
+        "active-item-id": v.value,
+        "actions-container-class": {
+          "tw-gap-0": t.variant === "enclosed",
+          "tw-gap-6": t.variant === "line"
+        }
+      }, {
+        actions: c(() => [
+          C(t.$slots, "default")
+        ]),
+        toggle: c(({ toggle: b, isOpen: w }) => [
+          x("button", {
+            "aria-haspopup": "menu",
+            "aria-expanded": w,
+            class: r(["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": o.variant === "enclosed" }]),
+            type: "button",
+            onClick: b
+          }, [
+            y(g(i(l)("ll.more")) + " ", 1),
+            n(I, { name: "caret-down" })
+          ], 10, A)
+        ]),
+        _: 3
+      }, 8, ["class", "more-button-text", "active-item-id", "actions-container-class"])
+    ]));
+  }
+});
+export {
+  k as T,
+  z as _,
+  d as a
+};
+//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js.map

package/dist/Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.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 { computed, provide } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit = defineEmits<{\n    (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n  }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\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) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  const activeItemId = computed(() => `tab-${currentActiveTab.value}`);\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n</script>\n\n<template>\n  <div class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <MoreActions\n      class=\"stash-tabs-list tw-flex tw-items-end\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n      :more-button-text=\"t('ll.more')\"\n      dropdown-mode=\"custom\"\n      auto-style-dropdown-items\n      :active-item-id=\"activeItemId\"\n      :actions-container-class=\"{\n        'tw-gap-0': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <template #actions>\n        <slot></slot>\n      </template>\n      <template #toggle=\"{ toggle, isOpen }\">\n        <button\n          aria-haspopup=\"menu\"\n          :aria-expanded=\"isOpen\"\n          class=\"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\"\n          :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n          type=\"button\"\n          @click=\"toggle\"\n        >\n          {{ t('ll.more') }}\n          <Icon name=\"caret-down\" />\n        </button>\n      </template>\n    </MoreActions>\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","emit","__emit","props","__props","currentActiveTab","computed","nv","setActiveTab","newTabValue","activeItemId","provide"],"mappings":";;;;AAGa,MAAAA,IAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHW,IAAAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;ACyBV,UAAMC,IAAOC,GAIPC,IAAQC,GAIRC,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOH,EAAM;AAAA,MACf;AAAA,MACA,IAAII,GAA4B;AAC9B,QAAAN,EAAK,oBAAoBM,CAAE;AAAA,MAAA;AAAA,IAC7B,CACD;AAED,aAASC,EAAaC,GAAa;AACjC,MAAAJ,EAAiB,QAAQI;AAAA,IAAA;AAG3B,UAAMC,IAAeJ,EAAS,MAAM,OAAOD,EAAiB,KAAK,EAAE;AAEnE,WAAAM,EAAQZ,EAAe,KAAK;AAAA,MAC1B,WAAWO,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMH,EAAM,OAAO;AAAA,MACrC,cAAAK;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}