@leaflink/stash 48.1.0 → 48.3.0

package/dist/Badge.vue.d.ts

@@ -107,8 +107,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     variant: string;
 }>>>, {
     color: "blue" | "red";
-    animate: boolean;
     max: string | number;
+    animate: boolean;
     offset: {
         top?: number | undefined;
         right?: number | undefined;

package/dist/Button.js

@@ -1,9 +1,8 @@
-import { defineComponent as f, computed as c, openBlock as a, createElementBlock as n, normalizeClass as r, renderSlot as s } from "vue";
-import { s as i } from "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
-import { _ as d } from "./_plugin-vue_export-helper-dad06003.js";
-const y = ["href"];
-var u = /* @__PURE__ */ ((t) => (t.Primary = "primary", t.Secondary = "secondary", t.Tertiary = "tertiary", t.Icon = "icon", t.IconLabel = "iconLabel", t.Inline = "inline", t))(u || {});
-const b = /* @__PURE__ */ f({
+import { defineComponent as f, useCssModule as i, computed as n, openBlock as d, createBlock as p, resolveDynamicComponent as m, mergeProps as b, unref as a, withCtx as y, renderSlot as _ } from "vue";
+import { s as h } from "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
+import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
+var s = /* @__PURE__ */ ((e) => (e.Icon = "icon", e.IconLabel = "iconLabel", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Inline = "inline", e.Primary = "primary", e))(s || {});
+const $ = /* @__PURE__ */ f({
   name: "ll-button",
   __name: "Button",
   props: {
@@ -13,34 +12,39 @@ const b = /* @__PURE__ */ f({
     tertiary: { type: Boolean, default: !1 },
     inline: { type: Boolean, default: !1 },
     color: { default: void 0 },
+    to: { default: void 0 },
     href: { default: "" }
   },
-  setup(t) {
-    const o = t, l = c(() => {
-      for (const e of Object.values(u))
-        if (o[e])
-          return e;
+  setup(e) {
+    const t = e, r = i(), l = n(() => {
+      for (const o of Object.values(s))
+        if (t[o])
+          return o;
       return "primary";
-    });
-    return (e, m) => o.href ? (a(), n("a", {
-      key: 0,
-      "data-test": "ll-button",
-      class: r(["stash-button", [e.$style.button, e.$style[`button--${l.value}`], { [e.$style[`button--${o.color}`]]: o.color }]]),
-      href: o.href
-    }, [
-      s(e.$slots, "default")
-    ], 10, y)) : (a(), n("button", {
-      key: 1,
-      "data-test": "ll-button",
-      class: r(["stash-button", [e.$style.button, e.$style[`button--${l.value}`], { [e.$style[`button--${o.color}`]]: o.color }]])
-    }, [
-      s(e.$slots, "default")
-    ], 2));
+    }), u = n(() => t.to ? "router-link" : t.href ? "a" : "button"), c = n(() => t.to ? {
+      to: t.to
+    } : t.href ? {
+      href: t.href
+    } : {});
+    return (o, C) => (d(), p(m(u.value), b(c.value, {
+      class: ["stash-button", [
+        a(r).button,
+        `stash-button--${l.value}`,
+        a(r)[`button--${l.value}`],
+        { [`stash-button--${t.color}`]: t.color, [a(r)[`button--${t.color}`]]: t.color }
+      ]],
+      "data-test": "ll-button"
+    }), {
+      default: y(() => [
+        _(o.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
   }
-}), p = {
-  $style: i
-}, _ = /* @__PURE__ */ d(b, [["__cssModules", p]]);
+}), B = {
+  $style: h
+}, L = /* @__PURE__ */ v($, [["__cssModules", B]]);
 export {
-  _ as default
+  L as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n  });\n\n  enum ButtonTypes {\n    Primary = 'primary',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Inline = 'inline',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n</script>\n\n<template>\n  <a\n    v-if=\"props.href\"\n    data-test=\"ll-button\"\n    class=\"stash-button\"\n    :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n    :href=\"props.href\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </a>\n  <button\n    v-else\n    data-test=\"ll-button\"\n    class=\"stash-button\"\n    :class=\"[$style.button, $style[`button--${buttonType}`], { [$style[`button--${props.color}`]]: props.color }]\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </button>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled] {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled] {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled] svg,\n  .button--iconLabel[disabled],\n  .button--iconLabel[disabled] svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-900);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["ButtonTypes","buttonType","computed","type","props"],"mappings":";;;;AAsDE,IAAKA,sBAAAA,OACHA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,SAAS,UANNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;iBAWCC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAI,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  const buttonAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      { [`stash-button--${props.color}`]: props.color, [classes[`button--${props.color}`]]: props.color },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled] {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled] {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled] svg,\n  .button--iconLabel[disabled],\n  .button--iconLabel[disabled] svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-900);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["ButtonTypes","classes","useCssModule","buttonType","computed","type","props","is","buttonAttrs"],"mappings":";;;AA8DE,IAAKA,sBAAAA,OACHA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU,WANPA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;iBAFCC,IAAUC,KAaVC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOL,CAAW;AACtC,YAAAM,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKE,IAAKH,EAAS,MACdE,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKE,IAAcJ,EAAS,MACvBE,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;"}

package/dist/Button.vue.d.ts

@@ -4,6 +4,7 @@ import { ComponentOptionsMixin } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
 import { VNodeProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -58,6 +59,10 @@ export declare interface ButtonProps {
      * Renders a color variant
      */
     color?: 'blue' | 'red';
+    /**
+     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.
+     */
+    to?: RouteLocationRaw;
     /**
      * Button link. If defined, the button will render as an `<a />` tag.
      */
@@ -72,6 +77,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     inline: boolean;
     color: undefined;
     href: string;
+    to: undefined;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
     secondary: boolean;
     icon: boolean;
@@ -80,6 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     inline: boolean;
     color: undefined;
     href: string;
+    to: undefined;
 }>>>, {
     secondary: boolean;
     icon: boolean;
@@ -87,6 +94,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     tertiary: boolean;
     inline: boolean;
     color: "blue" | "red";
+    to: RouteLocationRaw;
     href: string;
 }, {}>, {
     default?(_: {}): any;

package/dist/Checkbox.vue.d.ts

@@ -102,8 +102,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>>> & {
     "onUpdate:checked"?: ((value: boolean | (string | number)[]) => any) | undefined;
 }, {
-    label: string;
     id: string;
+    label: string;
     checked: boolean | (string | number)[];
     disabled: boolean;
     value: string | number;

package/dist/CurrencyInput.vue.d.ts

@@ -55,8 +55,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
 }>>> & {
     "onUpdate:model-value"?: ((v: string | null) => any) | undefined;
 }, {
-    label: string;
     id: string;
+    label: string;
     errorText: string;
     hintText: string;
     modelValue: string | null;

package/dist/DatePicker.vue.d.ts

@@ -203,8 +203,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     "onUpdate:model-value"?: ((date: string | number | Date) => any) | undefined;
 }, {
     name: string;
-    label: string;
     id: string;
+    label: string;
     disabled: boolean;
     placeholder: string;
     addBottomSpace: boolean;

package/dist/Expand.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>>> & {
     "onAfter-expand"?: (() => any) | undefined;
 }, {
-    transitionName: string;
     is: ExpandOuterElement;
+    transitionName: string;
     isExpanded: boolean;
     isLazy: boolean;
 }, {}>, {

package/dist/Field.vue.d.ts

@@ -54,9 +54,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     showOptionalInLabel: boolean;
     fieldset: boolean;
 }>>>, {
+    id: string;
     fieldset: boolean;
     label: string;
-    id: string;
     isRequired: boolean;
     addBottomSpace: boolean;
     errorText: string;

package/dist/FilterDropdown.vue.d.ts

@@ -43,8 +43,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     activeFilterCount: number;
     onApply: () => undefined;
 }>>> & {
-    onReset?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
+    onReset?: (() => any) | undefined;
 }, {
     onApply: OnApplyFilters;
 }, {}>, {

package/dist/Icon.vue.d.ts

@@ -38,8 +38,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     title: string;
     staticPath: string;
 }>>>, {
-    title: string;
     id: string;
+    title: string;
     size: "small" | "standard" | "dense" | "large";
     staticPath: string;
 }, {}>;

package/dist/IconLabel.vue.d.ts

@@ -47,8 +47,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     truncate: boolean;
 }>>>, {
     color: "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";
-    href: string;
     to: string | object;
+    href: string;
     stacked: boolean;
     truncate: boolean;
 }, {}>, {

package/dist/Illustration.vue.d.ts

@@ -45,8 +45,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     staticPath: string;
 }>>>, {
     type: "spot" | "vignette" | "scene";
-    title: string;
     id: string;
+    title: string;
     size: number;
     staticPath: string;
     fillColor: StashPrimaryColorGroup;

package/dist/Input.vue.d.ts

@@ -66,8 +66,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     "onUpdate:model-value"?: ((v: string | number) => any) | undefined;
 }, {
     type: string;
-    label: string;
     id: string;
+    label: string;
     autocomplete: string;
     value: string | number | null;
     errorText: string;

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import {computed, useCssModule} from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-3\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n</style>\n"],"names":["classes","useCssModule","is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAiCQA,IAAUC,KAEVC,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import {computed, useCssModule} from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n  const classes = useCssModule();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action tw-rounded tw-p-3 tw-shadow\"\n    :class=\"classes.root\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"tw-flex tw-items-center tw-gap-3\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style module>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n</style>\n"],"names":["classes","useCssModule","is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KAEVC,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioNew.vue.d.ts

@@ -57,8 +57,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }, {
     name: string;
-    label: string;
     id: string | number;
+    label: string;
     disabled: boolean;
     hasError: boolean;
     modelValue: string;

package/dist/Select.vue.d.ts

@@ -127,9 +127,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }, {
     name: string;
     icon: string | boolean;
-    label: string;
     id: string;
     error: string;
+    label: string;
     disabled: boolean;
     placeholder: string;
     value: any;

package/dist/Switch.vue.d.ts

@@ -55,8 +55,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     "onUpdate:checked"?: ((value: boolean | (string | number)[] | undefined) => any) | undefined;
 }, {
     name: string;
-    label: string;
     id: string;
+    label: string;
     checked: boolean | (string | number)[];
     disabled: boolean;
     value: string | number;

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/dist/Textarea.vue.d.ts

@@ -54,8 +54,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>>> & {
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }, {
-    label: string;
     resize: boolean | TextareaResizeOptions;
+    label: string;
     value: string | number | null;
     errorText: string;
     hintText: string;

package/package.json

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