@leaflink/stash 48.1.0 → 48.2.0

package/dist/TableRow.js

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

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n  });\n\n  const emit =\n    defineEmits<{\n      'update:isSelected': [isChecked: CheckboxProps['checked']];\n      'update:isExpanded': [isExpanded: boolean];\n    }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.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      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,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 =\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TableRow.vue.d.ts

@@ -41,6 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isExpanded: boolean;
     isSelected: boolean;
     isSelectDisabled: boolean;
+    accentColor: undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:isSelected": (isChecked: boolean | (string | number)[]) => void;
     "update:isExpanded": (isExpanded: boolean) => void;
@@ -52,12 +53,14 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     isExpanded: boolean;
     isSelected: boolean;
     isSelectDisabled: boolean;
+    accentColor: undefined;
 }>>> & {
     "onUpdate:isSelected"?: ((isChecked: boolean | (string | number)[]) => any) | undefined;
     "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
 }, {
     isSelected: boolean;
     isExpanded: 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;
 }, {}>, {
@@ -69,11 +72,56 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>;
 export default _default;
 
+declare type StashCommonColor = `${StashCommonColors}`;
+
+/**
+ * A limited list of stash brand colors, only including their 100, 500, and 700 shades.
+ */
+declare enum StashCommonColors {
+    Purple700 = "purple-700",
+    Purple500 = "purple-500",
+    Purple100 = "purple-100",
+    Royal700 = "royal-700",
+    Royal500 = "royal-500",
+    Royal100 = "royal-100",
+    Blue700 = "blue-700",
+    Blue500 = "blue-500",
+    Blue100 = "blue-100",
+    Teal700 = "teal-700",
+    Teal500 = "teal-500",
+    Teal100 = "teal-100",
+    Green700 = "green-700",
+    Green500 = "green-500",
+    Green100 = "green-100",
+    Seafoam700 = "seafoam-700",
+    Seafoam500 = "seafoam-500",
+    Seafoam100 = "seafoam-100",
+    Yellow700 = "yellow-700",
+    Yellow500 = "yellow-500",
+    Yellow100 = "yellow-100",
+    Orange700 = "orange-700",
+    Orange500 = "orange-500",
+    Orange100 = "orange-100",
+    Red700 = "red-700",
+    Red500 = "red-500",
+    Red100 = "red-100",
+    Ice700 = "ice-700",
+    Ice500 = "ice-500",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
+    Ice100 = "ice-100",
+    White = "white",
+    Black = "black"
+}
+
 export declare interface TableRowProps {
     hideExpansionDivider?: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;
     isSelectDisabled?: boolean;
+    /**
+     * The accent color for the TableRow.
+     */
+    accentColor?: StashCommonColor;
 }
 
 declare function toggleExpand(value?: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "48.1.0",
+  "version": "48.2.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",