tide-design-system 2.5.20 → 2.6.0

package/dist/components/TideRealmLogo.vue2.js

@@ -0,0 +1,66 @@
+import __variableDynamicImportRuntimeHelper from "../_virtual/dynamic-import-helper.js";
+import { defineComponent, ref, computed, watch, defineAsyncComponent, markRaw, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, unref, createCommentVNode } from "vue";
+import { LOGO_WIDTH_LARGE, LOGO_HEIGHT } from "../types/RealmLogo.js";
+import { CSS } from "../types/Styles.js";
+import { getRealmKeyFromRealm } from "../utilities/realm.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideRealmLogo",
+  props: {
+    markOnly: { type: Boolean, default: false },
+    realm: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const innerSVG = ref();
+    const logoFull = computed(() => ({
+      height: `${LOGO_HEIGHT.LARGE}px`,
+      width: `${LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)]}px`
+    }));
+    const logoSmall = computed(() => {
+      const shrinkFactor = LOGO_HEIGHT.SMALL / LOGO_HEIGHT.LARGE;
+      return {
+        height: `${LOGO_HEIGHT.SMALL}px`,
+        width: `${Math.round(LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)] * shrinkFactor)}px`
+      };
+    });
+    const logoMark = {
+      height: "32px",
+      width: "32px"
+    };
+    watch(
+      () => [props.markOnly, props.realm],
+      async () => {
+        const component = defineAsyncComponent(() => {
+          if (props.markOnly) return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../assets/svg/branding/mark/mark-aero.svg": () => import("../assets/svg/branding/mark/mark-aero.svg.js"), "../assets/svg/branding/mark/mark-atv.svg": () => import("../assets/svg/branding/mark/mark-atv.svg.js"), "../assets/svg/branding/mark/mark-boatmart.svg": () => import("../assets/svg/branding/mark/mark-boatmart.svg.js"), "../assets/svg/branding/mark/mark-cycle.svg": () => import("../assets/svg/branding/mark/mark-cycle.svg.js"), "../assets/svg/branding/mark/mark-equipment.svg": () => import("../assets/svg/branding/mark/mark-equipment.svg.js"), "../assets/svg/branding/mark/mark-pwc.svg": () => import("../assets/svg/branding/mark/mark-pwc.svg.js"), "../assets/svg/branding/mark/mark-rv.svg": () => import("../assets/svg/branding/mark/mark-rv.svg.js"), "../assets/svg/branding/mark/mark-rvt.svg": () => import("../assets/svg/branding/mark/mark-rvt.svg.js"), "../assets/svg/branding/mark/mark-snow.svg": () => import("../assets/svg/branding/mark/mark-snow.svg.js"), "../assets/svg/branding/mark/mark-truck.svg": () => import("../assets/svg/branding/mark/mark-truck.svg.js") }), `../assets/svg/branding/mark/mark-${props.realm}.svg`, 6);
+          else return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../assets/svg/branding/logo/logo-aero.svg": () => import("../assets/svg/branding/logo/logo-aero.svg.js"), "../assets/svg/branding/logo/logo-atv.svg": () => import("../assets/svg/branding/logo/logo-atv.svg.js"), "../assets/svg/branding/logo/logo-boatmart.svg": () => import("../assets/svg/branding/logo/logo-boatmart.svg.js"), "../assets/svg/branding/logo/logo-cycle.svg": () => import("../assets/svg/branding/logo/logo-cycle.svg.js"), "../assets/svg/branding/logo/logo-equipment.svg": () => import("../assets/svg/branding/logo/logo-equipment.svg.js"), "../assets/svg/branding/logo/logo-pwc.svg": () => import("../assets/svg/branding/logo/logo-pwc.svg.js"), "../assets/svg/branding/logo/logo-rv.svg": () => import("../assets/svg/branding/logo/logo-rv.svg.js"), "../assets/svg/branding/logo/logo-rvt.svg": () => import("../assets/svg/branding/logo/logo-rvt.svg.js"), "../assets/svg/branding/logo/logo-snow.svg": () => import("../assets/svg/branding/logo/logo-snow.svg.js"), "../assets/svg/branding/logo/logo-truck.svg": () => import("../assets/svg/branding/logo/logo-truck.svg.js") }), `../assets/svg/branding/logo/logo-${props.realm}.svg`, 6);
+        });
+        innerSVG.value = markRaw(component);
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tide-realm-logo", props.markOnly ? "mark" : "full"]),
+        style: normalizeStyle({
+          "--logo-height-full": logoFull.value.height,
+          "--logo-height-mark": logoMark.height,
+          "--logo-height-small": logoSmall.value.height,
+          "--logo-width-full": logoFull.value.width,
+          "--logo-width-mark": logoMark.width,
+          "--logo-width-small": logoSmall.value.width
+        })
+      }, [
+        innerSVG.value ? (openBlock(), createBlock(resolveDynamicComponent(innerSVG.value), {
+          key: 0,
+          class: normalizeClass([unref(CSS).DISPLAY.BLOCK])
+        }, null, 8, ["class"])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideRealmLogo.vue2.js.map

package/dist/components/TideRealmLogo.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideRealmLogo.vue2.js","sources":["../../src/components/TideRealmLogo.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a realm logo component intended to be used for displaying a realm's logo.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tiderealmlogo--docs) for TideRealmLogo\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, defineAsyncComponent, markRaw, ref, watch } from 'vue';\n\n  import { LOGO_HEIGHT, LOGO_WIDTH_LARGE } from '@/types/RealmLogo';\n  import { CSS } from '@/types/Styles';\n  import { getRealmKeyFromRealm } from '@/utilities/realm';\n\n  import type { Realm } from '@/types/Realm';\n  import type { Component } from 'vue';\n\n  type Props = {\n    /** Determines whether to include text in the logo */\n    markOnly?: boolean;\n\n    /** Sets the realm for this logo instance */\n    realm: Realm;\n  };\n  const props = withDefaults(defineProps<Props>(), {\n    markOnly: false,\n  });\n\n  const innerSVG = ref<Component>();\n\n  type CssLengthPixels = `${number}px`;\n  type LogoSize = {\n    height: CssLengthPixels;\n    width: CssLengthPixels;\n  };\n\n  const logoFull = computed<LogoSize>(() => ({\n    height: `${LOGO_HEIGHT.LARGE}px`,\n    width: `${LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)]}px`,\n  }));\n\n  const logoSmall = computed<LogoSize>(() => {\n    const shrinkFactor = LOGO_HEIGHT.SMALL / LOGO_HEIGHT.LARGE;\n    return {\n      height: `${LOGO_HEIGHT.SMALL}px`,\n      width: `${Math.round(LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)] * shrinkFactor)}px`,\n    };\n  });\n\n  const logoMark: LogoSize = {\n    height: '32px',\n    width: '32px',\n  } as const;\n\n  watch(\n    () => [props.markOnly, props.realm],\n    async () => {\n      const component = defineAsyncComponent(() => {\n        if (props.markOnly) return import(`../assets/svg/branding/mark/mark-${props.realm}.svg?component`);\n        else return import(`../assets/svg/branding/logo/logo-${props.realm}.svg?component`);\n      });\n      innerSVG.value = markRaw(component);\n    },\n    { immediate: true }\n  );\n</script>\n\n<template>\n  <div\n    :class=\"['tide-realm-logo', props.markOnly ? 'mark' : 'full']\"\n    :style=\"{\n      '--logo-height-full': logoFull.height,\n      '--logo-height-mark': logoMark.height,\n      '--logo-height-small': logoSmall.height,\n      '--logo-width-full': logoFull.width,\n      '--logo-width-mark': logoMark.width,\n      '--logo-width-small': logoSmall.width,\n    }\"\n  >\n    <Component\n      :class=\"[CSS.DISPLAY.BLOCK]\"\n      :is=\"innerSVG\"\n      v-if=\"innerSVG\"\n    />\n  </div>\n</template>\n\n<style scoped>\n  .tide-realm-logo,\n  .tide-realm-logo.large {\n    width: var(--logo-width-full);\n    height: var(--logo-height-full);\n  }\n\n  .tide-realm-logo.small {\n    width: var(--logo-width-small);\n    height: var(--logo-height-small);\n  }\n\n  .tide-realm-logo.mark {\n    width: var(--logo-width-mark);\n    height: var(--logo-height-mark);\n  }\n\n  @media (min-width: 768px) {\n    .tide-realm-logo.sm-small {\n      width: var(--logo-width-small);\n      height: var(--logo-height-small);\n    }\n\n    .tide-realm-logo.sm-large {\n      width: var(--logo-width-full);\n      height: var(--logo-height-full);\n    }\n  }\n\n  @media (min-width: 992px) {\n    .tide-realm-logo.md-small {\n      width: var(--logo-width-small);\n      height: var(--logo-height-small);\n    }\n\n    .tide-realm-logo.md-large {\n      width: var(--logo-width-full);\n      height: var(--logo-height-full);\n    }\n  }\n\n  @media (min-width: 1232px) {\n    .tide-realm-logo.lg-small {\n      width: var(--logo-width-small);\n      height: var(--logo-height-small);\n    }\n\n    .tide-realm-logo.lg-large {\n      width: var(--logo-width-full);\n      height: var(--logo-height-full);\n    }\n  }\n\n  @media (min-width: 1920px) {\n    .tide-realm-logo.xl-small {\n      width: var(--logo-width-small);\n      height: var(--logo-height-small);\n    }\n\n    .tide-realm-logo.xl-large {\n      width: var(--logo-width-full);\n      height: var(--logo-height-full);\n    }\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_unref"],"mappings":";;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;AAoBf,UAAM,QAAQ;AAId,UAAM,WAAW,IAAA;AAQjB,UAAM,WAAW,SAAmB,OAAO;AAAA,MACzC,QAAQ,GAAG,YAAY,KAAK;AAAA,MAC5B,OAAO,GAAG,iBAAiB,qBAAqB,MAAM,KAAK,CAAC,CAAC;AAAA,IAAA,EAC7D;AAEF,UAAM,YAAY,SAAmB,MAAM;AACzC,YAAM,eAAe,YAAY,QAAQ,YAAY;AACrD,aAAO;AAAA,QACL,QAAQ,GAAG,YAAY,KAAK;AAAA,QAC5B,OAAO,GAAG,KAAK,MAAM,iBAAiB,qBAAqB,MAAM,KAAK,CAAC,IAAI,YAAY,CAAC;AAAA,MAAA;AAAA,IAE5F,CAAC;AAED,UAAM,WAAqB;AAAA,MACzB,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAGT;AAAA,MACE,MAAM,CAAC,MAAM,UAAU,MAAM,KAAK;AAAA,MAClC,YAAY;AACV,cAAM,YAAY,qBAAqB,MAAM;AAC3C,cAAI,MAAM,SAAU,QAAO,qCAAA,uBAAA,OAAA,EAAA,6CAAA,MAAA,OAAA,8CAAA,GAAA,4CAAA,MAAA,OAAA,6CAAA,GAAA,iDAAA,MAAA,OAAA,kDAAA,GAAA,8CAAA,MAAA,OAAA,+CAAA,GAAA,kDAAA,MAAA,OAAA,mDAAA,GAAA,4CAAA,MAAA,OAAA,6CAAA,GAAA,2CAAA,MAAA,OAAA,4CAAA,GAAA,4CAAA,MAAA,OAAA,6CAAA,GAAA,6CAAA,MAAA,OAAA,8CAAA,GAAA,8CAAA,MAAA,OAAA,+CAAA,EAAA,CAAA,GAAA,oCAAA,MAAA,KAAA,QAAA,CAAA;AAAA,cACtB,QAAO,koCAAA,oCAAA,MAAA,KAAA,QAAA,CAAA;AAAA,QACd,CAAC;AACD,iBAAS,QAAQ,QAAQ,SAAS;AAAA,MACpC;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;;0BAKpBA,mBAgBM,OAAA;AAAA,QAfH,OAAKC,eAAA,CAAA,mBAAsB,MAAM,WAAQ,SAAA,MAAA,CAAA;AAAA,QACzC,OAAKC,eAAA;AAAA,UAAgC,sBAAA,SAAA,MAAS;AAAA,UAAoC,sBAAA,SAAS;AAAA,UAAqC,uBAAA,UAAA,MAAU;AAAA,UAAmC,qBAAA,SAAA,MAAS;AAAA,UAAkC,qBAAA,SAAS;AAAA,UAAmC,sBAAA,UAAA,MAAU;AAAA,QAAA;;QAYvQ,SAAA,SAHRC,UAAA,GAAAC,YAIEC,wBAFK,SAAA,KAAQ,GAAA;AAAA;UADZ,OAAKJ,eAAA,CAAGK,MAAA,GAAA,EAAI,QAAQ,KAAK,CAAA;AAAA,QAAA;;;;;"}

package/dist/components/TideSeoLinks.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideSeoLinks.vue2.js";
+/* empty css                  */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideSeoLinks = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5cd4472f"]]);
+export {
+  TideSeoLinks as default
+};
+//# sourceMappingURL=TideSeoLinks.vue.js.map

package/dist/components/TideSeoLinks.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSeoLinks.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideSeoLinks.vue2.js

@@ -0,0 +1,47 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, toDisplayString, Fragment, renderList, createVNode, withCtx, createTextVNode } from "vue";
+import _sfc_main$1 from "./InternalBaseLink.vue.js";
+import { CSS } from "../types/Styles.js";
+import { TARGET } from "../types/Target.js";
+const _hoisted_1 = { class: "tide-seo-links" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TideSeoLinks",
+  props: {
+    heading: { default: "" },
+    links: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", _hoisted_1, [
+        createElementVNode("h2", {
+          class: normalizeClass([unref(CSS).MARGIN.BOTTOM.HALF])
+        }, toDisplayString(props.heading), 3),
+        createElementVNode("ul", {
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.WRAP, unref(CSS).GAP.TWO, unref(CSS).LIST_BULLETS.OFF])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.links, (link) => {
+            return openBlock(), createElementBlock("li", {
+              class: normalizeClass(["tide-seo-link", unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).GAP.QUARTER, unref(CSS).FONT.ROLE.BODY_2]),
+              key: link.label
+            }, [
+              createVNode(_sfc_main$1, {
+                class: normalizeClass([unref(CSS).UNDERLINE.REST.OFF]),
+                href: link.url,
+                target: link.isNewTab ? unref(TARGET).BLANK : unref(TARGET).SELF
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(link.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "href", "target"])
+            ], 2);
+          }), 128))
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideSeoLinks.vue2.js.map

package/dist/components/TideSeoLinks.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSeoLinks.vue2.js","sources":["../../src/components/TideSeoLinks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\n  import { CSS } from '@/types/Styles';\n  import { TARGET } from '@/types/Target';\n\n  import type { Link } from '@/types/Link';\n\n  type Props = {\n    heading?: string;\n    links: Link[];\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    heading: '',\n  });\n</script>\n\n<template>\n  <section class=\"tide-seo-links\">\n    <h2 :class=\"[CSS.MARGIN.BOTTOM.HALF]\">\n      {{ props.heading }}\n    </h2>\n\n    <ul :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]\">\n      <li\n        :class=\"['tide-seo-link', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, CSS.FONT.ROLE.BODY_2]\"\n        :key=\"link.label\"\n        v-for=\"link in props.links\"\n      >\n        <InternalBaseLink\n          :class=\"[CSS.UNDERLINE.REST.OFF]\"\n          :href=\"link.url\"\n          :target=\"link.isNewTab ? TARGET.BLANK : TARGET.SELF\"\n        >\n          {{ link.label }}\n        </InternalBaseLink>\n      </li>\n    </ul>\n  </section>\n</template>\n\n<style scoped>\n  /* TODO: Refactor to accept breakpoint prop in order to accomplish this with neither custom breakpoints nor dependency on ViewportStore. */\n  .tide-seo-link {\n    width: 100%;\n  }\n\n  @media (min-width: 992px) {\n    .tide-seo-link {\n      width: calc((100% - 2rem) / 2);\n    }\n  }\n\n  @media (min-width: 1232px) {\n    .tide-seo-link {\n      width: calc((100% - 6rem) / 4);\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_toDisplayString","_normalizeClass","_Fragment","_renderList","_createVNode","InternalBaseLink","_createTextVNode"],"mappings":";;;;;;;;;;;;AAYE,UAAM,QAAQ;;AAMd,aAAAA,UAAA,GAAAC,mBAoBU,WApBV,YAoBU;AAAA,QAnBRC,mBAEK,MAAA;AAAA,UAFA,uBAAQC,MAAA,GAAA,EAAI,OAAO,OAAO,IAAI,CAAA;AAAA,QAAA,GAC9BC,gBAAA,MAAM,OAAO,GAAA,CAAA;AAAA,QAGlBF,mBAcK,MAAA;AAAA,UAdA,OAAKG,eAAA,CAAGF,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,MAAMA,MAAA,GAAA,EAAI,IAAI,KAAKA,MAAA,GAAA,EAAI,aAAa,GAAG,CAAA;AAAA,QAAA;WAC7EH,UAAA,IAAA,GAAAC,mBAYKK,UAAA,MAAAC,WATY,MAAM,QAAd,SAAI;gCAHbN,mBAYK,MAAA;AAAA,cAXF,OAAKI,eAAA,CAAA,iBAAoBF,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,UAAU,QAAQA,MAAA,GAAA,EAAI,IAAI,SAASA,MAAA,GAAA,EAAI,KAAK,KAAK,MAAM,CAAA;AAAA,cAC3G,KAAK,KAAK;AAAA,YAAA;cAGXK,YAMmBC,aAAA;AAAA,gBALhB,uBAAQN,MAAA,GAAA,EAAI,UAAU,KAAK,GAAG,CAAA;AAAA,gBAC9B,MAAM,KAAK;AAAA,gBACX,QAAQ,KAAK,WAAWA,MAAA,MAAA,EAAO,QAAQA,MAAA,MAAA,EAAO;AAAA,cAAA;iCAE/C,MAAgB;AAAA,kBAAbO,gBAAAN,gBAAA,KAAK,KAAK,GAAA,CAAA;AAAA,gBAAA;;;;;;;;;;"}

