@leaflink/stash 53.4.5 → 53.4.7

package/dist/TableRow.js

@@ -1,17 +1,17 @@
-import { defineComponent as D, useAttrs as M, useCssModule as V, useSlots as j, inject as L, ref as P, computed as E, watch as q, createElementBlock as w, openBlock as r, Fragment as z, createElementVNode as F, createCommentVNode as u, mergeProps as J, unref as e, createBlock as y, renderSlot as g, normalizeClass as c, withCtx as _, createVNode as b } from "vue";
-import O from "lodash-es/uniqueId";
-import { t as m } from "./locale.js";
-import U from "./Checkbox.js";
-import { _ as G } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
-import { _ as H } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
+import { defineComponent as P, useAttrs as q, useCssModule as z, useSlots as F, inject as J, computed as _, ref as O, watch as U, createElementBlock as f, openBlock as i, Fragment as T, createElementVNode as G, createCommentVNode as w, mergeProps as H, unref as e, createBlock as B, renderSlot as R, normalizeClass as c, withCtx as m, createVNode as h } from "vue";
+import K from "lodash-es/uniqueId";
+import { t as v } from "./locale.js";
+import Q from "./Checkbox.js";
+import { _ as W } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-Ce_qOXfR.js";
+import { _ as X } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
 import "lodash-es/cloneDeep";
 import "./Module.keys-DcqBbvvT.js";
 import "./DataView.keys-aSOnA4AD.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
