@leaflink/stash 44.0.0-beta.6 → 44.0.0-beta.8

package/README.md

@@ -36,25 +36,100 @@ Stash is a collection of primitive, product-agnostic elements that help encapsul
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## Getting Started
+## Quick Start
+
+Stash requires Vue 3 and Tailwind CSS 3. To get started, install the package and its peer dependencies:
 
 ```sh
-npm install @leaflink/stash
+npm install @leaflink/stash tailwindcss@3
 ```
 
-```js
-// src/main.ts
+Then, import the package and its styles in your app. Load the base and components styles from Stash, and then add your
+app's styles after them.
+
+```ts filename="main.ts"
 import { createApp } from 'vue';
 import stash from '@leaflink/stash';
 
+// stash styles
+import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/components.css';
+
+// app styles
+import './app.css';
+
 const app = createApp(App);
 
 app.use(stash);
 ```
 
+Your app styles should be loaded after the Stash styles to ensure that they override the Stash styles. At minimum, your
+app styles should include the following:
+
+```css filename="app.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Configure Tailwind in your app by creating a `tailwind.config.ts` file. It should include the Stash files in the
+`content` setting.
+
+```ts filename="tailwind.config.ts"
+import stashPreset from '@leaflink/stash/tailwind-base';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [stashPreset],
+
+  content: ['./src/**/*.{vue,ts,js}', './node_modules/@leaflink/stash/dist/*.js'],
+};
+```
+
+See the [Tailwind](#tailwind) section for more details on how to configure it in your app.
+
+> [!INFO]
+> For apps still requiring deprecated css & utility classes, you can include the backwards compat styles from Stash:
+
+```ts filename="main.ts"
+import '@leaflink/stash/styles/backwards-compat.css'; // Add this line before the base and components styles.
+import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/components.css';
+
+import './app.css';
+```
+
+Also, if you still need legacy Stash sass variables, functions, and mixins in your components, you can configure Vite to
+import them:
+
+```ts filename="vite.config.ts"
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@use "sass:map"; @import "@leaflink/stash/styles/core";',
+        },
+      },
+    },
+  };
+});
+```
+
 ## Usage
 
-There are several ways to configure the framework to suit your specific needs.
+`@leaflink/stash` is a Vue component library that implements [Leaflink's Stash Design System](https://stash.leaflink.com). So every one of LeafLink's colors, typography, shadows, etc. can be accessible via tailwind utility classes like `tw-text-blue-500 tw-text-sm`.
+
+Stash is a Vue plugin that can be installed in your app. You **do not need to install the plugin in order to use the components**, but it is required if you need to configure the framework to suit your specific needs.
+
+There are several options to configure the framework to suit your specific needs, and they are all optional. Any options
+you pass to the plugin will be merged with the default options & applied to the entire framework.
+
+> [!WARNING]
+> If you don't install the plugin in your app, you will need to manually setup [modals](https://stash.leaflink.com/guides/modals.html#installation), [toasts](https://stash.leaflink.com/guides/toasts.html#installation), and other features that
+> require some setup that's normally done for you by the Stash plugin.
 
 ```ts
 interface StashPluginOptions {
@@ -130,11 +205,11 @@ app.use(stash, {
     locale,
     t: (key, value) => i18n.t(key, value)
   },
-  googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API
+  googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API,
 });
 ```
 
-This example will load the core i18n options and google maps api key.
+This example will load the core i18n options and Google Maps api key.
 
 ### npm scripts
 
@@ -151,40 +226,37 @@ A few commonly used commands are:
 - `npm run build` will build the application and prepare it for production.
 - `npm run build-ts` will build the application, perform a static analysis to find any type errors and prepare it for production.
 
-## Styles
+## Legacy Styles
 
-`@leaflink/stash` exposes its core and components styles to be used downstream. It's required to import these styles in order for the components to have it's styles correctly applied.
-
-```ts
-// main.ts
+`@leaflink/stash` exposes a stylesheet for backwards compatibility with legacy stash utilities. This stylesheet includes
+styles for components that have been deprecated or removed from the Stash Design System. It is not required for
+greenfield projects.
 
+```ts filename="main.ts"
 /* legacy stash styles - not required for greenfield projects */
-import '@leaflink/stash/styles/main.scss'; // once backwards-compat.css is filled out, this can be removed
 import '@leaflink/stash/styles/backwards-compat.css';
 
 /* stash styles */
 import '@leaflink/stash/styles/base.css';
 import '@leaflink/stash/components.css';
 
-/* any other styles */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+import './app.css';
 ```
 
-> Tailwind CSS is required in order to run Stash. See below for details on [how to configure it](#tailwind) in your app.
-
-### Tailwind
+## Tailwind
 
-`@leaflink/stash` uses [Tailwind](https://tailwindcss.com/) behind the scene to style its components. It's currently required to run this library downstream in order to generate styles for stash's tw classes used. This helps avoiding issues with duplications & css ordering.
+`@leaflink/stash` uses [Tailwind](https://tailwindcss.com/) behind the scene to style its components. It's currently
+required to **run this library downstream in order to avoid issues with css duplication & ordering**.
 
-In order to avoid class name clashes, `@leaflink/stash` prefixes Tailwind utility classes with `tw-`. So when needed to use a tailwind class, just use like this `tw-flex md:tw-text-blue`.
+In order to avoid class name clashes with legacy utilities, `@leaflink/stash` prefixes Tailwind utility classes with
+`tw-`. This may change in the future when all LeafLink apps no longer need deprecated styles. For now, when needing to
+use a tailwind class, just add the `tw` prefix like so: `tw-flex md:tw-text-blue`.
 
-```js
-import Button from "@leaflink/stash/Button.vue"
-import IconLabel from "@leaflink/stash/IconLabel.vue"
+```jsx
+import Button from '@leaflink/stash/Button.vue';
+import IconLabel from '@leaflink/stash/IconLabel.vue';
 
-<Button icon-label class="tw-text-blue-500 tw-ml-3">
+<Button icon-label class="tw-hidden md:tw-inline tw-ml-3">
   <IconLabel icon="user-add" title="Add Recipient" size="dense" stacked>Add Recipient</IconLabel>
 </Button>
 ```
@@ -206,21 +278,17 @@ export default {
 };
 ```
 
-### Design System
-
-`@leaflink/stash` is a Vue component library that implements [Leaflink's Stash Design System](https://leaflink.atlassian.net/wiki/spaces/EN/pages/2394063290/Stash+Design+System). So every one of LeafLink's colors, typography, shadows, etc. can be accessible via tailwind utility classes like `tw-text-blue-500 tw-text-sm`.
-
 ## Resources
 
-  * **index.js**: This is the "install" entry point, for use with `app.use(...)`.
-  * **components**: All components
-  * **composables**: Similar to mixins or React's "Hooks", but for a Vue component
-  * **constants**: LeafLink global constants
-  * **directives**: [Vue directives](https://vuejs.org/guide/reusability/custom-directives#custom-directives)
-  * **plugins**: [Vue plugins](https://vuejs.org/guide/reusability/plugins.html#plugins)
-  * **styles**: SCSS, CSS, style utils, etc.
-  * **types**: TypeScript type declarations
-  * **utils**: Includes various helpers for internal and external use
+* **index.js**: This is the "install" entry point, for use with `app.use(...)`.
+* **components**: All components
+* **composables**: Similar to mixins or React's "Hooks", but for a Vue component
+* **constants**: LeafLink global constants
+* **directives**: [Vue directives](https://vuejs.org/guide/reusability/custom-directives#custom-directives)
+* **plugins**: [Vue plugins](https://vuejs.org/guide/reusability/plugins.html#plugins)
+* **styles**: SCSS, CSS, style utils, etc.
+* **types**: TypeScript type declarations
+* **utils**: Includes various helpers for internal and external use
 
 ## Core files & Entry Points
 

package/dist/ActionsDropdown.js

@@ -5,7 +5,7 @@ import g from "./Dropdown.js";
 import B from "./Icon.js";
 import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
@@ -61,7 +61,7 @@ const y = /* @__PURE__ */ c({
       }
     ]), 1032, ["align", "content-class", "class"]));
   }
-}), k = "_actionButton_184sp_2", S = "_disabled_184sp_12", M = "_dropdownContent_184sp_18", T = "_actionsDropdown_184sp_33", h = {
+}), k = "_actionButton_144dr_2", S = "_disabled_144dr_12", M = "_dropdownContent_144dr_18", T = "_actionsDropdown_144dr_33", h = {
   actionButton: k,
   disabled: S,
   dropdownContent: M,

package/dist/ActionsDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-actions-dropdown',\n  });\n\n  export interface ActionsDropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * Indicates whether the trigger button is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Class to be applied to the dropdown content\n     */\n    contentClass?: string;\n    /**\n     * Text to be displayed on the trigger button\n     */\n    buttonText?: string;\n  }\n\n  const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n    align: 'left',\n    disabled: false,\n    contentClass: '',\n    buttonText: () => t('ll.actions'),\n  });\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <Dropdown\n    :align=\"props.align\"\n    :content-class=\"[classes.dropdownContent, props.contentClass]\"\n    :class=\"classes.actionsDropdown\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        class=\"\n          button\n          tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\n        \"\n        secondary\n        :aria-expanded=\"isActive.toString()\"\n        :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n        :disabled=\"props.disabled\"\n        @click=\"toggle\"\n      >\n        {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n      </Button>\n    </template>\n\n    <template v-if=\"!props.disabled\" #default>\n      <!-- @slot Dropdown content -->\n      <slot></slot>\n    </template>\n  </Dropdown>\n</template>\n\n<style module>\n  .actionButton {\n    min-width: 156px;\n    white-space: normal;\n  }\n\n  .actionButton:hover {\n    background-color: var(--color-blue-100);\n    border-color: var(--color-blue-500) !important;\n  }\n\n  .disabled {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n  }\n\n  .dropdownContent {\n    margin-top: 4px;\n  }\n\n  .dropdownContent:global(.dropdown__content) {\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 90vw;\n  }\n\n  .dropdownContent:global(.dropdown__content)::after {\n    display: none;\n  }\n\n  @media screen(md) {\n    .actionsDropdown {\n      min-width: 156px;\n    }\n\n    .dropdownContent:global(.dropdown__content) {\n      min-width: 156px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-actions-dropdown',\n  });\n\n  export interface ActionsDropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * Indicates whether the trigger button is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Class to be applied to the dropdown content\n     */\n    contentClass?: string;\n    /**\n     * Text to be displayed on the trigger button\n     */\n    buttonText?: string;\n  }\n\n  const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n    align: 'left',\n    disabled: false,\n    contentClass: '',\n    buttonText: () => t('ll.actions'),\n  });\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <Dropdown\n    :align=\"props.align\"\n    :content-class=\"[classes.dropdownContent, props.contentClass]\"\n    :class=\"classes.actionsDropdown\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        class=\"\n          button\n          tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\n        \"\n        secondary\n        :aria-expanded=\"isActive.toString()\"\n        :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n        :disabled=\"props.disabled\"\n        @click=\"toggle\"\n      >\n        {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n      </Button>\n    </template>\n\n    <template v-if=\"!props.disabled\" #default>\n      <!-- @slot Dropdown content -->\n      <slot></slot>\n    </template>\n  </Dropdown>\n</template>\n\n<style module>\n  .actionButton {\n    min-width: 156px;\n    white-space: normal;\n  }\n\n  .actionButton:hover {\n    background-color: var(--color-blue-100);\n    border-color: var(--color-blue-500) !important;\n  }\n\n  .disabled {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n  }\n\n  .dropdownContent {\n    margin-top: 4px;\n  }\n\n  .dropdownContent:global(.dropdown__content) {\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 90vw;\n  }\n\n  .dropdownContent:global(.dropdown__content)::after {\n    display: none;\n  }\n\n  @media screen('md') {\n    .actionsDropdown {\n      min-width: 156px;\n    }\n\n    .dropdownContent:global(.dropdown__content) {\n      min-width: 156px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AddressSelect.js

@@ -24,8 +24,8 @@ import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 const _ = "address-select-", ve = /* @__PURE__ */ M({
   __name: "AddressSelect",

package/dist/AppNavigationItem.js

@@ -1,5 +1,5 @@
 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-5fe03d51.js";
+import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import i from "./Icon.js";
 import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";

package/dist/AppSidebar.js

@@ -1,9 +1,9 @@
-import { defineComponent as k, useSlots as x, computed as m, ref as C, watchEffect as E, openBlock as a, createElementBlock as o, normalizeClass as B, createVNode as i, Transition as w, withCtx as b, withDirectives as g, withModifiers as O, vShow as y, createElementVNode as v, unref as d, renderSlot as n, createCommentVNode as u, pushScopeId as I, popScopeId as V } from "vue";
+import { defineComponent as k, useSlots as x, computed as m, ref as C, watchEffect as E, openBlock as a, createElementBlock as o, normalizeClass as B, createVNode as i, Transition as w, withCtx as b, withDirectives as g, withModifiers as O, vShow as y, createElementVNode as v, unref as c, renderSlot as n, createCommentVNode as u, pushScopeId as I, popScopeId as V } from "vue";
 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-7ac3c3ee"), t = t(), V(), t), D = {
+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 = {
@@ -25,18 +25,18 @@ const j = (t) => (I("data-v-7ac3c3ee"), t = t(), V(), t), D = {
   },
   emits: ["dismiss", "update:is-open"],
   setup(t, { emit: _ }) {
-    const h = t, r = x(), l = $("screen and (min-width: 1321px)"), e = m(() => h.isOpen && !l.value), p = C({ height: "", overflow: "" }), f = m(() => h.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 c() {
+    function d() {
       return document.scrollingElement || document.body;
     }
     return E(() => {
       l.value || (e.value && Object.assign(p.value, {
-        overflow: c().style.overflow,
-        height: c().style.height
-      }), Object.assign(c().style, {
+        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%" : p.value.height
@@ -45,7 +45,7 @@ const j = (t) => (I("data-v-7ac3c3ee"), t = t(), V(), t), D = {
     }), (s, F) => (a(), o("div", {
       id: "stash-app-sidebar",
       class: B(["stash-app-sidebar tw-relative", {
-        "stash-app-sidebar--is-open": f.value,
+        "stash-app-sidebar--is-open": h.value,
         "tw-z-modal": e.value,
         "tw-z-[301]": !e.value
       }]),
@@ -66,13 +66,13 @@ const j = (t) => (I("data-v-7ac3c3ee"), t = t(), V(), t), D = {
         default: b(() => [
           g(v("aside", D, [
             i(A, { class: "stash-app-sidebar__divider" }),
-            d(r)["app-context"] ? (a(), o("div", M, [
+            c(r)["app-context"] ? (a(), o("div", M, [
               n(s.$slots, "app-context", {}, void 0, !0)
             ])) : u("", !0),
-            d(r)["company-context"] ? (a(), o("div", P, [
+            c(r)["company-context"] ? (a(), o("div", P, [
               n(s.$slots, "company-context", {}, void 0, !0)
             ])) : u("", !0),
-            d(r).navigation ? (a(), o("nav", L, [
+            c(r).navigation ? (a(), o("nav", L, [
               v("ul", Q, [
                 n(s.$slots, "navigation", {}, void 0, !0)
               ])
@@ -80,7 +80,7 @@ const j = (t) => (I("data-v-7ac3c3ee"), t = t(), V(), t), D = {
             T,
             n(s.$slots, "footer", {}, void 0, !0)
           ], 512), [
-            [y, f.value]
+            [y, h.value]
           ])
         ]),
         _: 3
@@ -88,7 +88,7 @@ const j = (t) => (I("data-v-7ac3c3ee"), t = t(), V(), t), D = {
     ], 2));
   }
 });
-const U = /* @__PURE__ */ N(q, [["__scopeId", "data-v-7ac3c3ee"]]);
+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-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(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/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-b2ee90e6.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-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: 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-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\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-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: 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":";;;;;;;;;;;;;"}

package/dist/ButtonGroup.js

@@ -1,12 +1,12 @@
-import { defineComponent as m, computed as r, ref as b, openBlock as l, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as w } from "vue";
-import B from "lodash-es/uniqueId";
-import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
-const k = ["data-test"], x = ["data-test", "disabled", "onClick"], C = {
+import { defineComponent as b, computed as r, ref as m, openBlock as o, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as B } from "vue";
+import h from "lodash-es/uniqueId";
+import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
+const z = ["data-test"], k = ["data-test", "disabled", "onClick"], C = {
   name: "ll-button-group"
-}, G = /* @__PURE__ */ m({
+}, G = /* @__PURE__ */ b({
   ...C,
   props: {
-    groupName: { default: B() },
+    groupName: { default: h() },
     options: {},
     fullWidth: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
@@ -14,12 +14,12 @@ const k = ["data-test"], x = ["data-test", "disabled", "onClick"], C = {
   },
   emits: ["input"],
   setup(v, { emit: _ }) {
-    const e = v, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), a = b(e.options.find((t) => t.active) || null);
+    const e = v, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), a = m(e.options.find((t) => t.active) || null);
     function f(t) {
-      var o;
-      i.value && ((o = a.value) == null ? void 0 : o.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
+      var l;
+      i.value && ((l = a.value) == null ? void 0 : l.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
     }
-    return (t, o) => (l(), s("div", {
+    return (t, l) => (o(), s("div", {
       class: p([
         "tw-flex",
         t.$style.buttonGroup,
@@ -29,29 +29,29 @@ const k = ["data-test"], x = ["data-test", "disabled", "onClick"], C = {
       ]),
       "data-test": `button-group-${t.$props.groupName}`
     }, [
-      (l(!0), s(g, null, $(e.options, (n) => {
+      (o(!0), s(g, null, $(e.options, (n) => {
         var c, d;
-        return l(), s("button", {
+        return o(), s("button", {
           key: `${e.groupName}-${n.id}`,
           class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === n.id }]),
           "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === n.id ? "active" : "inactive"}`,
           tabindex: 0,
           disabled: e.disabled,
-          onClick: y((z) => f(n), ["prevent"])
-        }, w(n.text), 11, x);
+          onClick: y((E) => f(n), ["prevent"])
+        }, B(n.text), 11, k);
       }), 128))
-    ], 10, k));
+    ], 10, z));
   }
-}), D = "_buttonGroup_1cnwx_176", N = "_button_1cnwx_176", M = "_single_1cnwx_190", S = "_active_1cnwx_202", W = {
+}), D = "_buttonGroup_1bnlz_3", N = "_button_1bnlz_3", M = "_single_1bnlz_17", S = "_active_1bnlz_29", W = {
   buttonGroup: D,
   button: N,
   single: M,
   active: S,
-  "can-deactivate": "_can-deactivate_1cnwx_215"
+  "can-deactivate": "_can-deactivate_1bnlz_42"
 }, q = {
   $style: W
-}, L = /* @__PURE__ */ h(G, [["__cssModules", q]]);
+}, j = /* @__PURE__ */ w(G, [["__cssModules", q]]);
 export {
-  L as default
+  j as default
 };
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'input', activeButton: ButtonGroupOption | null): void;\n    }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  // full width buttons\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: var(--font-weight-semibold);\n    line-height: var(--line-height-body);\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'input', activeButton: ButtonGroupOption | null): void;\n    }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}