package/dist/components/TideSheet.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideSheet.vue2.js";
+/* empty css               */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideSheet = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4f5c60b8"]]);
+export {
+  TideSheet as default
+};
+//# sourceMappingURL=TideSheet.vue.js.map

package/dist/components/TideSheet.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSheet.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideSheet.vue2.js

@@ -0,0 +1,140 @@
+import { defineComponent, ref, useModel, watch, onBeforeMount, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, unref, createElementVNode, mergeProps, withKeys, withModifiers, normalizeClass, createCommentVNode, createVNode, renderSlot, mergeModels } from "vue";
+import _sfc_main$1 from "./TideButtonIcon.vue.js";
+import TideDivider from "./TideDivider.vue.js";
+import { ICON } from "../types/Icon.js";
+import { PRIORITY } from "../types/Priority.js";
+import { CSS } from "../types/Styles.js";
+import { initFauxTopLayer, TOP_LAYER_ID, setScrollLock } from "../utilities/viewport.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideSheet",
+  props: /* @__PURE__ */ mergeModels({
+    isBackButton: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["back"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const dialogElement = ref(null);
+    const isOpen = useModel(__props, "modelValue");
+    const triggerNativeDialogOpen = () => {
+      var _a;
+      (_a = dialogElement.value) == null ? void 0 : _a.showModal();
+      setScrollLock(true);
+    };
+    const triggerNativeDialogClose = () => {
+      var _a;
+      (_a = dialogElement.value) == null ? void 0 : _a.close();
+      setScrollLock(false);
+    };
+    const close = () => {
+      isOpen.value = false;
+    };
+    const handleBackdropClick = () => {
+      close();
+    };
+    const handleEscapeKeyup = () => {
+      close();
+    };
+    watch(isOpen, () => {
+      if (!dialogElement.value) return;
+      if (isOpen.value) {
+        triggerNativeDialogOpen();
+      } else {
+        triggerNativeDialogClose();
+      }
+    });
+    onBeforeMount(() => {
+      initFauxTopLayer();
+    });
+    onMounted(() => {
+      if (isOpen.value) {
+        triggerNativeDialogOpen();
+      }
+    });
+    onBeforeUnmount(() => {
+      if (isOpen.value) {
+        isOpen.value = false;
+        triggerNativeDialogClose();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: `#${unref(TOP_LAYER_ID)}`
+      }, [
+        createElementVNode("dialog", mergeProps(_ctx.$attrs, {
+          class: ["tide-sheet", unref(CSS).BG.INITIAL, unref(CSS).HEIGHT.FULL, unref(CSS).WIDTH.FULL, unref(CSS).OVERFLOW.XY.HIDDEN],
+          ref_key: "dialogElement",
+          ref: dialogElement,
+          onCancel: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["prevent"])),
+          onClick: withModifiers(handleBackdropClick, ["self"]),
+          onKeyup: withKeys(handleEscapeKeyup, ["escape"]),
+          closedby: "none"
+        }), [
+          createElementVNode("div", {
+            class: normalizeClass([
+              "tide-sheet-body",
+              unref(CSS).BG.SURFACE.DEFAULT,
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).FLEX.DIRECTION.COLUMN,
+              unref(CSS).HEIGHT.FULL,
+              unref(CSS).OVERFLOW.XY.HIDDEN,
+              unref(CSS).WIDTH.FULL
+            ])
+          }, [
+            createElementVNode("header", {
+              class: normalizeClass([
+                unref(CSS).DISPLAY.FLEX,
+                unref(CSS).ISOLATION.ISOLATE,
+                unref(CSS).PADDING.TOP.ONE,
+                unref(CSS).PADDING.X.ONE,
+                unref(CSS).POSITION.RELATIVE,
+                unref(CSS).Z_INDEX.ONE
+              ])
+            }, [
+              __props.isBackButton ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                class: normalizeClass([unref(CSS).FLEX.GROW.OFF, unref(CSS).FLEX.SHRINK.OFF]),
+                icon: unref(ICON).CHEVRON_LEFT,
+                priority: unref(PRIORITY).QUATERNARY,
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("back")),
+                "data-test": "tide-sheet-back"
+              }, null, 8, ["class", "icon", "priority"])) : createCommentVNode("", true),
+              createVNode(_sfc_main$1, {
+                class: normalizeClass([unref(CSS).FLEX.GROW.OFF, unref(CSS).FLEX.SHRINK.OFF, unref(CSS).MARGIN.LEFT.AUTO]),
+                icon: unref(ICON).CLOSE,
+                priority: unref(PRIORITY).QUATERNARY,
+                onClick: close,
+                "data-test": "tide-sheet-close"
+              }, null, 8, ["class", "icon", "priority"])
+            ], 2),
+            createVNode(TideDivider),
+            createElementVNode("div", {
+              class: normalizeClass([
+                "tide-sheet-content",
+                unref(CSS).DISPLAY.GRID,
+                unref(CSS).HEIGHT.FULL,
+                unref(CSS).ISOLATION.ISOLATE,
+                unref(CSS).OVERFLOW.X.HIDDEN,
+                unref(CSS).OVERFLOW.Y.AUTO,
+                unref(CSS).PADDING.BOTTOM.ONE,
+                unref(CSS).POSITION.RELATIVE,
+                unref(CSS).WIDTH.FULL
+              ])
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 2)
+          ], 2)
+        ], 16)
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideSheet.vue2.js.map

