@leaflink/stash 48.16.1 → 48.16.2

package/dist/TableCell.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,16 +32,16 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
     isControl: boolean;
     mobileHeader: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableCellProps>, {
     isControl: boolean;
     mobileHeader: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     isControl: boolean;
     mobileHeader: string;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/TableHeaderCell.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, useCssModule as T, inject as u, computed as p, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as n } from "vue";
+import { defineComponent as k, useCssModule as T, inject as p, computed as m, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as n } from "vue";
 import "lodash-es/cloneDeep";
 import f from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
@@ -7,7 +7,7 @@ import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
-import { T as N } from "./Table.keys-cf93df19.js";
+import { T as N } from "./Table.keys-83e4f09b.js";
 import "lodash-es/uniqueId";
 import "@leaflink/snitch";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
@@ -24,15 +24,15 @@ const A = {
     sortId: { default: "" }
   },
   setup(h) {
-    const a = h, e = T(), l = u(N.key);
+    const a = h, e = T(), l = p(N.key);
     if (!l)
       throw new Error("TableHeaderCell must be used within a Table component");
-    const { density: i, hasActions: y } = l, { currentSortId: v, currentSortOrder: d, updateCurrentSort: m } = u(
+    const { density: i, hasActions: y } = l, { currentSortId: v, currentSortOrder: d, updateCurrentSort: u } = p(
       b.key,
       b.defaults
-    ), c = p(() => !!a.sortId), o = p(() => v.value === a.sortId);
+    ), c = m(() => !!a.sortId), o = m(() => v.value === a.sortId);
     function C() {
-      c.value && typeof m == "function" && m(a.sortId, { shouldEmit: !0 });
+      c.value && typeof u == "function" && u(a.sortId, { shouldEmit: !0 });
     }
     return (I, O) => (r(), _("th", {
       class: s(["stash-table-header-cell tw-border-b tw-border-r tw-border-ice-200 tw-p-3 tw-text-xs tw-font-medium tw-text-ice-900", [
@@ -72,14 +72,14 @@ const A = {
       ], 2)
     ], 2));
   }
-}), j = "_root_rrm9i_2", z = "_caret_rrm9i_18", H = {
+}), j = "_root_14363_2", z = "_caret_14363_18", H = {
   root: j,
-  "has-actions": "_has-actions_rrm9i_14",
-  "content-wrapper": "_content-wrapper_rrm9i_14",
-  "caret-up": "_caret-up_rrm9i_18",
-  "caret-down": "_caret-down_rrm9i_22",
+  "has-actions": "_has-actions_14363_14",
+  "content-wrapper": "_content-wrapper_14363_14",
+  "caret-up": "_caret-up_14363_18",
+  "caret-down": "_caret-down_14363_22",
   caret: z,
-  "root--density-comfortable": "_root--density-comfortable_rrm9i_31"
+  "root--density-comfortable": "_root--density-comfortable_14363_31"
 }, M = {
   $style: H
 }, Z = /* @__PURE__ */ S(B, [["__cssModules", M]]);

package/dist/TableHeaderCell.js.map

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

package/dist/TableHeaderCell.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,13 +32,13 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
     sortId: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderCellProps>, {
     sortId: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     sortId: string;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/TableHeaderRow.js

@@ -1,6 +1,6 @@
-import { defineComponent as T, inject as d, ref as u, watchEffect as E, openBlock as s, createElementBlock as R, unref as e, createBlock as r, normalizeClass as c, withCtx as x, createCommentVNode as f, renderSlot as C } from "vue";
-import { t as B } from "./locale.js";
-import S from "./Checkbox.js";
+import { defineComponent as E, inject as d, ref as u, watchEffect as R, openBlock as s, createElementBlock as x, unref as e, createBlock as r, normalizeClass as c, withCtx as C, createCommentVNode as f, renderSlot as B } from "vue";
+import { t as S } from "./locale.js";
+import v from "./Checkbox.js";
 import { D as w } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/cloneDeep";
 import "lodash-es/uniqueId";
@@ -9,16 +9,16 @@ import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
-import { T as v } from "./Table.keys-cf93df19.js";
+import { T as N } from "./Table.keys-83e4f09b.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
 import h from "./TableHeaderCell.js";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as g } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-9e1095ef.js";
 import "./Icon.js";
