@leaflink/stash 43.5.2 → 44.0.0-beta.10

package/dist/AppNavigationItem.js

@@ -1,11 +1,11 @@
-import { defineComponent as v, ref as y, useSlots as $, resolveComponent as x, openBlock as n, createElementBlock as r, unref as b, createBlock as w, normalizeClass as a, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as p, renderSlot as d } from "vue";
-import { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import { defineComponent as _, ref as v, useSlots as y, resolveComponent as $, openBlock as a, createElementBlock as r, unref as b, createBlock as h, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as d, renderSlot as p } from "vue";
+import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import i from "./Icon.js";
-import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "text-truncate" }, B = { key: 1 }, I = { class: "flex-1 flex items-center overflow-hidden" }, N = { class: "text-truncate" }, g = /* @__PURE__ */ v({
+const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A = { class: "tw-truncate" }, B = { key: 1 }, I = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, N = { class: "tw-truncate" }, g = /* @__PURE__ */ _({
   __name: "AppNavigationItem",
   props: {
     to: {},
@@ -14,13 +14,13 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
     isActive: { type: Boolean, default: !1 }
   },
   setup(u) {
-    const t = u, l = y(!1), f = $();
+    const t = u, l = v(!1), f = y();
     return (e, c) => {
-      const _ = x("router-link");
-      return n(), r("li", null, [
-        b(f)["sub-items"] ? (n(), r("div", B, [
+      const w = $("router-link");
+      return a(), r("li", null, [
+        b(f)["sub-items"] ? (a(), r("div", B, [
           s("button", {
-            class: a([[e.$style.item, { [e.$style.expanded]: l.value }], "flex items-center justify-between text-capitalize font-normal w-full"]),
+            class: n([[e.$style.item, { [e.$style.expanded]: l.value }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
             onClick: c[0] || (c[0] = () => l.value = !l.value)
           }, [
             s("div", I, [
@@ -28,30 +28,30 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
-              s("span", N, p(t.label), 1)
+              s("span", N, d(t.label), 1)
             ]),
             o(i, {
-              class: a([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
+              class: n([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
               name: "chevron-left"
             }, null, 8, ["class"])
           ], 2),
-          o(h, {
+          o(k, {
             "is-expanded": l.value,
-            class: a(e.$style.expand)
+            class: n(e.$style.expand)
           }, {
             default: m(() => [
               s("ul", {
-                class: a(e.$style["sub-items"])
+                class: n(e.$style["sub-items"])
               }, [
-                d(e.$slots, "sub-items")
+                p(e.$slots, "sub-items")
               ], 2)
             ]),
             _: 3
           }, 8, ["is-expanded", "class"])
-        ])) : (n(), w(_, {
+        ])) : (a(), h(w, {
           key: 0,
           to: t.to,
-          class: a([[e.$style.item, { [e.$style.active]: t.isActive }], "flex items-center justify-between text-capitalize font-normal w-full"]),
+          class: n([[e.$style.item, { [e.$style.active]: t.isActive }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
           "active-class": e.$style.active
         }, {
           default: m(() => [
@@ -60,24 +60,24 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
-              s("span", A, p(t.label), 1)
+              s("span", A, d(t.label), 1)
             ]),
-            d(e.$slots, "default")
+            p(e.$slots, "default")
           ]),
           _: 3
         }, 8, ["to", "class", "active-class"]))
       ]);
     };
   }
-}), z = "_item_18p7a_2", E = "_expanded_18p7a_19", S = "_active_18p7a_23", j = "_caret_18p7a_29", M = {
+}), z = "_item_n8mr7_2", E = "_expanded_n8mr7_19", S = "_active_n8mr7_23", j = "_caret_n8mr7_29", M = {
   item: z,
-  "sub-items": "_sub-items_18p7a_15",
+  "sub-items": "_sub-items_n8mr7_15",
   expanded: E,
   active: S,
   caret: j
 }, V = {
   $style: M
-}, L = /* @__PURE__ */ k(g, [["__cssModules", V]]);
+}, L = /* @__PURE__ */ x(g, [["__cssModules", V]]);
 export {
   L as default
 };

package/dist/AppNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw,\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n    >\n      <div class=\"flex-1 flex items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"text-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex-1 flex items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"text-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam);\n    border-color: var(--color-seafoam);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw,\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n    >\n      <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"tw-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"tw-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice-500);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam-500);\n    border-color: var(--color-seafoam-500);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppSidebar.js

@@ -3,8 +3,8 @@ import $ from "./useMediaQuery.js";
 import z from "./Backdrop.js";
 import A from "./Divider.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
-const j = (t) => (I("data-v-7962d89f"), t = t(), V(), t), D = {
-  class: "stash-app-sidebar__aside tw-fixed tw-h-screen tw-bg-purple-500 tw-flex tw-flex-col",
+const j = (t) => (I("data-v-78582cf0"), t = t(), V(), t), D = {
+  class: "stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500",
   "data-test": "stash-app-sidebar__aside"
 }, M = {
   key: 0,
@@ -25,21 +25,21 @@ const j = (t) => (I("data-v-7962d89f"), t = t(), V(), t), D = {
   },
   emits: ["dismiss", "update:is-open"],
   setup(t, { emit: _ }) {
-    const f = t, r = x(), l = $("screen and (min-width: 1321px)"), e = m(() => f.isOpen && !l.value), d = C({ height: "", overflow: "" }), h = m(() => f.isOpen || l.value);
+    const f = t, r = x(), l = $("screen and (min-width: 1321px)"), e = m(() => f.isOpen && !l.value), p = C({ height: "", overflow: "" }), h = m(() => f.isOpen || l.value);
     function S() {
       _("dismiss"), _("update:is-open", !1);
     }
-    function p() {
+    function d() {
       return document.scrollingElement || document.body;
     }
     return E(() => {
-      l.value || (e.value && Object.assign(d.value, {
-        overflow: p().style.overflow,
-        height: p().style.height
-      }), Object.assign(p().style, {
-        overflow: e.value ? "hidden" : d.value.overflow,
+      l.value || (e.value && Object.assign(p.value, {
+        overflow: d().style.overflow,
+        height: d().style.height
+      }), Object.assign(d().style, {
+        overflow: e.value ? "hidden" : p.value.overflow,
         // Prevents page from scrolling when AppSidebar is open
-        height: e.value ? "100%" : d.value.height
+        height: e.value ? "100%" : p.value.height
         // Ensures the backdrop covers the entire page when AppSidebar is open
       }));
     }), (s, F) => (a(), o("div", {
@@ -88,7 +88,7 @@ const j = (t) => (I("data-v-7962d89f"), t = t(), V(), t), D = {
     ], 2));
   }
 });
-const U = /* @__PURE__ */ N(q, [["__scopeId", "data-v-7962d89f"]]);
+const U = /* @__PURE__ */ N(q, [["__scopeId", "data-v-78582cf0"]]);
 export {
   U as default
 };

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'dismiss'): void;\n      (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-h-screen tw-bg-purple-500 tw-flex tw-flex-col\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(var(--top-header-height) - 1px); /* -1px to compensate for the border height */\n    width: var(--sidebar-width);\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["slots","useSlots","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","props","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","emit","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAQC,KAWRC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMC,EAAM,UAAU,CAACJ,EAAmB,KAAK,GAC5EK,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBJ,EAAS,MAAMC,EAAM,UAAUJ,EAAmB,KAAK;AAE7E,aAASQ,IAAkB;AACzB,MAAAC,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASC,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIX,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOG,EAAiC,OAAO;AAAA,QACpD,UAAUK,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAkB,QAAQ,WAAWG,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQH,EAAkB,QAAQ,SAASG,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'dismiss'): void;\n      (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('width.sidebar');\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["slots","useSlots","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","props","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","emit","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAQC,KAWRC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMC,EAAM,UAAU,CAACJ,EAAmB,KAAK,GAC5EK,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBJ,EAAS,MAAMC,EAAM,UAAUJ,EAAmB,KAAK;AAE7E,aAASQ,IAAkB;AACzB,MAAAC,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASC,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIX,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOG,EAAiC,OAAO;AAAA,QACpD,UAAUK,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAkB,QAAQ,WAAWG,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQH,EAAkB,QAAQ,SAASG,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.js

@@ -1,4 +1,4 @@
-import { openBlock as n, createElementBlock as p, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as i, createVNode as a, unref as m, renderSlot as o } from "vue";
+import { openBlock as n, createElementBlock as p, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as i, createVNode as s, unref as m, renderSlot as o } from "vue";
 import d from "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
@@ -16,8 +16,8 @@ function b(r, w) {
 }
 const H = { render: b }, u = {
   "data-test": "stash-app-topbar",
-  class: "stash-app-topbar tw-absolute tw-top-0 tw-left-0"
-}, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden xl:tw-block tw-pl-3" }, y = /* @__PURE__ */ c({
+  class: "stash-app-topbar tw-absolute tw-left-0 tw-top-0"
+}, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden tw-pl-3 xl:tw-block" }, y = /* @__PURE__ */ c({
   __name: "AppTopbar",
   props: {
     sidebarOpened: { type: Boolean, default: !1 },
@@ -25,38 +25,38 @@ const H = { render: b }, u = {
   },
   emits: ["toggle-sidebar"],
   setup(r, { emit: w }) {
-    const s = r;
+    const a = r;
     return (e, l) => (n(), p("header", u, [
       t("div", {
-        class: i(["tw-fixed tw-top-0 tw-pl-3 tw-flex tw-items-center tw-h-topbar tw-w-sidebar xl:tw-text-white tw-transition-colors tw-duration-500", {
-          "tw-text-white tw-z-[1001]": s.sidebarOpened,
-          "tw-text-purple-500 tw-z-[401]": !s.sidebarOpened
+        class: i(["tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 tw-transition-colors tw-duration-500 xl:tw-text-white", {
+          "tw-z-dialog tw-text-white": a.sidebarOpened,
+          "tw-z-[401] tw-text-purple-500": !a.sidebarOpened
         }])
       }, [
         t("button", {
           class: "xl:tw-hidden",
           onClick: l[0] || (l[0] = (M) => w("toggle-sidebar"))
         }, [
-          a(d, {
+          s(d, {
             name: "menu",
             class: "tw-mr-3",
             "aria-label": "open sidebar navigation"
           })
         ]),
         t("a", {
-          href: s.href,
+          href: a.href,
           class: "tw-flex tw-items-center tw-text-inherit"
         }, [
-          a(d, {
+          s(d, {
             name: "logo-ll",
             class: "tw-mr-1.5",
             size: "large"
           }),
-          a(m(H), { class: "tw-w-full tw-max-w-[104px] tw-h-6 tw-hidden md:tw-block" })
+          s(m(H), { class: "tw-hidden tw-h-6 tw-w-full tw-max-w-[104px] md:tw-block" })
         ], 8, x)
       ], 2),
       t("div", {
-        class: i([[e.$attrs.class], "tw-fixed tw-top-0 tw-w-full tw-pr-3 tw-py-3 tw-z-page tw-shadow-md tw-flex tw-items-center tw-justify-between tw-flex-row-reverse tw-bg-white tw-h-topbar tw-pl-sidebar"])
+        class: i([[e.$attrs.class], "tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md"])
       }, [
         t("div", _, [
           o(e.$slots, "actions"),

package/dist/Avatar.js

@@ -1,7 +1,7 @@
-import { defineComponent as p, useAttrs as _, useCssModule as f, computed as c, openBlock as i, createElementBlock as d, mergeProps as u, unref as a, toDisplayString as h } from "vue";
+import { defineComponent as p, useAttrs as v, useCssModule as _, computed as c, openBlock as i, createElementBlock as d, mergeProps as u, unref as a, toDisplayString as h } from "vue";
 import b from "./utils/colorScheme.js";
 import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
-const x = ["alt", "src", "tabindex"], C = ["tabindex"], w = /* @__PURE__ */ p({
+const g = ["alt", "src", "tabindex"], x = ["tabindex"], C = /* @__PURE__ */ p({
   name: "ll-avatar",
   __name: "Avatar",
   props: {
@@ -14,12 +14,12 @@ const x = ["alt", "src", "tabindex"], C = ["tabindex"], w = /* @__PURE__ */ p({
     textColor: { default: void 0 }
   },
   setup(m) {
-    const t = m, s = _(), e = f(), n = c(
+    const t = m, s = v(), e = _(), n = c(
       () => b({
         shade: t.shade,
         color: t.colorScheme
       })
-    ), v = c(() => {
+    ), f = c(() => {
       const [l, r] = String(t.name).toUpperCase().split(" ");
       return r ? l.charAt(0) + r.charAt(0) : l.charAt(0);
     }), o = c(() => !!s.onClick);
@@ -30,9 +30,9 @@ const x = ["alt", "src", "tabindex"], C = ["tabindex"], w = /* @__PURE__ */ p({
       src: t.src,
       tabindex: o.value ? 0 : -1,
       "data-test": "stash-avatar"
-    }, a(s)), null, 16, x)) : (i(), d("div", u({
+    }, a(s)), null, 16, g)) : (i(), d("div", u({
       key: 1,
-      class: ["stash-avatar stash-avatar--initials tw-inline-block tw-rounded-full tw-text-center tw-font-semibold tw-cursor-default", [
+      class: ["stash-avatar stash-avatar--initials tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold", [
         a(e).root,
         `tw-text-${t.textColor || n.value.computedTextColor}`,
         `tw-bg-${t.bgColor || n.value.computedBgColor}`,
@@ -40,14 +40,14 @@ const x = ["alt", "src", "tabindex"], C = ["tabindex"], w = /* @__PURE__ */ p({
       ]],
       tabindex: o.value ? 0 : -1,
       "data-test": "stash-avatar"
-    }, a(s)), h(v.value), 17, C));
+    }, a(s)), h(f.value), 17, x));
   }
-}), g = "_root_yvwkb_2", y = "_clickable_yvwkb_9", A = {
-  root: g,
-  clickable: y
+}), w = "_root_g79af_2", A = "_clickable_g79af_9", y = {
+  root: w,
+  clickable: A
 }, S = {
-  $style: A
-}, D = /* @__PURE__ */ k(w, [["__cssModules", S]]);
+  $style: y
+}, D = /* @__PURE__ */ k(C, [["__cssModules", S]]);
 export {
   D as default
 };

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"\n      stash-avatar stash-avatar--initials\n      tw-inline-block tw-rounded-full tw-text-center tw-font-semibold tw-cursor-default\n    \"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid theme('colors.blue.500');\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"\n      stash-avatar stash-avatar--initials\n      tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold\n    \"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid var(--color-blue-500);\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Backdrop.js

@@ -2,7 +2,7 @@ import { openBlock as e, createElementBlock as r, renderSlot as o } from "vue";
 import { _ as s } from "./_plugin-vue_export-helper-dad06003.js";
 const a = {}, c = {
   "aria-hidden": "true",
-  class: "stash-backdrop tw-fixed tw-z-behind tw-bg-black/50 tw-inset-0",
+  class: "stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50",
   "data-test": "stash-backdrop"
 };
 function d(t, n) {

package/dist/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"stash-backdrop tw-fixed tw-z-behind tw-bg-black/50 tw-inset-0\"\n    data-test=\"stash-backdrop\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cAEIA,IAAkB;AAAA,EAClB,eAAqE;AAAA,EACrE,OAAA;AAAA;;AAHF,SAAAC,EAAAC,GAAAC,GAAA;SAKeC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
+{"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50\"\n    data-test=\"stash-backdrop\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cAEIA,IAAkB;AAAA,EAClB,eAAqE;AAAA,EACrE,OAAA;AAAA;;AAHF,SAAAC,EAAAC,GAAAC,GAAA;SAKeC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}

package/dist/Badge.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, useCssModule as g, computed as l, ref as w, watch as m, openBlock as b, createElementBlock as v, renderSlot as h, withDirectives as _, createElementVNode as r, normalizeClass as c, unref as i, normalizeStyle as x, toDisplayString as y, vShow as B } from "vue";
+import { defineComponent as u, useCssModule as g, computed as r, ref as w, watch as m, openBlock as v, createElementBlock as b, renderSlot as h, withDirectives as _, createElementVNode as d, normalizeClass as c, unref as i, normalizeStyle as x, toDisplayString as y, vShow as B } from "vue";
 import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
 const S = {
   class: "stash-badge tw-relative tw-inline-block",
@@ -21,12 +21,12 @@ const S = {
     variant: { default: "standard" }
   },
   setup(p) {
-    const t = p, o = g(), s = l(() => {
+    const t = p, o = g(), s = r(() => {
       const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
       return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
-    }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({
-      top: t.offset.top !== void 0 ? d(t.offset.top) : void 0,
-      right: t.offset.right !== void 0 ? d(t.offset.right) : void 0
+    }), l = (e) => e === 0 ? "0" : `${e}px`, f = r(() => ({
+      top: t.offset.top !== void 0 ? l(t.offset.top) : void 0,
+      right: t.offset.right !== void 0 ? l(t.offset.right) : void 0
     })), n = w(!1);
     return m(
       () => t.content,
@@ -35,9 +35,9 @@ const S = {
           n.value = !1;
         }, 1e3));
       }
-    ), (e, a) => (b(), v("span", S, [
+    ), (e, a) => (v(), b("span", S, [
       h(e.$slots, "default"),
-      _(r("span", {
+      _(d("span", {
         "data-test": "stash-badge|content-wrapper",
         class: c([
           {
@@ -48,9 +48,9 @@ const S = {
         ]),
         style: x(t.variant === "dot" || t.position === "top-right" ? f.value : "")
       }, [
-        r("span", {
+        d("span", {
           "data-test": "stash-badge|content",
-          class: c(["tw-text-white tw-font-semibold tw-rounded-full tw-text-[10px] tw-text-center tw-whitespace-nowrap tw-leading-[0.875rem] tw-inline-block", [
+          class: c(["tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-[0.875rem] tw-text-white", [
             {
               "tw-animate-grow": n.value,
               "tw-bg-red-500": t.color === "red" && !t.isDisabled,
@@ -69,9 +69,9 @@ const S = {
     ]));
   }
 }), k = {
-  "badge-standard": "_badge-standard_1b1so_2",
-  "badge-dot": "_badge-dot_1b1so_8",
-  "top-right": "_top-right_1b1so_15"
+  "badge-standard": "_badge-standard_fulr7_2",
+  "badge-dot": "_badge-dot_fulr7_8",
+  "top-right": "_top-right_fulr7_15"
 }, M = {
   $style: k
 }, E = /* @__PURE__ */ D(C, [["__cssModules", M]]);

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"\n          tw-text-white\n          tw-font-semibold\n          tw-rounded-full\n          tw-text-[10px]\n          tw-text-center\n          tw-whitespace-nowrap\n          tw-leading-[0.875rem]\n          tw-inline-block\n        \"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    line-height: 1.05rem;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid theme('colors.ice.100');\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"\n          tw-inline-block\n          tw-whitespace-nowrap\n          tw-rounded-full\n          tw-text-center\n          tw-text-[10px]\n          tw-font-semibold\n          tw-leading-[0.875rem]\n          tw-text-white\n        \"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    line-height: 1.05rem;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid var(--color-ice-100);\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,CAAU,MAAMF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Badge.vue.d.ts

@@ -108,12 +108,12 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>>>, {
     color: "blue" | "red";
     animate: boolean;
+    max: string | number;
     offset: {
         top?: number | undefined;
         right?: number | undefined;
     };
     content: string | number;
-    max: string | number;
     position: "inline" | "top-right";
     variant: "standard" | "dot";
     isDisabled: boolean;

package/dist/Button.js

@@ -1,5 +1,5 @@
 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-b77978d6.js";
+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 || {});

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     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\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: var(--border-radius);\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: var(--font-weight-semibold);\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 var(--ll-space-2);\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) !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) !important;\n    --text-color: var(--color-ice) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue);\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);\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: var(--border-radius);\n    height: var(--ll-space-5);\n    min-width: var(--ll-space-5);\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: var(--ll-space-2);\n    width: var(--ll-space-5);\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);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue);\n    font-weight: var(--font-weight-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);\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);\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);\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);\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: var(--ll-space-3);\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: var(--ll-space-3);\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":";;;;AAgDE,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 } 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;;;;;;;;;;;;;;;;;;;"}

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js

@@ -0,0 +1,17 @@
+const t = "_button_mair8_2", o = {
+  button: t,
+  "button--solid": "_button--solid_mair8_36",
+  "button--ghost": "_button--ghost_mair8_58",
+  "button--primary": "_button--primary_mair8_81 _button--solid_mair8_36",
+  "button--secondary": "_button--secondary_mair8_88 _button--ghost_mair8_58",
+  "button--tertiary": "_button--tertiary_mair8_95 _button--ghost_mair8_58",
+  "button--icon": "_button--icon_mair8_102",
+  "button--iconLabel": "_button--iconLabel_mair8_103",
+  "button--inline": "_button--inline_mair8_143",
+  "button--blue": "_button--blue_mair8_161",
+  "button--red": "_button--red_mair8_175"
+};
+export {
+  o as s
+};
+//# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js.map

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}