package/dist/components/TideSheet.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSheet.vue2.js","sources":["../../src/components/TideSheet.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a sheet component intended to be used for displaying content in a modal-like menu overlay on the right side of the screen.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidesheet--docs) for TideSheet\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script lang=\"ts\" setup>\n  import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import TideDivider from '@/components/TideDivider.vue';\n  import { ICON } from '@/types/Icon';\n  import { PRIORITY } from '@/types/Priority';\n  import { CSS } from '@/types/Styles';\n  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';\n\n  import type { Ref } from 'vue';\n\n  type Props = {\n    /** Controls display of the back button. */\n    isBackButton?: boolean;\n  };\n\n  withDefaults(defineProps<Props>(), {\n    isBackButton: false,\n  });\n\n  type Emits = {\n    (e: 'back'): void;\n  };\n\n  const emit = defineEmits<Emits>();\n\n  const dialogElement: Ref<HTMLDialogElement | null> = ref(null);\n\n  const isOpen = defineModel<boolean>({ required: true });\n\n  const triggerNativeDialogOpen = () => {\n    dialogElement.value?.showModal();\n    setScrollLock(true);\n  };\n\n  const triggerNativeDialogClose = () => {\n    dialogElement.value?.close();\n    setScrollLock(false);\n  };\n\n  const close = () => {\n    isOpen.value = false;\n  };\n\n  const handleBackdropClick = () => {\n    close();\n  };\n\n  const handleEscapeKeyup = () => {\n    close();\n  };\n\n  watch(isOpen, () => {\n    if (!dialogElement.value) return;\n    if (isOpen.value) {\n      triggerNativeDialogOpen();\n    } else {\n      triggerNativeDialogClose();\n    }\n  });\n\n  onBeforeMount(() => {\n    initFauxTopLayer();\n  });\n\n  onMounted(() => {\n    if (isOpen.value) {\n      triggerNativeDialogOpen();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    if (isOpen.value) {\n      isOpen.value = false;\n      triggerNativeDialogClose();\n    }\n  });\n</script>\n\n<template>\n  <Teleport :to=\"`#${TOP_LAYER_ID}`\">\n    <dialog\n      v-bind=\"$attrs\"\n      :class=\"['tide-sheet', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]\"\n      ref=\"dialogElement\"\n      @cancel.prevent\n      @click.self=\"handleBackdropClick\"\n      @keyup.escape=\"handleEscapeKeyup\"\n      closedby=\"none\"\n    >\n      <div\n        :class=\"[\n          'tide-sheet-body',\n          CSS.BG.SURFACE.DEFAULT,\n          CSS.DISPLAY.FLEX,\n          CSS.FLEX.DIRECTION.COLUMN,\n          CSS.HEIGHT.FULL,\n          CSS.OVERFLOW.XY.HIDDEN,\n          CSS.WIDTH.FULL,\n        ]\"\n      >\n        <header\n          :class=\"[\n            CSS.DISPLAY.FLEX,\n            CSS.ISOLATION.ISOLATE,\n            CSS.PADDING.TOP.ONE,\n            CSS.PADDING.X.ONE,\n            CSS.POSITION.RELATIVE,\n            CSS.Z_INDEX.ONE,\n          ]\"\n        >\n          <TideButtonIcon\n            :class=\"[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]\"\n            :icon=\"ICON.CHEVRON_LEFT\"\n            :priority=\"PRIORITY.QUATERNARY\"\n            @click=\"emit('back')\"\n            data-test=\"tide-sheet-back\"\n            v-if=\"isBackButton\"\n          />\n\n          <TideButtonIcon\n            :class=\"[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]\"\n            :icon=\"ICON.CLOSE\"\n            :priority=\"PRIORITY.QUATERNARY\"\n            @click=\"close\"\n            data-test=\"tide-sheet-close\"\n          />\n        </header>\n\n        <TideDivider />\n\n        <div\n          :class=\"[\n            'tide-sheet-content',\n            CSS.DISPLAY.GRID,\n            CSS.HEIGHT.FULL,\n            CSS.ISOLATION.ISOLATE,\n            CSS.OVERFLOW.X.HIDDEN,\n            CSS.OVERFLOW.Y.AUTO,\n            CSS.PADDING.BOTTOM.ONE,\n            CSS.POSITION.RELATIVE,\n            CSS.WIDTH.FULL,\n          ]\"\n        >\n          <slot />\n        </div>\n      </div>\n    </dialog>\n  </Teleport>\n</template>\n\n<style scoped>\n  .tide-sheet {\n    --sheet-padding-x: var(--tide-spacing-1);\n    max-width: unset;\n    max-height: unset;\n    justify-items: right;\n    display: none;\n    transition: all var(--tide-animate) allow-discrete;\n    transform: translateX(100%);\n  }\n\n  .tide-sheet[open] {\n    display: grid;\n    transform: translateX(0%);\n  }\n\n  .tide-sheet::backdrop {\n    background-color: transparent;\n    transition: all var(--tide-animate) allow-discrete;\n    backdrop-filter: blur(0px);\n  }\n\n  .tide-sheet[open]::backdrop {\n    background-color: var(--tide-transparent-400);\n    backdrop-filter: var(--tide-bg-blur);\n  }\n\n  .tide-sheet-body {\n    max-width: min(calc(100vw - var(--tide-spacing-2)), 311px);\n  }\n\n  .tide-sheet-content {\n    grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);\n    contain: layout;\n  }\n\n  :where(.tide-sheet-content):deep(> :where(*)) {\n    grid-column: 2;\n  }\n\n  @starting-style {\n    .tide-sheet[open] {\n      display: grid;\n      transform: translateX(100%);\n    }\n\n    .tide-sheet[open]::backdrop {\n      background-color: transparent;\n      backdrop-filter: var(--tide-bg-blur);\n    }\n  }\n</style>\n"],"names":["_useModel","_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_normalizeClass","TideButtonIcon","_createVNode","_renderSlot"],"mappings":"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"}

