@leaflink/stash 50.1.0 → 50.2.0

package/dist/PageContent.js

@@ -1,41 +1,46 @@
-import { defineComponent as r, useSlots as l, useCssModule as d, openBlock as o, createElementBlock as _, normalizeClass as t, unref as e, createElementVNode as p, renderSlot as c, createCommentVNode as i } from "vue";
+import { defineComponent as d, useSlots as l, useCssModule as p, openBlock as c, createElementBlock as r, normalizeClass as a, unref as e, createElementVNode as u, renderSlot as _, createCommentVNode as h } from "vue";
 import { _ as m } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const u = /* @__PURE__ */ r({
+const b = ["id", "role"], g = /* @__PURE__ */ d({
   name: "ll-page-content",
   __name: "PageContent",
-  setup(b) {
-    const a = l(), s = d();
-    return (n, C) => (o(), _("div", {
-      class: t(["stash-page-content", [
-        e(s).root,
+  props: {
+    activeTab: { default: void 0 }
+  },
+  setup(i) {
+    const s = i, o = l(), t = p();
+    return (n, T) => (c(), r("div", {
+      id: s.activeTab ? `tabpanel-${s.activeTab}` : void 0,
+      class: a(["stash-page-content", [
+        e(t).root,
         {
-          [e(s)["stash-page-content--has-sidebar"]]: !!e(a).sidebar
+          [e(t)["stash-page-content--has-sidebar"]]: !!e(o).sidebar
         }
       ]]),
-      "data-test": "stash-page-content"
+      "data-test": "stash-page-content",
+      role: s.activeTab ? "tabpanel" : void 0
     }, [
-      p("div", {
-        class: t(e(s)["stash-page-content__main"])
+      u("div", {
+        class: a(e(t)["stash-page-content__main"])
       }, [
-        c(n.$slots, "default")
+        _(n.$slots, "default")
       ], 2),
-      e(a).sidebar ? (o(), _("aside", {
+      e(o).sidebar ? (c(), r("aside", {
         key: 0,
-        class: t(e(s)["stash-page-content__sidebar"])
+        class: a(e(t)["stash-page-content__sidebar"])
       }, [
-        c(n.$slots, "sidebar")
-      ], 2)) : i("", !0)
-    ], 2));
+        _(n.$slots, "sidebar")
+      ], 2)) : h("", !0)
+    ], 10, b));
   }
-}), h = "_root_1fnu6_2", g = {
-  root: h,
+}), f = "_root_1fnu6_2", v = {
+  root: f,
   "stash-page-content--has-sidebar": "_stash-page-content--has-sidebar_1fnu6_10",
   "stash-page-content__main": "_stash-page-content__main_1fnu6_16",
   "stash-page-content__sidebar": "_stash-page-content__sidebar_1fnu6_21"
-}, f = {
-  $style: g
-}, M = /* @__PURE__ */ m(u, [["__cssModules", f]]);
+}, C = {
+  $style: v
+}, y = /* @__PURE__ */ m(g, [["__cssModules", C]]);
 export {
-  M as default
+  y as default
 };
 //# sourceMappingURL=PageContent.js.map

package/dist/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['stash-page-content--has-sidebar']]: !!slots.sidebar,\n      },\n    ]\"\n    data-test=\"stash-page-content\"\n  >\n    <div :class=\"classes['stash-page-content__main']\">\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\" :class=\"classes['stash-page-content__sidebar']\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .stash-page-content--has-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--grid-gutter);\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__main {\n    flex: 1; /* 12 cols */\n    min-width: 0;\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__sidebar {\n    flex: 0;\n    min-width: 0;\n  }\n\n  @media screen('lg') {\n    .stash-page-content--has-sidebar {\n      flex-direction: row;\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__main {\n      flex: 3; /* 9 cols */\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__sidebar {\n      flex: 1; /* 3 cols */\n    }\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule"],"mappings":";;;;;;AAOE,UAAMA,IAAQC,KACRC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  export interface PageContentProps {\n    /**\n     * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.\n     */\n    activeTab?: string;\n  }\n\n  const props = withDefaults(defineProps<PageContentProps>(), {\n    activeTab: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    :id=\"props.activeTab ? `tabpanel-${props.activeTab}` : undefined\"\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes['stash-page-content--has-sidebar']]: !!slots.sidebar,\n      },\n    ]\"\n    data-test=\"stash-page-content\"\n    :role=\"props.activeTab ? 'tabpanel' : undefined\"\n  >\n    <div :class=\"classes['stash-page-content__main']\">\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\" :class=\"classes['stash-page-content__sidebar']\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .stash-page-content--has-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--grid-gutter);\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__main {\n    flex: 1; /* 12 cols */\n    min-width: 0;\n  }\n\n  .stash-page-content--has-sidebar .stash-page-content__sidebar {\n    flex: 0;\n    min-width: 0;\n  }\n\n  @media screen('lg') {\n    .stash-page-content--has-sidebar {\n      flex-direction: row;\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__main {\n      flex: 3; /* 9 cols */\n    }\n\n    .stash-page-content--has-sidebar .stash-page-content__sidebar {\n      flex: 1; /* 3 cols */\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule"],"mappings":";;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,KACRC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageContent.vue.d.ts

@@ -1,18 +1,54 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageContentProps>, {
+activeTab: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageContentProps>, {
+activeTab: undefined;
+}>>> & Readonly<{}>, {
+activeTab: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     sidebar?(_: {}): any;
 }>;
 export default _default;
 
+export declare interface PageContentProps {
+    /**
+     * The active page navigation tab. If provided, the PageContent will render a tab panel as its root element.
+     */
+    activeTab?: string;
+}
+
 export { }

package/dist/Tab.js

@@ -52,8 +52,8 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
         class: ["tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline", [
           {
             "tw-border-b-2": a(o) === "line",
-            "tw-border-t-4 tw-px-6": a(o) === "enclosed",
-            "tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white": t.value && a(o) === "enclosed",
+            "tw-border-b tw-border-t-4 tw-px-6": a(o) === "enclosed",
+            "tw-rounded-t tw-border-b-ice-200 tw-bg-white": t.value && a(o) === "enclosed",
             [a(v)["custom-shadow"]]: t.value && a(o) === "enclosed",
             "focus:tw-no-underline": e.href,
             "tw-pointer-events-none tw-text-ice-500": e.disabled,

package/dist/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgba(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,KAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAEvM,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, inject, nextTick, onMounted, toRefs, useCssModule } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs =\n    | HTMLAnchorElement['download']\n    | HTMLAnchorElement['hreflang']\n    | HTMLAnchorElement['ping']\n    | HTMLAnchorElement['referrerPolicy']\n    | HTMLAnchorElement['rel']\n    | HTMLAnchorElement['target']\n    | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean;\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const classes = useCssModule();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      logger.warn(\n        `The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`,\n      );\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n          'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n          [classes['custom-shadow']]: isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n\n<style module>\n  /* this removes the bottom shadow from the active tab */\n  .custom-shadow {\n    box-shadow: 0 -4px 4px rgba(0 0 0 / 10%);\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,KAEVC,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEzFG,EAAA;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAEvM,CACD;AAEK,UAAAI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/TabPanel.js

@@ -0,0 +1,27 @@
+import { defineComponent as s, openBlock as l, createBlock as n, resolveDynamicComponent as o, normalizeClass as r, withCtx as i, renderSlot as p } from "vue";
+const b = /* @__PURE__ */ s({
+  __name: "TabPanel",
+  props: {
+    tabValue: {},
+    activeTab: {},
+    is: { default: "div" }
+  },
+  setup(e) {
+    const a = e;
+    return (t, c) => (l(), n(o(a.is), {
+      id: `tabpanel-${a.tabValue}`,
+      "data-test": "stash-tab-panel",
+      class: r(["stash-tab-panel", { "tw-hidden": a.activeTab !== a.tabValue }]),
+      role: "tabpanel"
+    }, {
+      default: i(() => [
+        p(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["id", "class"]));
+  }
+});
+export {
+  b as default
+};
+//# sourceMappingURL=TabPanel.js.map

package/dist/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../src/components/TabPanel/TabPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { type Component } from 'vue';\n\n  export interface TabPanelProps {\n    /**\n     * The identifier for the Tab component that this panel is associated with.\n     */\n    tabValue: string;\n\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * The tag name or component to render.\n     *\n     * @default 'div'\n     * @see: https://vuejs.org/api/built-in-special-elements.html#component\n     */\n    is?: string | Component;\n  }\n\n  const props = withDefaults(defineProps<TabPanelProps>(), {\n    is: 'div',\n  });\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    :id=\"`tabpanel-${props.tabValue}`\"\n    data-test=\"stash-tab-panel\"\n    :class=\"['stash-tab-panel', { 'tw-hidden': props.activeTab !== props.tabValue }]\"\n    role=\"tabpanel\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;AAuBE,UAAMA,IAAQC;;;;;;;;;;;;;;"}

package/dist/TabPanel.vue.d.ts

@@ -0,0 +1,65 @@
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TabPanelProps>, {
+is: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TabPanelProps>, {
+is: string;
+}>>> & Readonly<{}>, {
+is: string | Component;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+
+export declare interface TabPanelProps {
+    /**
+     * The identifier for the Tab component that this panel is associated with.
+     */
+    tabValue: string;
+    /**
+     * The currently active tab value
+     */
+    activeTab: string;
+    /**
+     * The tag name or component to render.
+     *
+     * @default 'div'
+     * @see: https://vuejs.org/api/built-in-special-elements.html#component
+     */
+    is?: string | Component;
+}
+
+export { }

package/package.json

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