-import S from "./TableCell.js";
-import { T as K } from "./Table.keys-LHQf6FEH.js";
-import { _ as Q } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const W = /* @__PURE__ */ D({
+import A from "./TableCell.js";
+import { T as Y } from "./Table.keys-LHQf6FEH.js";
+import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ee = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "TableRow",
   props: {
@@ -22,81 +22,89 @@ const W = /* @__PURE__ */ D({
     accentColor: { default: void 0 }
   },
   emits: ["update:isSelected", "update:isExpanded"],
-  setup(f, { emit: T }) {
-    const o = f, h = T, B = M(), t = V(), i = j(), v = L(K.key);
-    if (!v)
+  setup(C, { emit: $ }) {
+    const o = C, y = $, N = q(), l = z(), d = F(), k = J(Y.key);
+    if (!k)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: C, isExpandable: $, isSelectable: x, layout: d, isLoading: I } = v, l = P(o.isExpanded), n = E(() => $.value && !!i.expansion), N = E(() => {
-      var s;
-      let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
-      return x.value && (a += 1), n.value && !C.value && (a += 1), a;
-    }), k = O("table-row-");
-    function p(a) {
-      if (!n.value)
+    const { hasActions: I, hasCustomExpandToggle: E, isSchemaDriven: x, isExpandable: V, isSelectable: j, layout: p, isLoading: D } = k, b = _(() => j.value && !(x != null && x.value)), s = O(o.isExpanded), r = _(() => V.value && !!d.expansion);
+    function M(a) {
+      return Array.isArray(a) && a.every((t) => t != null && typeof t == "object" && "type" in t);
+    }
+    function g(a) {
+      return a.reduce((t, n) => n.type === T && M(n.children) ? t + g(n.children) : t + 1, 0);
+    }
+    const L = _(() => {
+      var n;
+      const a = ((n = d.default) == null ? void 0 : n.call(d, { toggleExpand: u })) ?? [];
+      let t = g(a);
+      return b.value && (t += 1), r.value && !E.value && (t += 1), t;
+    }), S = K("table-row-");
+    function u(a) {
+      if (!r.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
-      const s = typeof a == "boolean" ? a : !l.value;
-      l.value = s, h("update:isExpanded", s);
+      const t = typeof a == "boolean" ? a : !s.value;
+      s.value = t, y("update:isExpanded", t);
     }
-    return q(
+    return U(
       () => o.isExpanded,
-      () => p(o.isExpanded)
-    ), (a, s) => (r(), w(z, null, [
-      F("tr", J({
+      () => u(o.isExpanded)
+    ), (a, t) => (i(), f(T, null, [
+      G("tr", H({
         class: ["stash-table-row", [
-          e(t).root,
-          e(t)[`layout--${e(d)}`],
+          e(l).root,
+          e(l)[`layout--${e(p)}`],
           {
-            [e(t)["is-expandable"]]: n.value,
-            [e(t)["is-expanded"]]: l.value,
-            [e(t)["root--hidden-divider"]]: f.hideExpansionDivider,
-            "p-gutter": e(d) === "stack",
-            "mb-6 shadow lg:mb-0 lg:shadow-none": e(d) === "stack" && !n.value,
-            "pt-[60px]": e(R) && e(d) === "stack" && !e(x) && !e(I),
+            [e(l)["is-expandable"]]: r.value,
+            [e(l)["is-expanded"]]: s.value,
+            [e(l)["root--hidden-divider"]]: C.hideExpansionDivider,
+            "p-gutter": e(p) === "stack",
+            "mb-6 shadow lg:mb-0 lg:shadow-none": e(p) === "stack" && !r.value,
+            "pt-[60px]": e(I) && e(p) === "stack" && !b.value && !e(D),
             "stash-table-row--accent": o.accentColor,
             relative: o.accentColor
           }
         ]],
         "data-test": "stash-table-row"
-      }, e(B)), [
-        e(x) ? (r(), y(S, {
+      }, e(N)), [
+        b.value ? (i(), B(A, {
           key: 0,
           "is-control": "",
-          class: c(["stash-table-row__selection-cell min-w-[48px] lg:pl-3", e(t)["row-control-cell"]]),
+          class: c(["stash-table-row__selection-cell min-w-12 lg:pl-3", e(l)["row-control-cell"]]),
           "data-test": "stash-table-row|selection-cell"
         }, {
-          default: _(() => [
-            b(U, {
-              class: c(e(t)["row-selection-checkbox"]),
+          default: m(() => [
+            h(Q, {
+              class: c(e(l)["row-selection-checkbox"]),
               checked: o.isSelected,
               disabled: o.isSelectDisabled,
-              title: e(m)("ll.select.self"),
-              "onUpdate:checked": s[0] || (s[0] = (A) => h("update:isSelected", A))
+              title: e(v)("ll.select.self"),
+              "onUpdate:checked": t[0] || (t[0] = (n) => y("update:isSelected", n))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
-        }, 8, ["class"])) : u("", !0),
-        n.value && !e(C) ? (r(), y(S, {
+        }, 8, ["class"])) : w("", !0),
+        r.value && !e(E) ? (i(), B(A, {
           key: 1,
-          class: c(["stash-table-row__toggle-expansion-cell px-0", e(t)["row-control-cell"]]),
+          class: c(["stash-table-row__toggle-expansion-cell px-0", e(l)["row-control-cell"]]),
           "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
-          default: _(() => [
-            b(G, {
-              "aria-controls": e(k),
-              "aria-label": l.value ? e(m)("ll.table.collapseRow") : e(m)("ll.table.expandRow"),
-              direction: l.value ? "up" : "down",
-              "is-expanded": l.value,
-              onClick: p
+          default: m(() => [
+            h(W, {
+              "aria-controls": e(S),
+              "aria-label": s.value ? e(v)("ll.table.collapseRow") : e(v)("ll.table.expandRow"),
+              direction: s.value ? "up" : "down",
+              "is-expanded": s.value,
+              onClick: u
             }, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
           ]),
           _: 1
-        }, 8, ["class"])) : u("", !0),
-        g(a.$slots, "default", {
-          isRowExpanded: l.value,
-          toggleExpand: p
+        }, 8, ["class"])) : w("", !0),
+        R(a.$slots, "default", {
+          isRowExpanded: s.value,
+          toggleExpand: u
         }),
-        o.accentColor ? (r(), w("div", {
+        o.accentColor ? (i(), f("div", {
           key: 2,
           "data-test": "stash-table-row|accent",
           class: c({
@@ -108,31 +116,31 @@ const W = /* @__PURE__ */ D({
             "top-0": o.accentColor,
             "left-0": o.accentColor
           })
-        }, null, 2)) : u("", !0)
+        }, null, 2)) : w("", !0)
       ], 16),
-      n.value ? (r(), w("tr", {
+      r.value ? (i(), f("tr", {
         key: 0,
-        class: c(["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]]),
+        class: c(["stash-table-row stash-table-row--expandable", e(l)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
-        b(H, {
+        h(X, {
           is: "td",
-          id: e(k),
-          class: c(["border-none bg-white px-3 py-0", e(t)["row-expansion-content"]]),
+          id: e(S),
+          class: c(["border-none bg-white px-3 py-0", e(l)["row-expansion-content"]]),
           "data-test": "stash-table-row|expansion-cell",
-          colspan: N.value,
-          "is-expanded": l.value
+          colspan: L.value,
+          "is-expanded": s.value
         }, {
-          default: _(() => [
-            g(a.$slots, "expansion")
+          default: m(() => [
+            R(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])
-      ], 2)) : u("", !0)
+      ], 2)) : w("", !0)
     ], 64));
   }
-}), X = "_root_27247_5", Y = {
-  root: X,
+}), oe = "_root_27247_5", te = {
+  root: oe,
   "is-expandable": "_is-expandable_27247_12",
   "root--hidden-divider": "_root--hidden-divider_27247_17",
   "is-expanded": "_is-expanded_27247_17",
@@ -142,10 +150,10 @@ const W = /* @__PURE__ */ D({
   "row-control-cell": "_row-control-cell_27247_64",
   "row-expansion-content": "_row-expansion-content_27247_75",
   "row-expansion": "_row-expansion_27247_75"
-}, Z = {
-  $style: Y
-}, xe = /* @__PURE__ */ Q(W, [["__cssModules", Z]]);
+}, ae = {
+  $style: te
+}, fe = /* @__PURE__ */ Z(ee, [["__cssModules", ae]]);
 export {
-  xe as default
+  fe as default
 };
 //# sourceMappingURL=TableRow.js.map

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, isLoading } = 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        'p-gutter': layout === 'stack',\n        'mb-6 shadow lg:mb-0 lg:shadow-none': layout === 'stack' && !isRowExpandable,\n        'pt-[60px]': hasActions && layout === 'stack' && !isSelectable && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        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 min-w-[48px] lg:pl-3\"\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 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        absolute: props.accentColor,\n        [`bg-${props.accentColor}`]: props.accentColor,\n        block: props.accentColor,\n        'h-full': props.accentColor,\n        'w-1': props.accentColor,\n        'top-0': props.accentColor,\n        '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=\"border-none bg-white px-3 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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\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(--radius-sm);\n      transition: border-radius 0.5s;\n    }\n\n    .layout--stack.is-expanded {\n      border-top-left-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\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: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n      margin-bottom: --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 (width >= theme(--breakpoint-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  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isLoading","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","_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, Fragment, inject, ref, useAttrs, useCssModule, type VNode, 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 }): VNode[];\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, isSchemaDriven, isExpandable, isSelectable, layout, isLoading } =\n    tableInjection;\n\n  const showSelectionCell = computed(() => isSelectable.value && !isSchemaDriven?.value);\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  function isVNodeArray(children: unknown): children is VNode[] {\n    return (\n      Array.isArray(children) && children.every((c): c is VNode => c != null && typeof c === 'object' && 'type' in c)\n    );\n  }\n\n  // Children passed as part of a for loop have a different shape than children passed normally.\n  function countSlotChildren(vnodes: VNode[]): number {\n    return vnodes.reduce((total, node) => {\n      if (node.type === Fragment && isVNodeArray(node.children)) {\n        return total + countSlotChildren(node.children);\n      }\n      return total + 1;\n    }, 0);\n  }\n\n  const childCellCount = computed(() => {\n    const vnodes = slots.default?.({ toggleExpand }) ?? [];\n    let count = countSlotChildren(vnodes);\n\n    if (showSelectionCell.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        'p-gutter': layout === 'stack',\n        'mb-6 shadow lg:mb-0 lg:shadow-none': layout === 'stack' && !isRowExpandable,\n        'pt-[60px]': hasActions && layout === 'stack' && !showSelectionCell && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        relative: props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"showSelectionCell\"\n      is-control\n      class=\"stash-table-row__selection-cell min-w-12 lg:pl-3\"\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 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        absolute: props.accentColor,\n        [`bg-${props.accentColor}`]: props.accentColor,\n        block: props.accentColor,\n        'h-full': props.accentColor,\n        'w-1': props.accentColor,\n        'top-0': props.accentColor,\n        '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=\"border-none bg-white px-3 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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\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(--radius-sm);\n      transition: border-radius 0.5s;\n    }\n\n    .layout--stack.is-expanded {\n      border-top-left-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\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: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n      margin-bottom: --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 (width >= theme(--breakpoint-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  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isSchemaDriven","isExpandable","isSelectable","layout","isLoading","showSelectionCell","computed","isRowExpanded","ref","isRowExpandable","isVNodeArray","children","c","countSlotChildren","vnodes","total","node","Fragment","childCellCount","_a","toggleExpand","count","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}

package/dist/TableRow.vue.d.ts

@@ -4,6 +4,9 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { VNode } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -66,13 +69,17 @@ isSelectDisabled: boolean;
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }> & {
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }>;
 export default _default;

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as r } from "./Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js";
-import { T as t, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js";
+import { _ as r } from "./Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js";
+import { T as t, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js";
 export {
   t as TABS_INJECTION,
   f as TabVariant,

package/dist/Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js

@@ -0,0 +1,131 @@
+import { defineComponent as S, computed as u, provide as B, useTemplateRef as x, onMounted as $, onUpdated as D, watch as H, onBeforeUnmount as O, createElementBlock as y, openBlock as m, createBlock as j, unref as C, normalizeClass as f, withCtx as v, renderSlot as b, createElementVNode as A, createTextVNode as q, createVNode as z, toDisplayString as J } from "vue";
+import { t as g } from "./locale.js";
+import { t as w } from "./templateRefNarrowing-CeANDylX.js";
+import U from "./Icon.js";
+import V from "./MoreActions.js";
+const K = Object.freeze({
+  key: Symbol("TABS_INJECTION_KEY")
+});
+var M = /* @__PURE__ */ ((e) => (e.Line = "line", e.Enclosed = "enclosed", e))(M || {});
+const Y = ["aria-expanded", "onClick"], X = /* @__PURE__ */ S({
+  __name: "Tabs",
+  props: {
+    activeTab: {},
+    variant: { default: M.Line }
+  },
+  emits: ["update:activeTab"],
+  setup(e, { emit: I }) {
+    const L = I, s = e, o = u({
+      get() {
+        return s.activeTab;
+      },
+      set(t) {
+        L("update:activeTab", t);
+      }
+    });
+    function N(t) {
+      o.value = t;
+    }
+    B(K.key, {
+      activeTab: u(() => o.value),
+      variant: u(() => s.variant),
+      setActiveTab: N
+    });
+    const p = x("moreDropdownMenuRef"), h = x("tabsContainerRef"), r = /* @__PURE__ */ new Map();
+    function k() {
+      r.forEach((t, c) => {
+        c.removeEventListener("click", t);
+      }), r.clear();
+    }
+    function i() {
+      const t = w(p.value);
+      if (!t) return;
+      k(), t.querySelectorAll("[data-action-id]").forEach((a) => {
+        const n = a.getAttribute("data-action-id");
+        if (!n) return;
+        const R = o.value === n;
+        a.setAttribute("aria-selected", R ? "true" : "false");
+        const T = () => {
+          const E = w(h.value);
+          if (E) {
+            const l = E.querySelector(`[role="tab"][data-action-id="${n}"]`), d = l == null ? void 0 : l.firstChild;
+            d && d instanceof HTMLElement && d.click();
+          }
+        };
+        a.addEventListener("click", T), r.set(a, T);
+      });
+    }
+    return $(() => {
+      i();
+    }), D(() => {
+      i();
+    }), H(o, () => {
+      i();
+    }), O(() => {
+      k();
+    }), (t, c) => (m(), y("div", {
+      ref_key: "tabsContainerRef",
+      ref: h,
+      class: "stash-tabs relative",
+      role: "tabList",
+      "data-test": "stash-tabs"
+    }, [
+      t.$slots["more-actions"] ? (m(), j(V, {
+        key: 0,
+        class: f(["stash-tabs-list flex items-end", {
+          "stash-tabs-list--line": e.variant === "line",
+          "stash-tabs-list--enclosed": e.variant === "enclosed",
+          "gap-6": e.variant === "line"
+        }]),
+        "more-button-text": C(g)("ll.more"),
+        "dropdown-mode": "custom",
+        "actions-container-class": {
+          "gap-0": e.variant === "enclosed",
+          "gap-6": e.variant === "line"
+        },
+        "actions-container-tag": "ul"
+      }, {
+        "more-actions": v(() => [
+          A("div", {
+            ref_key: "moreDropdownMenuRef",
+            ref: p
+          }, [
+            b(t.$slots, "more-actions")
+          ], 512)
+        ]),
+        toggle: v(({ toggle: a, isOpen: n }) => [
+          A("button", {
+            "aria-haspopup": "menu",
+            "aria-expanded": n,
+            class: f(["flex cursor-pointer items-center justify-center border-solid px-6 pt-1.5 pb-1 text-sm font-medium text-blue-500 hover:text-blue-700", { "border-t-4 border-transparent": s.variant === "enclosed" }]),
+            type: "button",
+            onClick: a
+          }, [
+            q(J(C(g)("ll.more")) + " ", 1),
+            z(U, { name: "caret-down" })
+          ], 10, Y)
+        ]),
+        default: v(() => [
+          b(t.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "more-button-text", "actions-container-class"])) : (m(), y("ul", {
+        key: 1,
+        class: f(["stash-tabs-list flex items-end overflow-x-scroll", {
+          "stash-tabs-list--line": e.variant === "line",
+          "stash-tabs-list--enclosed": e.variant === "enclosed",
+          "gap-0": e.variant === "enclosed",
+          "gap-6": e.variant === "line"
+        }])
+      }, [
+        b(t.$slots, "default")
+      ], 2))
+    ], 512));
+  }
+});
+export {
+  K as T,
+  X as _,
+  M as a
+};
+//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.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, onBeforeUnmount, onMounted, onUpdated, provide, useTemplateRef, watch } from 'vue';\n\n  import { t } from '../../locale';\n  import { toElement } from '../../utils/templateRefNarrowing';\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: 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  const moreDropdownMenuRef = useTemplateRef('moreDropdownMenuRef');\n  const tabsContainerRef = useTemplateRef('tabsContainerRef');\n\n  // Store event listeners to allow proper cleanup\n  const eventListeners = new Map<Element, EventListener>();\n\n  function cleanupMoreActionsHandlers() {\n    eventListeners.forEach((listener, element) => {\n      element.removeEventListener('click', listener);\n    });\n    eventListeners.clear();\n  }\n\n  // Setup automatic handlers for MenuItem elements in more-actions dropdown\n  function setupMoreActionsHandlers() {\n    const menuEl = toElement(moreDropdownMenuRef.value);\n    if (!menuEl) return;\n\n    // Remove existing listeners first to prevent duplication\n    cleanupMoreActionsHandlers();\n\n    const menuItems = menuEl.querySelectorAll('[data-action-id]');\n\n    menuItems.forEach((item) => {\n      const actionId = item.getAttribute('data-action-id');\n      if (!actionId) return;\n\n      // Update aria-selected based on active tab\n      const isActive = currentActiveTab.value === actionId;\n      item.setAttribute('aria-selected', isActive ? 'true' : 'false');\n\n      // Create and store the listener\n      const listener = () => {\n        // Find and click the original tab in the actions container\n        const container = toElement(tabsContainerRef.value);\n        if (container) {\n          const originalTab = container.querySelector<HTMLElement>(`[role=\"tab\"][data-action-id=\"${actionId}\"]`);\n          const firstChild = originalTab?.firstChild;\n          if (firstChild && firstChild instanceof HTMLElement) {\n            firstChild.click();\n          }\n        }\n      };\n\n      item.addEventListener('click', listener);\n      eventListeners.set(item, listener);\n    });\n  }\n\n  onMounted(() => {\n    setupMoreActionsHandlers();\n  });\n\n  onUpdated(() => {\n    setupMoreActionsHandlers();\n  });\n\n  watch(currentActiveTab, () => {\n    setupMoreActionsHandlers();\n  });\n\n  onBeforeUnmount(() => {\n    cleanupMoreActionsHandlers();\n  });\n</script>\n\n<template>\n  <div ref=\"tabsContainerRef\" class=\"stash-tabs relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <template v-if=\"$slots['more-actions']\">\n      <MoreActions\n        class=\"stash-tabs-list flex items-end\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'gap-6': variant === 'line',\n        }\"\n        :more-button-text=\"t('ll.more')\"\n        dropdown-mode=\"custom\"\n        :actions-container-class=\"{\n          'gap-0': variant === 'enclosed',\n          'gap-6': variant === 'line',\n        }\"\n        actions-container-tag=\"ul\"\n      >\n        <slot></slot>\n\n        <template #more-actions>\n          <div ref=\"moreDropdownMenuRef\">\n            <slot name=\"more-actions\"></slot>\n          </div>\n        </template>\n\n        <template #toggle=\"{ toggle, isOpen }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-expanded=\"isOpen\"\n            class=\"flex cursor-pointer items-center justify-center border-solid px-6 pt-1.5 pb-1 text-sm font-medium text-blue-500 hover:text-blue-700\"\n            :class=\"{ 'border-t-4 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    </template>\n\n    <template v-else>\n      <ul\n        class=\"stash-tabs-list flex items-end overflow-x-scroll\"\n        :class=\"{\n          'stash-tabs-list--line': variant === 'line',\n          'stash-tabs-list--enclosed': variant === 'enclosed',\n          'gap-0': variant === 'enclosed',\n          'gap-6': variant === 'line',\n        }\"\n      >\n        <slot></slot>\n      </ul>\n    </template>\n  </div>\n</template>\n"],"names":["TABS_INJECTION","TabVariant","emit","__emit","props","__props","currentActiveTab","computed","nv","setActiveTab","newTabValue","provide","moreDropdownMenuRef","useTemplateRef","tabsContainerRef","eventListeners","cleanupMoreActionsHandlers","listener","element","setupMoreActionsHandlers","menuEl","toElement","item","actionId","isActive","container","originalTab","firstChild","onMounted","onUpdated","watch","onBeforeUnmount","_createElementBlock","$slots","_createBlock","MoreActions","_unref","t","_createElementVNode","_renderSlot","_ctx","_withCtx","toggle","isOpen","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","Icon"],"mappings":"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"}

package/dist/Thumbnail.js

@@ -1,11 +1,11 @@
-import { defineComponent as k, useCssModule as C, inject as T, computed as B, toValue as I, createElementBlock as y, openBlock as h, unref as t, normalizeClass as s, createVNode as d, createBlock as M, createCommentVNode as N, renderSlot as $, withModifiers as q, withCtx as V } from "vue";
+import { defineComponent as T, useCssModule as B, inject as I, computed as h, toValue as y, createElementBlock as M, openBlock as d, unref as t, normalizeClass as m, createVNode as _, createBlock as N, createCommentVNode as $, renderSlot as q, withModifiers as U, withCtx as V } from "vue";
 import { t as w } from "./locale.js";
 import z from "./Button.js";
 import E from "./Icon.js";
-import { _ as U } from "./Image.vue_vue_type_script_setup_true_lang-CAj0FH9h.js";
-import { T as _ } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
-import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const A = ["aria-current", "draggable"], D = /* @__PURE__ */ k({
+import { _ as j } from "./Image.vue_vue_type_script_setup_true_lang-CAj0FH9h.js";
+import { T as v } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const D = ["aria-current", "draggable"], H = /* @__PURE__ */ T({
   __name: "Thumbnail",
   props: {
     thumbnail: {},
@@ -13,68 +13,68 @@ const A = ["aria-current", "draggable"], D = /* @__PURE__ */ k({
     variant: { default: "opaque" }
   },
   emits: ["remove", "click"],
-  setup(n, { emit: v }) {
-    const u = n, r = v, e = C(), { thumbnails: p, activeThumbnail: l, draggable: f, isDragging: c, radius: i, removable: o } = T(
-      _.key,
-      _.defaults
-    ), a = B(() => I(p).findIndex((m) => m === u.thumbnail));
-    function g() {
-      l.value = a.value, r("click", a.value);
+  setup(s, { emit: p }) {
+    const l = s, r = p, e = B(), { thumbnails: f, activeThumbnail: i, draggable: g, isDragging: c, radius: n, removable: o } = I(
+      v.key,
+      v.defaults
+    ), a = h(() => y(f).findIndex((u) => u === l.thumbnail)), x = h(() => l.thumbnail.imageUrl);
+    function k() {
+      i.value = a.value, r("click", a.value);
     }
-    function x() {
-      r("remove", a.value), l.value = -1;
+    function C() {
+      r("remove", a.value), i.value = -1;
     }
-    return (m, b) => (h(), y("li", {
-      class: s(["stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer", [
+    return (u, b) => (d(), M("li", {
+      class: m(["stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer", [
         {
-          [t(e)["thumbnail-translucent"]]: u.variant === "translucent",
-          [t(e)["thumbnail-opaque"]]: u.variant === "opaque",
+          [t(e)["thumbnail-translucent"]]: l.variant === "translucent",
+          [t(e)["thumbnail-opaque"]]: l.variant === "opaque",
           [t(e)["thumbnail-removable"]]: t(o),
-          [t(e)["thumbnail-circle"]]: t(i) === "circle",
-          [t(e)["thumbnail-rounded"]]: t(i) === "rounded"
+          [t(e)["thumbnail-circle"]]: t(n) === "circle",
+          [t(e)["thumbnail-rounded"]]: t(n) === "rounded"
         }
       ]]),
-      "aria-current": t(l) === a.value,
-      draggable: t(f),
+      "aria-current": t(i) === a.value,
+      draggable: t(g),
       "data-test": "stash-thumbnail",
       tabindex: "0",
-      onClick: b[0] || (b[0] = (L) => g())
+      onClick: b[0] || (b[0] = (O) => k())
     }, [
-      d(U, {
-        class: s(["stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors", [
+      _(j, {
+        class: m(["stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors", [
           t(e)["thumbnail-img"],
           {
-            [t(e)["thumbnail-mask"]]: t(o) && t(i) !== "circle",
-            [t(e)["thumbnail-active"]]: t(l) === a.value && !t(c),
+            [t(e)["thumbnail-mask"]]: t(o) && t(n) !== "circle",
+            [t(e)["thumbnail-active"]]: t(i) === a.value && !t(c),
             "group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline": !t(c)
           }
         ]]),
         "data-test": "stash-thumbnail|img",
-        radius: t(i),
-        src: n.thumbnail.imageUrl,
-        alt: n.altText
+        radius: t(n),
+        src: x.value,
+        alt: s.altText
       }, null, 8, ["class", "radius", "src", "alt"]),
-      t(o) ? (h(), M(z, {
+      t(o) ? (d(), N(z, {
         key: 0,
-        class: s(["stash-thumbnail__remove", [t(e)["thumbnail-remove"]]]),
+        class: m(["stash-thumbnail__remove", [t(e)["thumbnail-remove"]]]),
         "data-test": "stash-thumbnail|remove",
         "aria-label": t(w)("ll.thumbnail.removeButton", { index: a.value + 1 }),
         type: "button",
         icon: "",
-        onClick: q(x, ["stop", "prevent"])
+        onClick: U(C, ["stop", "prevent"])
       }, {
         default: V(() => [
-          d(E, {
+          _(E, {
             name: "close",
             size: "small"
           })
         ]),
         _: 1
-      }, 8, ["class", "aria-label"])) : N("", !0),
-      $(m.$slots, "hint")
-    ], 10, A));
+      }, 8, ["class", "aria-label"])) : $("", !0),
+      q(u.$slots, "hint")
+    ], 10, D));
   }
-}), H = {
+}), J = {
   "thumbnail-remove": "_thumbnail-remove_pocxm_5",
   "thumbnail-img": "_thumbnail-img_pocxm_27",
   "thumbnail-translucent": "_thumbnail-translucent_pocxm_35",
@@ -82,10 +82,10 @@ const A = ["aria-current", "draggable"], D = /* @__PURE__ */ k({
   "thumbnail-mask": "_thumbnail-mask_pocxm_49",
   "thumbnail-full": "_thumbnail-full_pocxm_53",
   "thumbnail-rounded": "_thumbnail-rounded_pocxm_57"
-}, J = {
-  $style: H
-}, Q = /* @__PURE__ */ j(D, [["__cssModules", J]]);
+}, L = {
+  $style: J
+}, W = /* @__PURE__ */ A(H, [["__cssModules", L]]);
 export {
-  Q as default
+  W as default
 };
 //# sourceMappingURL=Thumbnail.js.map