package/dist/components/TideSwitch.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideSwitch.vue2.js";
+/* empty css                */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d623c7da"]]);
+export {
+  TideSwitch as default
+};
+//# sourceMappingURL=TideSwitch.vue.js.map

package/dist/components/TideSwitch.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSwitch.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideSwitch.vue2.js

@@ -0,0 +1,69 @@
+import { defineComponent, useModel, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, mergeModels } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import { ICON } from "../types/Icon.js";
+import { SIZE } from "../types/Size.js";
+import { CSS } from "../types/Styles.js";
+const _hoisted_1 = ["disabled"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const isActive = useModel(__props, "modelValue");
+    const handleClick = () => {
+      if (!props.disabled) {
+        isActive.value = !isActive.value;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass([
+          "tide-switch",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).BORDER.FULL.ONE,
+          unref(CSS).BORDER.RADIUS.FULL,
+          unref(CSS).OVERFLOW.XY.HIDDEN,
+          unref(CSS).FLEX.SHRINK.OFF,
+          unref(CSS).FLEX.GROW.OFF,
+          isActive.value ? ["active", unref(CSS).BG.SECONDARY] : [unref(CSS).BG.SURFACE.DEFAULT, unref(CSS).BORDER.COLOR.DEFAULT],
+          __props.disabled && [unref(CSS).OPACITY.DISABLED]
+        ]),
+        disabled: props.disabled,
+        onClick: handleClick,
+        "aria-label": "Switch",
+        type: "button"
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            "tide-switch-indicator",
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS1.CENTER,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).BORDER.RADIUS.FULL,
+            isActive.value ? ["active", unref(CSS).BG.SURFACE.DEFAULT] : [unref(CSS).BG.SECONDARY]
+          ])
+        }, [
+          createVNode(_sfc_main$1, {
+            icon: unref(ICON).CHECK,
+            size: unref(SIZE).LARGE
+          }, null, 8, ["icon", "size"])
+        ], 2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideSwitch.vue2.js.map