-const g = /* @__PURE__ */ T({
+const A = /* @__PURE__ */ E({
   __name: "TableHeaderRow",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -26,16 +26,16 @@ const g = /* @__PURE__ */ T({
   },
   emits: ["select"],
   setup(_, { emit: b }) {
-    const a = _, n = d(v.key);
+    const a = _, k = b, n = d(N.key);
     if (!n)
       throw new Error("TableHeaderRow must be used within a Table component");
-    const { hasCustomExpandToggle: k, isExpandable: y, isSelectable: i } = n, { hasToolbar: t } = d(w.key, w.defaults), m = u(0), o = u();
+    const { hasCustomExpandToggle: y, isExpandable: T, isSelectable: i } = n, { hasToolbar: t } = d(w.key, w.defaults), m = u(0), o = u();
     function p() {
-      b("select"), m.value++;
+      k("select"), m.value++;
     }
-    return E(() => {
+    return R(() => {
       o.value && (t != null && t.value && i.value ? o.value.getElementsByTagName("th")[0].setAttribute("colspan", 2) : o.value.getElementsByTagName("th")[0].setAttribute("colspan", 1));
-    }), (l, $) => (s(), R("tr", {
+    }), (l, H) => (s(), x("tr", {
       ref_key: "headerRow",
       ref: o,
       class: "stash-table-header-row",
@@ -45,34 +45,34 @@ const g = /* @__PURE__ */ T({
         key: 0,
         class: c(["stash-table-header-row__selection-cell tw-min-w-[48px]", l.$style["row-control-cell"]])
       }, {
-        default: x(() => [
-          (s(), r(S, {
+        default: C(() => [
+          (s(), r(v, {
             key: m.value,
             class: c(l.$style["row-selection-checkbox"]),
             checked: a.allRowsSelected,
             indeterminate: a.someRowsSelected && !a.allRowsSelected,
-            title: e(B)("ll.selectAll"),
+            title: e(S)("ll.selectAll"),
             "onUpdate:indeterminate": p,
             "onUpdate:checked": p
           }, null, 8, ["class", "checked", "indeterminate", "title"]))
         ]),
         _: 1
       }, 8, ["class"])) : f("", !0),
-      e(y) && !e(k) ? (s(), r(h, {
+      e(T) && !e(y) ? (s(), r(h, {
         key: 1,
         class: c(l.$style["row-control-cell"]),
         "data-test": "table-row-header-expansion-cell"
       }, null, 8, ["class"])) : f("", !0),
-      C(l.$slots, "default")
+      B(l.$slots, "default")
     ], 512));
   }
-}), A = {
+}), I = {
   "row-selection-checkbox": "_row-selection-checkbox_1eq6o_2",
   "row-control-cell": "_row-control-cell_1eq6o_8"
-}, I = {
-  $style: A
-}, ee = /* @__PURE__ */ N(g, [["__cssModules", I]]);
+}, $ = {
+  $style: I
+}, te = /* @__PURE__ */ g(A, [["__cssModules", $]]);
 export {
-  ee as default
+  te as default
 };
 //# sourceMappingURL=TableHeaderRow.js.map

package/dist/TableHeaderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref, watchEffect } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const headerRow = ref();\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  watchEffect(() => {\n    // Whenever a Table is selectable _and_ is within a DataView with a toolbar, we pick the first header cell and add a colspan=2.\n    // After a Table is mounted, if for whatever reason the conditions are changed for useSelection, the header needs to watch it.\n    // This being a watch guarantees that colspan is properly applied whenever conditions are met and revert back when they aren't anymore.\n    if (headerRow.value) {\n      if (hasToolbar?.value && isSelectable.value) {\n        headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 2);\n      } else {\n        headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 1);\n      }\n    }\n  });\n</script>\n\n<template>\n  <tr ref=\"headerRow\" class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","headerRow","onSelect","emit","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC,GACnBC,IAAYD;AAElB,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODJ,EAAA;AAAA,IACd;AAEA,WAAAK,EAAY,MAAM;AAIhB,MAAIH,EAAU,UACRJ,KAAA,QAAAA,EAAY,SAASD,EAAa,QAC1BK,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC,IAE7DA,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC;AAAA,IAE3E,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, ref, watchEffect } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.keys';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n  export interface TableHeaderRowProps {\n    allRowsSelected?: boolean;\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n    allRowsSelected: false,\n    someRowsSelected: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableHeaderRow must be used within a Table component');\n  }\n\n  const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n  const { hasToolbar } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const headerRow = ref();\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  watchEffect(() => {\n    // Whenever a Table is selectable _and_ is within a DataView with a toolbar, we pick the first header cell and add a colspan=2.\n    // After a Table is mounted, if for whatever reason the conditions are changed for useSelection, the header needs to watch it.\n    // This being a watch guarantees that colspan is properly applied whenever conditions are met and revert back when they aren't anymore.\n    if (headerRow.value) {\n      if (hasToolbar?.value && isSelectable.value) {\n        headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 2);\n      } else {\n        headerRow.value.getElementsByTagName('th')[0].setAttribute('colspan', 1);\n      }\n    }\n  });\n</script>\n\n<template>\n  <tr ref=\"headerRow\" class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n    <TableHeaderCell\n      v-if=\"!hasToolbar && isSelectable\"\n      class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n      :class=\"$style['row-control-cell']\"\n    >\n      <Checkbox\n        :key=\"checkboxKey\"\n        :class=\"$style['row-selection-checkbox']\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n    </TableHeaderCell>\n    <TableHeaderCell\n      v-if=\"isExpandable && !hasCustomExpandToggle\"\n      :class=\"$style['row-control-cell']\"\n      data-test=\"table-row-header-expansion-cell\"\n    />\n    <!-- @slot default -->\n    <slot></slot>\n  </tr>\n</template>\n\n<style module>\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .row-control-cell {\n    border-right: 0;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","hasToolbar","DATA_VIEW_INJECTION","checkboxKey","ref","headerRow","onSelect","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExD,EAAE,YAAAM,EAAW,IAAIL,EAAOM,EAAoB,KAAKA,EAAoB,QAAQ,GAE7EC,IAAcC,EAAI,CAAC,GACnBC,IAAYD;AAElB,aAASE,IAAW;AAClB,MAAAb,EAAK,QAAQ,GAODU,EAAA;AAAA,IACd;AAEA,WAAAI,EAAY,MAAM;AAIhB,MAAIF,EAAU,UACRJ,KAAA,QAAAA,EAAY,SAASD,EAAa,QAC1BK,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC,IAE7DA,EAAA,MAAM,qBAAqB,IAAI,EAAE,CAAC,EAAE,aAAa,WAAW,CAAC;AAAA,IAE3E,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableHeaderRow.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,20 +32,20 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderRowProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderRowProps>, {
     allRowsSelected: boolean;
     someRowsSelected: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     select: () => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderRowProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableHeaderRowProps>, {
     allRowsSelected: boolean;
     someRowsSelected: boolean;
-}>>> & {
+}>>> & Readonly<{
     onSelect?: (() => any) | undefined;
-}, {
+}>, {
     allRowsSelected: boolean;
     someRowsSelected: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/TableRow.js

@@ -1,9 +1,9 @@
-import { defineComponent as N, useAttrs as A, useCssModule as D, useSlots as M, inject as V, ref as j, computed as _, watch as P, openBlock as c, createElementBlock as m, Fragment as q, createElementVNode as z, mergeProps as F, unref as e, createBlock as k, normalizeClass as r, withCtx as b, createVNode as f, createCommentVNode as u, renderSlot as g } from "vue";
-import J from "lodash-es/uniqueId";
+import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as _, watch as q, openBlock as c, createElementBlock as m, Fragment as z, createElementVNode as F, mergeProps as J, unref as e, createBlock as k, normalizeClass as r, withCtx as b, createVNode as f, createCommentVNode as u, renderSlot as g } from "vue";
+import L from "lodash-es/uniqueId";
 import { t as x } from "./locale.js";
-import L from "./Checkbox.js";
-import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
-import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
+import O from "./Checkbox.js";
+import { _ as U } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js";
+import { _ as G } from "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
@@ -12,8 +12,8 @@ import "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
 import y from "./TableCell.js";
-import { T as G, a as H } from "./Table.keys-cf93df19.js";
-import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
+import { T as H, a as K } from "./Table.keys-83e4f09b.js";
+import { _ as Q } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
@@ -21,7 +21,7 @@ import "./Button.js";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
 import "./Icon.js";
 import "./index-9e1095ef.js";
-const Q = /* @__PURE__ */ N({
+const W = /* @__PURE__ */ A({
   inheritAttrs: !1,
   __name: "TableRow",
   props: {
@@ -32,67 +32,67 @@ const Q = /* @__PURE__ */ N({
     accentColor: { default: void 0 }
   },
   emits: ["update:isSelected", "update:isExpanded"],
-  setup(S, { emit: h }) {
-    const t = S, T = A(), a = D(), i = M(), C = V(G.key);
+  setup(S, { emit: T }) {
+    const t = S, h = T, B = D(), o = M(), i = V(), C = j(H.key);
     if (!C)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: B, hasCustomExpandToggle: v, isExpandable: R, isSelectable: w, layout: d } = C, l = j(t.isExpanded), n = _(() => R.value && !!i.expansion), $ = _(() => {
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: w, layout: d } = C, l = P(t.isExpanded), n = _(() => $.value && !!i.expansion), I = _(() => {
       var s;
-      let o = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: p }).length) ?? 0;
-      return w.value && (o += 1), n.value && !v.value && (o += 1), o;
-    }), E = J("table-row-");
-    function p(o) {
+      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;
+    }), E = L("table-row-");
+    function p(a) {
       if (!n.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
-      const s = typeof o == "boolean" ? o : !l.value;
+      const s = typeof a == "boolean" ? a : !l.value;
       l.value = s, h("update:isExpanded", s);
     }
-    return P(
+    return q(
       () => t.isExpanded,
       () => p(t.isExpanded)
-    ), (o, s) => (c(), m(q, null, [
-      z("tr", F({
+    ), (a, s) => (c(), m(z, null, [
+      F("tr", J({
         class: ["stash-table-row", [
-          e(a).root,
-          e(a)[`layout--${e(d)}`],
+          e(o).root,
+          e(o)[`layout--${e(d)}`],
           {
-            [e(a)["is-expandable"]]: n.value,
-            [e(a)["is-expanded"]]: l.value,
-            [e(a)["root--hidden-divider"]]: o.hideExpansionDivider,
+            [e(o)["is-expandable"]]: n.value,
+            [e(o)["is-expanded"]]: l.value,
+            [e(o)["root--hidden-divider"]]: a.hideExpansionDivider,
             "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(B) && e(d) === "stack" && !e(w),
+            "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(T)), [
+      }, e(B)), [
         e(w) ? (c(), k(y, {
           key: 0,
           "is-control": "",
-          class: r(["stash-table-row__selection-cell tw-min-w-[48px]", e(a)["row-control-cell"]]),
+          class: r(["stash-table-row__selection-cell tw-min-w-[48px]", e(o)["row-control-cell"]]),
           "data-test": "stash-table-row|selection-cell"
         }, {
           default: b(() => [
-            f(L, {
-              class: r(e(a)["row-selection-checkbox"]),
+            f(O, {
+              class: r(e(o)["row-selection-checkbox"]),
               checked: t.isSelected,
               disabled: t.isSelectDisabled,
               title: e(x)("ll.select.self"),
-              "onUpdate:checked": s[0] || (s[0] = (I) => h("update:isSelected", I))
+              "onUpdate:checked": s[0] || (s[0] = (N) => h("update:isSelected", N))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
         }, 8, ["class"])) : u("", !0),
         n.value && !e(v) ? (c(), k(y, {
           key: 1,
-          class: r(["stash-table-row__toggle-expansion-cell tw-px-0", e(a)["row-control-cell"]]),
+          class: r(["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: b(() => [
-            f(O, {
+            f(U, {
               "aria-controls": e(E),
               "aria-label": l.value ? e(x)("ll.table.collapseRow") : e(x)("ll.table.expandRow"),
               direction: l.value ? "up" : "down",
@@ -102,7 +102,7 @@ const Q = /* @__PURE__ */ N({
           ]),
           _: 1
         }, 8, ["class"])) : u("", !0),
-        g(o.$slots, "default", {
+        g(a.$slots, "default", {
           isRowExpanded: l.value,
           toggleExpand: p
         }),
@@ -122,29 +122,29 @@ const Q = /* @__PURE__ */ N({
       ], 16),
       n.value ? (c(), m("tr", {
         key: 0,
-        class: r(["stash-table-row stash-table-row--expandable", e(a)["row-expansion"]]),
+        class: r(["stash-table-row stash-table-row--expandable", e(o)["row-expansion"]]),
         "data-test": "stash-table-row|expansion-row"
       }, [
-        f(U, {
+        f(G, {
           is: "td",
           id: e(E),
-          class: r(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(a)["row-expansion-content"]]),
+          class: r(["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: $.value,
+          colspan: I.value,
           "is-expanded": l.value
         }, {
           default: b(() => [
-            g(o.$slots, "expansion")
+            g(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])
       ], 2)) : u("", !0)
     ], 64));
   }
-}), W = {
-  $style: H
-}, ve = /* @__PURE__ */ K(Q, [["__cssModules", W]]);
+}), X = {
+  $style: K
+}, Ee = /* @__PURE__ */ Q(W, [["__cssModules", X]]);
 export {
-  ve as default
+  Ee 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, useSlots, 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 =\n    defineEmits<{\n      'update:isSelected': [isChecked: CheckboxProps['checked']];\n      'update:isExpanded': [isExpanded: boolean];\n    }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.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    min-height: theme('spacing.6');\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":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0CQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,EAAa,SAAS,CAAC,CAACP,EAAM,SAAS,GAExEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { 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 = useSlots();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.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    min-height: theme('spacing.6');\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,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,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,KAAgB,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,IACtC;AAEA,WAAAC;AAAA,MACE,MAAM9B,EAAM;AAAA,MACZ,MAAMyB,EAAazB,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,7 +32,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
     /**
      * If true, hides the divider between the parent row and expansion row
      */
@@ -42,10 +41,10 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isSelected: boolean;
     isSelectDisabled: boolean;
     accentColor: undefined;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:isSelected": (isChecked: boolean | (string | number)[]) => void;
     "update:isExpanded": (isExpanded: boolean) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TableRowProps>, {
     /**
      * If true, hides the divider between the parent row and expansion row
      */
@@ -54,16 +53,16 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isSelected: boolean;
     isSelectDisabled: boolean;
     accentColor: undefined;
-}>>> & {
+}>>> & Readonly<{
     "onUpdate:isSelected"?: ((isChecked: boolean | (string | number)[]) => any) | undefined;
     "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
-}, {
+}>, {
     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, true, {}, any>, {
     default?(_: {
         isRowExpanded: boolean;
         toggleExpand: typeof toggleExpand;

package/dist/Tabs.js

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