package/dist/components/TideSwitch.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideSwitch.vue2.js","sources":["../../src/components/TideSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a switch component intended to be used for toggling a boolean value.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideswitch--docs) for TideSwitch\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import TideIcon from '@/components/TideIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { SIZE } from '@/types/Size';\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines clickability */\n    disabled?: boolean;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    disabled: false,\n  });\n\n  const isActive = defineModel<boolean>({ required: true });\n\n  const handleClick = () => {\n    if (!props.disabled) {\n      isActive.value = !isActive.value;\n    }\n  };\n</script>\n\n<template>\n  <button\n    :class=\"[\n      'tide-switch',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.BORDER.FULL.ONE,\n      CSS.BORDER.RADIUS.FULL,\n      CSS.OVERFLOW.XY.HIDDEN,\n      CSS.FLEX.SHRINK.OFF,\n      CSS.FLEX.GROW.OFF,\n      isActive ? ['active', CSS.BG.SECONDARY] : [CSS.BG.SURFACE.DEFAULT, CSS.BORDER.COLOR.DEFAULT],\n      disabled && [CSS.OPACITY.DISABLED],\n    ]\"\n    :disabled=\"props.disabled\"\n    @click=\"handleClick\"\n    aria-label=\"Switch\"\n    type=\"button\"\n  >\n    <div\n      :class=\"[\n        'tide-switch-indicator',\n        CSS.POSITION.RELATIVE,\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS1.CENTER,\n        CSS.AXIS2.CENTER,\n        CSS.BORDER.RADIUS.FULL,\n        isActive ? ['active', CSS.BG.SURFACE.DEFAULT] : [CSS.BG.SECONDARY],\n      ]\"\n    >\n      <TideIcon\n        :icon=\"ICON.CHECK\"\n        :size=\"SIZE.LARGE\"\n      />\n    </div>\n  </button>\n</template>\n\n<style scoped>\n  .tide-switch {\n    --switch-indicator-size: 24px;\n    --switch-indicator-margin: var(--tide-spacing-1\\/4);\n    --switch-border-width: var(--tide-border-width-1);\n    --switch-width: calc(var(--switch-indicator-size) * 2 + var(--switch-indicator-margin) * 4);\n    --switch-height: calc(var(--switch-indicator-size) + var(--switch-indicator-margin) * 2);\n\n    width: var(--switch-width);\n    height: var(--switch-height);\n    transition: var(--tide-animate);\n    transition-property: background-color, border-color;\n  }\n\n  .tide-switch.active {\n    border-color: var(--tide-secondary);\n  }\n\n  .tide-switch-indicator {\n    left: var(--switch-indicator-margin);\n    transition: var(--tide-animate);\n    transition-property: left, border-color, background-color;\n  }\n\n  .tide-switch-indicator.active {\n    left: calc(\n      var(--switch-width) - var(--switch-indicator-size) - var(--switch-indicator-margin) - var(--switch-border-width)\n    );\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","TideIcon"],"mappings":";;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;AAcf,UAAM,QAAQ;AAId,UAAM,WAAWA,8BAAuC;AAExD,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAU;AACnB,iBAAS,QAAQ,CAAC,SAAS;AAAA,MAC7B;AAAA,IACF;;0BAIAC,mBAkCS,UAAA;AAAA,QAjCN,OAAKC,eAAA;AAAA;UAA+BC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,UAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,UAAYA,MAAA,GAAA,EAAI,SAAS,GAAG;AAAA,UAAcA,MAAA,GAAA,EAAI,KAAK,OAAO;AAAA,UAAWA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,UAAW,SAAA,QAAQ,CAAA,UAAcA,WAAI,GAAG,SAAS,IAAA,CAAKA,WAAI,GAAG,QAAQ,SAASA,MAAA,GAAA,EAAI,OAAO,MAAM,OAAO;AAAA,UAAS,QAAA,YAAQ,CAAKA,MAAA,GAAA,EAAI,QAAQ,QAAQ;AAAA,QAAA;QAYpW,UAAU,MAAM;AAAA,QAChB,SAAO;AAAA,QACR,cAAW;AAAA,QACX,MAAK;AAAA,MAAA;QAELC,mBAeM,OAAA;AAAA,UAdH,OAAKF,eAAA;AAAA;YAA6CC,MAAA,GAAA,EAAI,SAAS;AAAA,YAAkBA,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,YAAc,SAAA,QAAQ,CAAA,UAAcA,MAAA,GAAA,EAAI,GAAG,QAAQ,OAAO,IAAA,CAAKA,MAAA,GAAA,EAAI,GAAG,SAAS;AAAA,UAAA;;UAUjQE,YAGEC,aAAA;AAAA,YAFC,MAAMH,MAAA,IAAA,EAAK;AAAA,YACX,MAAMA,MAAA,IAAA,EAAK;AAAA,UAAA;;;;;;"}

package/dist/components/TideTabs.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideTabs.vue2.js";
+/* empty css              */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-92f91fcb"]]);
+export {
+  TideTabs as default
+};
+//# sourceMappingURL=TideTabs.vue.js.map

package/dist/components/TideTabs.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideTabs.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideTabs.vue2.js

@@ -0,0 +1,60 @@
+import { defineComponent, useModel, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, Fragment, renderList, createElementVNode, mergeModels } from "vue";
+import TideCarousel from "./TideCarousel.vue.js";
+import _sfc_main$1 from "./TideLink.vue.js";
+import { ELEMENT } from "../types/Element.js";
+import { CSS } from "../types/Styles.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideTabs",
+  props: /* @__PURE__ */ mergeModels({
+    tabs: {}
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const currentTab = useModel(__props, "modelValue");
+    const handleClick = (index) => {
+      currentTab.value = index;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tide-tabs", unref(CSS).DISPLAY.FLEX, unref(CSS).BORDER.BOTTOM.TWO, unref(CSS).BORDER.COLOR.LOW])
+      }, [
+        createVNode(TideCarousel, { "is-floating": true }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
+              return openBlock(), createElementBlock("li", {
+                class: normalizeClass([unref(CSS).PADDING.X.HALF]),
+                key: tab.label
+              }, [
+                createVNode(_sfc_main$1, {
+                  class: normalizeClass([
+                    index === currentTab.value ? [unref(CSS).FONT.COLOR.SURFACE.BRAND] : [unref(CSS).FONT.COLOR.SURFACE.VARIANT],
+                    unref(CSS).PADDING.BOTTOM.ONE,
+                    unref(CSS).FONT.ROLE.LABEL_1,
+                    unref(CSS).WHITESPACE_WRAP.OFF
+                  ]),
+                  element: unref(ELEMENT).BUTTON,
+                  label: tab.label,
+                  subtle: true,
+                  onClick: ($event) => handleClick(index)
+                }, null, 8, ["class", "element", "label", "onClick"]),
+                createElementVNode("div", {
+                  class: normalizeClass(["rounded-border", unref(CSS).MARGIN.X.HALF, index === currentTab.value && [unref(CSS).BG.PRIMARY]])
+                }, null, 2)
+              ], 2);
+            }), 128))
+          ]),
+          _: 1
+        })
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideTabs.vue2.js.map

package/dist/components/TideTabs.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideTabs.vue2.js","sources":["../../src/components/TideTabs.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a tabs component intended to be used for navigation.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetabs--docs) for TideTabs\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import TideCarousel from '@/components/TideCarousel.vue';\n  import TideLink from '@/components/TideLink.vue';\n  import { ELEMENT } from '@/types/Element';\n  import { CSS } from '@/types/Styles';\n\n  import type { Tab } from '@/types/Tab';\n\n  type Props = {\n    /** Sets labels and callback for each tab */\n    tabs: Tab[];\n  };\n\n  defineProps<Props>();\n\n  const currentTab = defineModel<number>({ required: true });\n\n  const handleClick = (index: number) => {\n    currentTab.value = index;\n  };\n</script>\n\n<template>\n  <div :class=\"['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]\">\n    <TideCarousel :is-floating=\"true\">\n      <li\n        :class=\"[CSS.PADDING.X.HALF]\"\n        :key=\"tab.label\"\n        v-for=\"(tab, index) in tabs\"\n      >\n        <TideLink\n          :class=\"[\n            index === currentTab ? [CSS.FONT.COLOR.SURFACE.BRAND] : [CSS.FONT.COLOR.SURFACE.VARIANT],\n            CSS.PADDING.BOTTOM.ONE,\n            CSS.FONT.ROLE.LABEL_1,\n            CSS.WHITESPACE_WRAP.OFF,\n          ]\"\n          :element=\"ELEMENT.BUTTON\"\n          :label=\"tab.label\"\n          :subtle=\"true\"\n          @click=\"handleClick(index)\"\n        />\n        <div :class=\"['rounded-border', CSS.MARGIN.X.HALF, index === currentTab && [CSS.BG.PRIMARY]]\" />\n      </li>\n    </TideCarousel>\n  </div>\n</template>\n\n<style scoped>\n  .rounded-border {\n    height: 4px;\n    border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createVNode","_openBlock","_Fragment","_renderList","TideLink","_createElementVNode"],"mappings":";;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;AAkBf,UAAM,aAAaA,8BAAsC;AAEzD,UAAM,cAAc,CAAC,UAAkB;AACrC,iBAAW,QAAQ;AAAA,IACrB;;0BAIAC,mBAsBM,OAAA;AAAA,QAtBA,OAAKC,eAAA,CAAA,aAAgBC,WAAI,QAAQ,MAAMA,WAAI,OAAO,OAAO,KAAKA,MAAA,GAAA,EAAI,OAAO,MAAM,GAAG,CAAA;AAAA,MAAA;QACtFC,YAoBe,cAAA,EApBA,eAAa,QAAI;AAAA,2BAI5B,MAA4B;AAAA,aAH9BC,UAAA,IAAA,GAAAJ,mBAkBKK,UAAA,MAAAC,WAfoB,QAAA,MAAI,CAAnB,KAAK,UAAK;kCAHpBN,mBAkBK,MAAA;AAAA,gBAjBF,uBAAQE,MAAA,GAAA,EAAI,QAAQ,EAAE,IAAI,CAAA;AAAA,gBAC1B,KAAK,IAAI;AAAA,cAAA;gBAGVC,YAWEI,aAAA;AAAA,kBAVC,OAAKN,eAAA;AAAA,oBAAgB,UAAU,mBAAU,CAAIC,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,KAAK,IAAA,CAAKA,WAAI,KAAK,MAAM,QAAQ,OAAO;AAAA,oBAAeA,MAAA,GAAA,EAAI,QAAQ,OAAO;AAAA,oBAAiBA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,oBAAqBA,MAAA,GAAA,EAAI,gBAAgB;AAAA,kBAAA;kBAMtN,SAASA,MAAA,OAAA,EAAQ;AAAA,kBACjB,OAAO,IAAI;AAAA,kBACX,QAAQ;AAAA,kBACR,SAAK,CAAA,WAAE,YAAY,KAAK;AAAA,gBAAA;gBAE3BM,mBAAgG,OAAA;AAAA,kBAA1F,yCAA0BN,MAAA,GAAA,EAAI,OAAO,EAAE,MAAM,UAAU,WAAA,SAAU,CAAKA,WAAI,GAAG,OAAO,CAAA,CAAA;AAAA,gBAAA;;;;;;;;;;"}

package/dist/components/TideToaster.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideToaster.vue2.js";
+/* empty css                 */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideToaster = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-158c6081"]]);
+export {
+  TideToaster as default
+};
+//# sourceMappingURL=TideToaster.vue.js.map

package/dist/components/TideToaster.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideToaster.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideToaster.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent, onBeforeMount, openBlock, createBlock, Teleport, unref, createElementVNode, mergeProps, createVNode, TransitionGroup, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createTextVNode, toDisplayString } from "vue";
+import TideAlert from "./TideAlert.vue.js";
+import { useTideToaster } from "../composables/useTideToaster.js";
+import { CSS } from "../types/Styles.js";
+import { initFauxTopLayer, TOP_LAYER_ID } from "../utilities/viewport.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideToaster",
+  setup(__props) {
+    const { toasts, clearToasts, cancelAutoDismiss, startAutoDismiss } = useTideToaster();
+    onBeforeMount(() => {
+      initFauxTopLayer();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: `#${unref(TOP_LAYER_ID)}`
+      }, [
+        createElementVNode("div", mergeProps(_ctx.$attrs, {
+          class: [
+            "tide-toaster",
+            unref(CSS).HEIGHT.FULL,
+            unref(CSS).POINTER_EVENTS.OFF,
+            unref(CSS).POSITION.FIXED,
+            unref(CSS).POSITIONING.LEFT,
+            unref(CSS).POSITIONING.TOP,
+            unref(CSS).WIDTH.FULL
+          ]
+        }), [
+          createVNode(TransitionGroup, { name: "pop" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts), (toast) => {
+                var _a, _b;
+                return openBlock(), createElementBlock("div", {
+                  class: normalizeClass([
+                    "tide-toast-wrap",
+                    unref(CSS).POINTER_EVENTS.ON,
+                    unref(CSS).POSITION.ABSOLUTE,
+                    unref(CSS).Z_INDEX.ONE,
+                    unref(CSS).POSITIONING.RIGHT,
+                    unref(CSS).POSITIONING.TOP,
+                    unref(CSS).MARGIN.FULL.ONE,
+                    unref(CSS).WIDTH.STRETCH
+                  ]),
+                  key: toast.id,
+                  onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
+                  (...args) => unref(cancelAutoDismiss) && unref(cancelAutoDismiss)(...args)),
+                  onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+                  (...args) => unref(startAutoDismiss) && unref(startAutoDismiss)(...args))
+                }, [
+                  createVNode(TideAlert, {
+                    "cta-label": (_a = toast.action) == null ? void 0 : _a.label,
+                    heading: toast.heading,
+                    style: { "--tide-max-width": "none" },
+                    onClose: unref(clearToasts),
+                    onCtaClick: (_b = toast == null ? void 0 : toast.action) == null ? void 0 : _b.callback,
+                    "is-dismissible": "",
+                    "is-toast": ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(toast.description), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["cta-label", "heading", "onClose", "onCtaClick"])
+                ], 34);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ], 16)
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideToaster.vue2.js.map

package/dist/components/TideToaster.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideToaster.vue2.js","sources":["../../src/components/TideToaster.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a toaster component intended to be used for displaying notifications.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetoaster--docs) for TideToaster\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script setup lang=\"ts\">\n  import { onBeforeMount } from 'vue';\n\n  import TideAlert from '@/components/TideAlert.vue';\n  import { useTideToaster } from '@/composables/useTideToaster';\n  import { CSS } from '@/types/Styles';\n  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';\n\n  const { toasts, clearToasts, cancelAutoDismiss, startAutoDismiss } = useTideToaster();\n\n  onBeforeMount(() => {\n    initFauxTopLayer();\n  });\n</script>\n\n<template>\n  <Teleport :to=\"`#${TOP_LAYER_ID}`\">\n    <div\n      v-bind=\"$attrs\"\n      :class=\"[\n        'tide-toaster',\n        CSS.HEIGHT.FULL,\n        CSS.POINTER_EVENTS.OFF,\n        CSS.POSITION.FIXED,\n        CSS.POSITIONING.LEFT,\n        CSS.POSITIONING.TOP,\n        CSS.WIDTH.FULL,\n      ]\"\n    >\n      <TransitionGroup name=\"pop\">\n        <div\n          :class=\"[\n            'tide-toast-wrap',\n            CSS.POINTER_EVENTS.ON,\n            CSS.POSITION.ABSOLUTE,\n            CSS.Z_INDEX.ONE,\n            CSS.POSITIONING.RIGHT,\n            CSS.POSITIONING.TOP,\n            CSS.MARGIN.FULL.ONE,\n            CSS.WIDTH.STRETCH,\n          ]\"\n          :key=\"toast.id\"\n          @mouseenter=\"cancelAutoDismiss\"\n          @mouseleave=\"startAutoDismiss\"\n          v-for=\"toast in toasts\"\n        >\n          <TideAlert\n            :cta-label=\"toast.action?.label\"\n            :heading=\"toast.heading\"\n            :style=\"{ '--tide-max-width': 'none' }\"\n            @close=\"clearToasts\"\n            @cta-click=\"toast?.action?.callback\"\n            is-dismissible\n            is-toast\n          >\n            {{ toast.description }}\n          </TideAlert>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n  .pop-enter-active,\n  .pop-leave-active {\n    transition: var(--tide-animate);\n    transition-property: opacity, transform, translate;\n  }\n\n  .pop-enter-from {\n    translate: 100% 0;\n  }\n\n  .pop-leave-to {\n    opacity: 0;\n    z-index: 0 !important;\n  }\n\n  .pop-leave-active {\n    position: absolute;\n  }\n\n  @media (min-width: 768px) {\n    .tide-toast-wrap {\n      width: 400px;\n    }\n  }\n</style>\n"],"names":["_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_createVNode","_TransitionGroup","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createTextVNode","_toDisplayString"],"mappings":";;;;;AAME,MAAA,cAAe,EAAE,cAAc,MAAA;;;;;AAW/B,UAAM,EAAE,QAAQ,aAAa,mBAAmB,iBAAA,IAAqB,eAAA;AAErE,kBAAc,MAAM;AAClB,uBAAA;AAAA,IACF,CAAC;;0BAIDA,YA4CWC,UAAA;AAAA,QA5CA,QAAQC,MAAA,YAAA,CAAY;AAAA,MAAA;QAC7BC,mBA0CM,OA1CNC,WA0CM,KAAA,QAzCU;AAAA,UACb,OAAK;AAAA;YAAoCF,MAAA,GAAA,EAAI,OAAO;AAAA,YAAcA,MAAA,GAAA,EAAI,eAAe;AAAA,YAAaA,MAAA,GAAA,EAAI,SAAS;AAAA,YAAeA,MAAA,GAAA,EAAI,YAAY;AAAA,YAAcA,MAAA,GAAA,EAAI,YAAY;AAAA,YAAaA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAA;AAAA;UAUpMG,YA6BkBC,iBAAA,EA7BD,MAAK,SAAK;AAAA,6BAevB,MAAuB;AAAA,gCAdzBC,mBA2BMC,UAAA,MAAAC,WAbYP,MAAA,MAAA,GAAM,CAAf,UAAK;;oCAddK,mBA2BM,OAAA;AAAA,kBA1BH,OAAKG,eAAA;AAAA;oBAA+CR,MAAA,GAAA,EAAI,eAAe;AAAA,oBAAgBA,MAAA,GAAA,EAAI,SAAS;AAAA,oBAAsBA,MAAA,GAAA,EAAI,QAAQ;AAAA,oBAAiBA,MAAA,GAAA,EAAI,YAAY;AAAA,oBAAmBA,MAAA,GAAA,EAAI,YAAY;AAAA,oBAAiBA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,oBAAiBA,MAAA,GAAA,EAAI,MAAM;AAAA,kBAAA;kBAUtQ,KAAK,MAAM;AAAA,kBACX,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,+BAAEA,MAAA,iBAAA,KAAAA,MAAA,iBAAA,EAAA,GAAA,IAAA;AAAA,kBACZ,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,+BAAEA,MAAA,gBAAA,KAAAA,MAAA,gBAAA,EAAA,GAAA,IAAA;AAAA,gBAAA;kBAGbG,YAUY,WAAA;AAAA,oBATT,cAAW,WAAM,WAAN,mBAAc;AAAA,oBACzB,SAAS,MAAM;AAAA,oBACf,OAAO,EAAA,oBAAA,OAAA;AAAA,oBACP,SAAOH,MAAA,WAAA;AAAA,oBACP,aAAW,oCAAO,WAAP,mBAAe;AAAA,oBAC3B,kBAAA;AAAA,oBACA,YAAA;AAAA,kBAAA;qCAEA,MAAuB;AAAA,sBAApBS,gBAAAC,gBAAA,MAAM,WAAW,GAAA,CAAA;AAAA,oBAAA;;;;;;;;;;;;;"}

package/dist/composables/useTideConfig.js

@@ -0,0 +1,16 @@
+import { inject, provide } from "vue";
+import { ELEMENT } from "../types/Element.js";
+const tideConfigDefaults = { linkComponent: ELEMENT.LINK };
+const CONFIG_KEY = Symbol("tide-config");
+const provideTideConfig = (config = {}) => {
+  const configWithDefaults = { ...tideConfigDefaults, ...config };
+  provide(CONFIG_KEY, configWithDefaults);
+};
+const useTideConfig = () => {
+  return inject(CONFIG_KEY, tideConfigDefaults);
+};
+export {
+  provideTideConfig,
+  useTideConfig
+};
+//# sourceMappingURL=useTideConfig.js.map

package/dist/composables/useTideConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTideConfig.js","sources":["../../src/composables/useTideConfig.ts"],"sourcesContent":["import { inject, provide } from 'vue';\n\nimport { ELEMENT } from '@/types/Element';\n\nimport type { Component } from 'vue';\n\ntype TideConfig = {\n  linkComponent: Component | typeof ELEMENT.LINK;\n};\n\nconst tideConfigDefaults: TideConfig = { linkComponent: ELEMENT.LINK };\n\nconst CONFIG_KEY = Symbol('tide-config');\n\nexport const provideTideConfig = (config: Partial<TideConfig> = {}) => {\n  const configWithDefaults: TideConfig = { ...tideConfigDefaults, ...config };\n\n  provide<TideConfig>(CONFIG_KEY, configWithDefaults);\n};\n\nexport const useTideConfig = () => {\n  return inject<TideConfig>(CONFIG_KEY, tideConfigDefaults);\n};\n"],"names":[],"mappings":";;AAUA,MAAM,qBAAiC,EAAE,eAAe,QAAQ,KAAA;AAEhE,MAAM,aAAa,OAAO,aAAa;AAEhC,MAAM,oBAAoB,CAAC,SAA8B,OAAO;AACrE,QAAM,qBAAiC,EAAE,GAAG,oBAAoB,GAAG,OAAA;AAEnE,UAAoB,YAAY,kBAAkB;AACpD;AAEO,MAAM,gBAAgB,MAAM;AACjC,SAAO,OAAmB,YAAY,kBAAkB;AAC1D;"}