tide-design-system 2.6.0 → 2.6.1

package/README.md

@@ -21,6 +21,7 @@ TIDE (***T***rader ***I***nteractive ***D***esign and ***E***ngineering) is a de
 - [Layout Grid Utility](/docs/grid-layout.md): Lightweight CSS Grid for consistent page alignment.
 - [Forms and inputs](/docs/forms.md): Guide to using Tide Forms and Input Components.
 - [Images](/docs/images.md): Guide to using Tide Image components.
+- [Responsive Design](/docs/responsive.md): Guide to TIDE's container-query-based responsive system.
 
 ## Glossary
 - **TIDE**: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites

package/dist/components/TideBreadCrumbs.vue.js

@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 2
               }, 1032, ["class", "data-track", "href"])) : (openBlock(), createElementBlock("span", {
                 key: 1,
-                class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_2, unref(CSS).FONT.COLOR.SURFACE.VARIANT]),
+                class: normalizeClass(["tide-bread-crumb-text", unref(CSS).FONT.ROLE.LABEL_2, unref(CSS).FONT.COLOR.SURFACE.VARIANT]),
                 "data-track": crumb.dataTrack || void 0
               }, toDisplayString(crumb.label), 11, _hoisted_1))
             ], 2),

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

@@ -1 +1 @@
-{"version":3,"file":"TideBreadCrumbs.vue.js","sources":["../../src/components/TideBreadCrumbs.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a set of breadcrumbs for navigation purposes.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebreadcrumbs--docs) for TideBreadCrumbs\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\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  import type { BreadCrumb } from '@/types/BreadCrumb';\n\n  type Props = {\n    /** An array of labels and optional URLs to display for each bread crumb. */\n    breadCrumbs: BreadCrumb[];\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    breadCrumbs: undefined,\n  });\n</script>\n\n<template>\n  <ul :class=\"['tide-bread-crumbs', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]\">\n    <template\n      :key=\"crumb.label\"\n      v-for=\"(crumb, index) in props.breadCrumbs\"\n    >\n      <li :class=\"[CSS.FONT.ROLE.BODY_2]\">\n        <InternalBaseLink\n          :class=\"[CSS.FONT.ROLE.LINK_2, CSS.FONT.COLOR.SURFACE.DEFAULT]\"\n          :data-track=\"crumb.dataTrack || undefined\"\n          :href=\"crumb.url\"\n          v-if=\"crumb.url\"\n        >\n          {{ crumb.label }}\n        </InternalBaseLink>\n\n        <span\n          :class=\"[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n          :data-track=\"crumb.dataTrack || undefined\"\n          v-else\n        >\n          {{ crumb.label }}\n        </span>\n      </li>\n\n      <li v-if=\"props.breadCrumbs && index < props.breadCrumbs.length - 1\">\n        <TideIcon\n          :icon=\"ICON.ARROW_RIGHT\"\n          :size=\"SIZE.SMALL\"\n        />\n      </li>\n    </template>\n  </ul>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_openBlock","_Fragment","_createElementVNode","_createBlock","InternalBaseLink","_createTextVNode","_toDisplayString","_createVNode","TideIcon"],"mappings":";;;;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;AAiBf,UAAM,QAAQ;;0BAMdA,mBA+BK,MAAA;AAAA,QA/BA,OAAKC,eAAA,CAAA,qBAAwBC,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,SAASA,MAAA,GAAA,EAAI,aAAa,GAAG,CAAA;AAAA,MAAA;SACzGC,UAAA,IAAA,GAAAH,mBA6BWI,2BA3BgB,MAAM,aAAW,CAAlC,OAAO,UAAK;;YADd,KAAA,MAAM;AAAA,UAAA;YAGZC,mBAiBK,MAAA;AAAA,cAjBA,uBAAQH,MAAA,GAAA,EAAI,KAAK,KAAK,MAAM,CAAA;AAAA,YAAA;cAKvB,MAAM,oBAJdI,YAOmBC,aAAA;AAAA;gBANhB,uBAAQL,MAAA,GAAA,EAAI,KAAK,KAAK,QAAQA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,gBAC5D,cAAY,MAAM,aAAa;AAAA,gBAC/B,MAAM,MAAM;AAAA,cAAA;iCAGb,MAAiB;AAAA,kBAAdM,gBAAAC,gBAAA,MAAM,KAAK,GAAA,CAAA;AAAA,gBAAA;;yEAGhBT,mBAMO,QAAA;AAAA;gBALJ,uBAAQE,MAAA,GAAA,EAAI,KAAK,KAAK,SAASA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,gBAC7D,cAAY,MAAM,aAAa;AAAA,cAAA,GAG7BO,gBAAA,MAAM,KAAK,GAAA,IAAA,UAAA;AAAA,YAAA;YAIR,MAAM,eAAe,QAAQ,MAAM,YAAY,SAAM,kBAA/DT,mBAKK,MAAA,YAAA;AAAA,cAJHU,YAGEC,aAAA;AAAA,gBAFC,MAAMT,MAAA,IAAA,EAAK;AAAA,gBACX,MAAMA,MAAA,IAAA,EAAK;AAAA,cAAA;;;;;;;;"}
+{"version":3,"file":"TideBreadCrumbs.vue.js","sources":["../../src/components/TideBreadCrumbs.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a set of breadcrumbs for navigation purposes.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebreadcrumbs--docs) for TideBreadCrumbs\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\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  import type { BreadCrumb } from '@/types/BreadCrumb';\n\n  type Props = {\n    /** An array of labels and optional URLs to display for each bread crumb. */\n    breadCrumbs: BreadCrumb[];\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    breadCrumbs: undefined,\n  });\n</script>\n\n<template>\n  <ul :class=\"['tide-bread-crumbs', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]\">\n    <template\n      :key=\"crumb.label\"\n      v-for=\"(crumb, index) in props.breadCrumbs\"\n    >\n      <li :class=\"[CSS.FONT.ROLE.BODY_2]\">\n        <InternalBaseLink\n          :class=\"[CSS.FONT.ROLE.LINK_2, CSS.FONT.COLOR.SURFACE.DEFAULT]\"\n          :data-track=\"crumb.dataTrack || undefined\"\n          :href=\"crumb.url\"\n          v-if=\"crumb.url\"\n        >\n          {{ crumb.label }}\n        </InternalBaseLink>\n\n        <span\n          :class=\"['tide-bread-crumb-text', CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n          :data-track=\"crumb.dataTrack || undefined\"\n          v-else\n        >\n          {{ crumb.label }}\n        </span>\n      </li>\n\n      <li v-if=\"props.breadCrumbs && index < props.breadCrumbs.length - 1\">\n        <TideIcon\n          :icon=\"ICON.ARROW_RIGHT\"\n          :size=\"SIZE.SMALL\"\n        />\n      </li>\n    </template>\n  </ul>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_openBlock","_Fragment","_createElementVNode","_createBlock","InternalBaseLink","_createTextVNode","_toDisplayString","_createVNode","TideIcon"],"mappings":";;;;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;AAiBf,UAAM,QAAQ;;0BAMdA,mBA+BK,MAAA;AAAA,QA/BA,OAAKC,eAAA,CAAA,qBAAwBC,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,SAASA,MAAA,GAAA,EAAI,aAAa,GAAG,CAAA;AAAA,MAAA;SACzGC,UAAA,IAAA,GAAAH,mBA6BWI,2BA3BgB,MAAM,aAAW,CAAlC,OAAO,UAAK;;YADd,KAAA,MAAM;AAAA,UAAA;YAGZC,mBAiBK,MAAA;AAAA,cAjBA,uBAAQH,MAAA,GAAA,EAAI,KAAK,KAAK,MAAM,CAAA;AAAA,YAAA;cAKvB,MAAM,oBAJdI,YAOmBC,aAAA;AAAA;gBANhB,uBAAQL,MAAA,GAAA,EAAI,KAAK,KAAK,QAAQA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,gBAC5D,cAAY,MAAM,aAAa;AAAA,gBAC/B,MAAM,MAAM;AAAA,cAAA;iCAGb,MAAiB;AAAA,kBAAdM,gBAAAC,gBAAA,MAAM,KAAK,GAAA,CAAA;AAAA,gBAAA;;yEAGhBT,mBAMO,QAAA;AAAA;gBALJ,gDAAiCE,MAAA,GAAA,EAAI,KAAK,KAAK,SAASA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,gBACtF,cAAY,MAAM,aAAa;AAAA,cAAA,GAG7BO,gBAAA,MAAM,KAAK,GAAA,IAAA,UAAA;AAAA,YAAA;YAIR,MAAM,eAAe,QAAQ,MAAM,YAAY,SAAM,kBAA/DT,mBAKK,MAAA,YAAA;AAAA,cAJHU,YAGEC,aAAA;AAAA,gBAFC,MAAMT,MAAA,IAAA,EAAK;AAAA,gBACX,MAAMA,MAAA,IAAA,EAAK;AAAA,cAAA;;;;;;;;"}

package/dist/components/TideButtonPagination.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TideButtonPagination.vue2.js";
 /* empty css                          */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const TideButtonPagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2da25be7"]]);
+const TideButtonPagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6c9ffbf5"]]);
 export {
   TideButtonPagination as default
 };

package/dist/components/TideButtonPagination.vue2.js

@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(rootElement.value), {
         class: normalizeClass([
-          "tide-button-icon",
+          "tide-button-pagination",
           [unref(CSS).DISPLAY.INLINE_BLOCK, unref(CSS).BORDER.RADIUS.FULL, unref(CSS).PADDING.FULL.HALF],
           props.element === unref(ELEMENT_BROAD).LINK ? [unref(CSS).UNDERLINE.REST.OFF] : "",
           props.element === unref(ELEMENT_BROAD).DIV ? [unref(CSS).CURSOR.POINTER] : "",

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

@@ -1 +1 @@
-{"version":3,"file":"TideButtonPagination.vue2.js","sources":["../../src/components/TideButtonPagination.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a button component for use in pagination purposes.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonpagination--docs) for TideButtonPagination\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\n  import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';\n  import { CSS } from '@/types/Styles';\n\n  import type { ElementBroad } from '@/types/Element';\n\n  type Props = {\n    /** Indicates whether Pagination Button is associated with the displayed page */\n    disabled?: boolean;\n\n    /** HTML tag type */\n    element?: ElementBroad;\n\n    /** URL to open<br />(Link only) */\n    href?: string;\n\n    /** Button text */\n    label: string | number;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    disabled: false,\n    element: ELEMENT_BROAD.BUTTON,\n    href: undefined,\n    label: undefined,\n  });\n\n  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));\n</script>\n\n<template>\n  <component\n    :class=\"[\n      'tide-button-icon',\n      [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],\n      props.element === ELEMENT_BROAD.LINK ? [CSS.UNDERLINE.REST.OFF] : '',\n      props.element === ELEMENT_BROAD.DIV ? [CSS.CURSOR.POINTER] : '',\n      [CSS.FONT.ROLE.HEADLINE_3],\n    ]\"\n    :disabled=\"props.element === ELEMENT_BROAD.BUTTON && props.disabled\"\n    :href=\"props.element === ELEMENT_BROAD.LINK && props.href ? props.href : undefined\"\n    :type=\"element === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined\"\n    :is=\"rootElement\"\n  >\n    <span :class=\"['label', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER]\">\n      {{ props.label }}\n    </span>\n  </component>\n</template>\n\n<style scoped>\n  .tide-button-icon,\n  .tide-link-as-button-icon {\n    border: 1px solid var(--tide-white);\n    background: var(--tide-white);\n    color: var(--tide-secondary);\n  }\n\n  .tide-button-icon:not(:disabled):hover,\n  .tide-link-as-button-icon:not(:disabled):hover {\n    border: 1px solid var(--tide-surface-variant);\n    background: var(--tide-surface-variant);\n  }\n\n  .tide-button-icon:disabled,\n  .tide-link-as-button-icon:disabled {\n    border: 1px solid var(--tide-border-high);\n  }\n\n  .tide-button-icon .label,\n  .tide-link-as-button-icon .label {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n</style>\n"],"names":["InternalBaseLink","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_unref","_createElementVNode","_toDisplayString"],"mappings":";;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;AA0Bf,UAAM,QAAQ;AAOd,UAAM,cAAc,SAAS,MAAO,MAAM,YAAY,QAAQ,OAAOA,cAAmB,MAAM,OAAQ;;AAItG,aAAAC,aAAAC,YAgBYC,wBALL,YAAA,KAAW,GAAA;AAAA,QAVf,OAAKC,eAAA;AAAA;UAAqC,CAAAC,MAAA,GAAA,EAAI,QAAQ,cAAcA,MAAA,GAAA,EAAI,OAAO,OAAO,MAAMA,MAAA,GAAA,EAAI,QAAQ,KAAK,IAAI;AAAA,UAAS,MAAM,YAAYA,MAAA,aAAA,EAAc,OAAI,CAAIA,MAAA,GAAA,EAAI,UAAU,KAAK,GAAG,IAAA;AAAA,UAAc,MAAM,YAAYA,MAAA,aAAA,EAAc,MAAG,CAAIA,MAAA,GAAA,EAAI,OAAO,OAAO,IAAA;AAAA,UAAe,CAAAA,MAAA,GAAA,EAAI,KAAK,KAAK,UAAU;AAAA,QAAA;QAOtS,UAAU,MAAM,YAAYA,MAAA,aAAA,EAAc,UAAU,MAAM;AAAA,QAC1D,MAAM,MAAM,YAAYA,qBAAc,QAAQ,MAAM,OAAO,MAAM,OAAO;AAAA,QACxE,MAAM,QAAA,YAAYA,MAAA,aAAA,EAAc,SAASA,MAAA,aAAA,EAAc,SAAS;AAAA,MAAA;yBAGjE,MAEO;AAAA,UAFPC,mBAEO,QAAA;AAAA,YAFA,gCAAiBD,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,WAAI,MAAM,MAAM,CAAA;AAAA,UAAA,GACvEE,gBAAA,MAAM,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;"}
+{"version":3,"file":"TideButtonPagination.vue2.js","sources":["../../src/components/TideButtonPagination.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a button component for use in pagination purposes.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonpagination--docs) for TideButtonPagination\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\n  import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';\n  import { CSS } from '@/types/Styles';\n\n  import type { ElementBroad } from '@/types/Element';\n\n  type Props = {\n    /** Indicates whether Pagination Button is associated with the displayed page */\n    disabled?: boolean;\n\n    /** HTML tag type */\n    element?: ElementBroad;\n\n    /** URL to open<br />(Link only) */\n    href?: string;\n\n    /** Button text */\n    label: string | number;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    disabled: false,\n    element: ELEMENT_BROAD.BUTTON,\n    href: undefined,\n    label: undefined,\n  });\n\n  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));\n</script>\n\n<template>\n  <component\n    :class=\"[\n      'tide-button-pagination',\n      [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],\n      props.element === ELEMENT_BROAD.LINK ? [CSS.UNDERLINE.REST.OFF] : '',\n      props.element === ELEMENT_BROAD.DIV ? [CSS.CURSOR.POINTER] : '',\n      [CSS.FONT.ROLE.HEADLINE_3],\n    ]\"\n    :disabled=\"props.element === ELEMENT_BROAD.BUTTON && props.disabled\"\n    :href=\"props.element === ELEMENT_BROAD.LINK && props.href ? props.href : undefined\"\n    :type=\"element === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined\"\n    :is=\"rootElement\"\n  >\n    <span :class=\"['label', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER]\">\n      {{ props.label }}\n    </span>\n  </component>\n</template>\n\n<style scoped>\n  .tide-button-icon,\n  .tide-link-as-button-icon {\n    border: 1px solid var(--tide-white);\n    background: var(--tide-white);\n    color: var(--tide-secondary);\n  }\n\n  .tide-button-icon:not(:disabled):hover,\n  .tide-link-as-button-icon:not(:disabled):hover {\n    border: 1px solid var(--tide-surface-variant);\n    background: var(--tide-surface-variant);\n  }\n\n  .tide-button-icon:disabled,\n  .tide-link-as-button-icon:disabled {\n    border: 1px solid var(--tide-border-high);\n  }\n\n  .tide-button-icon .label,\n  .tide-link-as-button-icon .label {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n</style>\n"],"names":["InternalBaseLink","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_unref","_createElementVNode","_toDisplayString"],"mappings":";;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;AA0Bf,UAAM,QAAQ;AAOd,UAAM,cAAc,SAAS,MAAO,MAAM,YAAY,QAAQ,OAAOA,cAAmB,MAAM,OAAQ;;AAItG,aAAAC,aAAAC,YAgBYC,wBALL,YAAA,KAAW,GAAA;AAAA,QAVf,OAAKC,eAAA;AAAA;UAA2C,CAAAC,MAAA,GAAA,EAAI,QAAQ,cAAcA,MAAA,GAAA,EAAI,OAAO,OAAO,MAAMA,MAAA,GAAA,EAAI,QAAQ,KAAK,IAAI;AAAA,UAAS,MAAM,YAAYA,MAAA,aAAA,EAAc,OAAI,CAAIA,MAAA,GAAA,EAAI,UAAU,KAAK,GAAG,IAAA;AAAA,UAAc,MAAM,YAAYA,MAAA,aAAA,EAAc,MAAG,CAAIA,MAAA,GAAA,EAAI,OAAO,OAAO,IAAA;AAAA,UAAe,CAAAA,MAAA,GAAA,EAAI,KAAK,KAAK,UAAU;AAAA,QAAA;QAO5S,UAAU,MAAM,YAAYA,MAAA,aAAA,EAAc,UAAU,MAAM;AAAA,QAC1D,MAAM,MAAM,YAAYA,qBAAc,QAAQ,MAAM,OAAO,MAAM,OAAO;AAAA,QACxE,MAAM,QAAA,YAAYA,MAAA,aAAA,EAAc,SAASA,MAAA,aAAA,EAAc,SAAS;AAAA,MAAA;yBAGjE,MAEO;AAAA,UAFPC,mBAEO,QAAA;AAAA,YAFA,gCAAiBD,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,WAAI,MAAM,MAAM,CAAA;AAAA,UAAA,GACvEE,gBAAA,MAAM,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;"}

package/dist/components/TideCarousel.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TideCarousel.vue2.js";
 /* empty css                  */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const TideCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a9f0952b"]]);
+const TideCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f3aba0f9"]]);
 export {
   TideCarousel as default
 };

package/dist/components/TideCarousel.vue2.js

@@ -1,5 +1,7 @@
-import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, createVNode, renderSlot, createElementVNode, normalizeStyle, Fragment, renderList } from "vue";
+import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode, toDisplayString, createVNode, renderSlot, normalizeStyle, Fragment, renderList } from "vue";
 import _sfc_main$1 from "./TideButtonIcon.vue.js";
+import TideImage from "./TideImage.vue.js";
+import { BREAKPOINT } from "../types/Breakpoint.js";
 import { ICON } from "../types/Icon.js";
 import { PRIORITY } from "../types/Priority.js";
 import { CSS } from "../types/Styles.js";
@@ -9,6 +11,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TideCarousel",
   props: {
     hasDots: { type: Boolean, default: void 0 },
+    headerImage: { default: void 0 },
     isFloating: { type: Boolean, default: false },
     isHeadline1: { type: Boolean, default: false },
     isHideawayButtons: { type: Boolean, default: true },
@@ -212,22 +215,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "carouselRef",
         ref: carouselRef
       }, [
-        !props.isFloating && showButtons.value || props.title ? (openBlock(), createElementBlock("section", {
+        !props.isFloating && showButtons.value || props.title || props.subtitle || props.headerImage ? (openBlock(), createElementBlock("section", {
           key: 0,
-          class: normalizeClass([unref(CSS).DISPLAY.FLEX, props.title ? unref(CSS).AXIS1.BETWEEN : unref(CSS).AXIS1.END, unref(CSS).AXIS2.CENTER, unref(CSS).WIDTH.FULL])
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, props.title ? unref(CSS).AXIS1.BETWEEN : unref(CSS).AXIS1.END, unref(CSS).AXIS2.END, unref(CSS).WIDTH.FULL])
         }, [
-          props.title ? (openBlock(), createElementBlock("div", {
+          props.title || props.subtitle || props.headerImage ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.WRAP, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.ONE])
+            class: normalizeClass([
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).GAP.HALF,
+              unref(CSS).FLEX.DIRECTION.COLUMN,
+              unref(CSS).AXIS2.START,
+              unref(CSS).withBreakpoint([unref(CSS).FLEX.DIRECTION.ROW, unref(CSS).AXIS2.END], unref(BREAKPOINT).MD)
+            ])
           }, [
-            props.title ? (openBlock(), createElementBlock("div", {
+            props.headerImage ? (openBlock(), createBlock(TideImage, {
               key: 0,
-              class: normalizeClass([__props.isHeadline1 ? unref(CSS).FONT.ROLE.HEADLINE_1 : unref(CSS).FONT.ROLE.HEADLINE_2])
-            }, toDisplayString(props.title), 3)) : createCommentVNode("", true),
-            props.subtitle ? (openBlock(), createElementBlock("div", {
-              key: 1,
-              class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_2, unref(CSS).FONT.COLOR.SURFACE.VARIANT])
-            }, toDisplayString(props.subtitle), 3)) : createCommentVNode("", true)
+              src: props.headerImage,
+              class: "tide-carousel-header-image"
+            }, null, 8, ["src"])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).AXIS2.START])
+            }, [
+              props.title ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([props.isHeadline1 ? unref(CSS).FONT.ROLE.HEADLINE_1 : unref(CSS).FONT.ROLE.HEADLINE_2])
+              }, toDisplayString(props.title), 3)) : createCommentVNode("", true),
+              props.subtitle ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_2, unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+              }, toDisplayString(props.subtitle), 3)) : createCommentVNode("", true)
+            ], 2)
           ], 2)) : createCommentVNode("", true),
           !props.isFloating && showButtons.value ? (openBlock(), createElementBlock("div", {
             key: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"TideCarousel.vue2.js","sources":["../../src/components/TideCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a carousel component with navigation controls and slide indicators.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecarousel--docs) for TideCarousel\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, onMounted, onUnmounted, ref } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { PRIORITY } from '@/types/Priority';\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */\n    hasDots?: boolean;\n\n    /** Determines whether to display on-page or floating carousel */\n    isFloating?: boolean;\n\n    /** Determines font role used for title display */\n    isHeadline1?: boolean;\n\n    /** Determines whether on-page buttons should be hidden until hover */\n    isHideawayButtons?: boolean;\n\n    /** Determines whether to scroll by page or by individual slide */\n    isScrollByPage?: boolean;\n\n    /** Determines the max number of indicator dots to display at a given time */\n    maxDots?: number;\n\n    /** Determines the text displayed to the right of the title */\n    subtitle?: string;\n\n    /** Determines the title text displayed above the carousel */\n    title?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    hasDots: undefined,\n    isFloating: false,\n    isHeadline1: false,\n    isHideawayButtons: true,\n    isScrollByPage: true,\n    maxDots: 5,\n    subtitle: undefined,\n    title: undefined,\n  });\n\n  type Emits = {\n    (event: 'slidesAddedToView', slidesInView: number[]): void;\n  };\n\n  const emit = defineEmits<Emits>();\n\n  const carouselRef = ref<HTMLDivElement | null>(null);\n  const containerRef = ref<HTMLDivElement | null>(null);\n  const contentWidth = ref<number>(0);\n  const currentPageIndex = ref<number>(0);\n  const dotsRef = ref<HTMLDivElement | null>(null);\n  const frameWidth = ref<number>(0);\n  const isFirstSlide = ref<boolean>(true);\n  const isLastSlide = ref<boolean>(false);\n  const showButtons = ref<boolean>(true);\n  const slideObserver = ref<IntersectionObserver | null>(null);\n  const slides = ref<HTMLElement[]>([]);\n  const slidesInView = ref<number[]>([]);\n  const slotObserver = ref<MutationObserver | null>(null);\n  const touchStart = ref<Touch | undefined>(undefined);\n  const slidesInViewCount = ref<number>(1);\n\n  const currentPage = computed(() => currentPageIndex.value + 1);\n  const dotContainerWidth = computed(() => dotCountVisible.value * dotWidth + (dotCountVisible.value - 1) * dotGap);\n  const dotCountVisible = computed(() => (props.maxDots > totalPages.value ? totalPages.value : props.maxDots));\n  const totalPages = computed(() => {\n    if (!slides.value.length) return 0;\n    if (!props.isScrollByPage) return slides.value.length;\n\n    const quotient = Math.floor(slides.value.length / slidesInViewCount.value);\n    const remainder = slides.value.length % slidesInViewCount.value;\n\n    return remainder ? quotient + 1 : quotient;\n  });\n\n  const dotGap: number = 8;\n  const dotWidth: number = 8;\n  let scrollTimeout: number | undefined;\n\n  const getDotClass = (dotIndex: number) => {\n    let className = '';\n\n    if (dotIndex === currentPageIndex.value) className = 'tide-carousel-dot-active';\n    if (Math.abs(currentPageIndex.value - dotIndex) === 1) className = 'tide-carousel-dot-neighbor';\n\n    return className;\n  };\n\n  const getIsElementWithinContainer = (element: HTMLElement, container: HTMLElement) => {\n    const containerRect = container.getBoundingClientRect();\n    const containerRight = containerRect.left + containerRect.width;\n    const elementRect = element.getBoundingClientRect();\n    const elementRight = elementRect.left + elementRect.width;\n\n    return elementRight <= containerRight && elementRect.left >= containerRect.left;\n  };\n\n  const handleTouchEnd = (event: TouchEvent) => {\n    if (!touchStart.value) return;\n\n    const touchEnd = event.changedTouches[0];\n    const deltaX = touchStart.value.clientX - touchEnd.clientX;\n    const deltaY = touchEnd.clientY - touchStart.value.clientY;\n\n    if (Math.abs(deltaX) > Math.abs(deltaY)) scrollByDelta(deltaX);\n  };\n\n  const handleTouchStart = (event: TouchEvent) => {\n    touchStart.value = event.touches[0];\n  };\n\n  const handleWheel = (event: WheelEvent) => {\n    const isShiftKeyDown = event.shiftKey;\n    const isWheel = Math.abs(event.deltaY) >= 80;\n\n    if (isWheel && !isShiftKeyDown) return;\n    if (event.shiftKey) event.preventDefault();\n\n    clearTimeout(scrollTimeout);\n\n    scrollTimeout = window.setTimeout(() => {\n      if (isWheel) {\n        scrollByDelta(event.deltaY);\n      } else {\n        const offset = slides.value[slidesInView.value[0]]?.offsetLeft || 0;\n\n        scrollToOffset(offset);\n      }\n    }, 100);\n  };\n\n  const measureDom = () => {\n    if (!containerRef.value) return;\n\n    contentWidth.value = containerRef.value.scrollWidth;\n    frameWidth.value = containerRef.value.clientWidth;\n    showButtons.value = contentWidth.value > frameWidth.value;\n\n    slidesInViewCount.value = slides.value.filter((slide) =>\n      getIsElementWithinContainer(slide, containerRef.value as HTMLElement)\n    ).length;\n  };\n\n  const observeSlides = () => {\n    const options = {\n      root: carouselRef?.value,\n      rootMargin: '0px 1px 0px 0px',\n      threshold: 1,\n    };\n\n    slideObserver.value = new IntersectionObserver((entries) => {\n      let slidesAddedToView: number[] = [];\n\n      entries.forEach((entry) => {\n        const slideIndex = slides.value.indexOf(entry.target as HTMLElement);\n\n        if (entry.isIntersecting) {\n          slidesAddedToView.push(slideIndex);\n          slidesInView.value.push(slideIndex);\n        } else {\n          slidesInView.value = slidesInView.value.filter((slide) => slide !== slideIndex);\n        }\n\n        slidesInView.value.sort((a, b) => a - b);\n      });\n\n      isFirstSlide.value = slidesInView.value.includes(0);\n      isLastSlide.value = slidesInView.value.includes(slides.value.length - 1);\n\n      if (slidesAddedToView.length > 0) emit('slidesAddedToView', slidesAddedToView);\n    }, options);\n\n    slides.value.forEach((child) => {\n      if (slideObserver.value) slideObserver.value.observe(child);\n    });\n  };\n\n  const observeSlot = () => {\n    const observerCallback = () => {\n      if (containerRef.value === null) return;\n\n      slides.value = Array.from(containerRef.value.children) as HTMLElement[];\n      observeSlides();\n    };\n\n    slotObserver.value = new MutationObserver(observerCallback);\n\n    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });\n  };\n\n  const scrollByDelta = (delta: number) => {\n    const isScrollingLeft = delta < 0;\n\n    if (isScrollingLeft) {\n      props.isScrollByPage ? showPreviousPage() : showPreviousSlide();\n    } else {\n      props.isScrollByPage ? showNextPage() : showNextSlide();\n    }\n  };\n\n  const scrollToOffset = (target: number) => {\n    if (containerRef.value === null) return;\n\n    const isScrollingLeft = target <= containerRef.value.scrollLeft;\n\n    currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;\n\n    containerRef.value.scrollTo({\n      behavior: 'smooth',\n      left: target,\n    });\n    updateDots(isScrollingLeft);\n  };\n\n  const showNextPage = () => {\n    if (slidesInView.value.length === 0 || isLastSlide.value) return;\n\n    const nextSlide: number = slidesInView.value[slidesInView.value.length - 1] + 1;\n    const offset = slides.value[nextSlide]?.offsetLeft;\n\n    scrollToOffset(offset);\n  };\n\n  const showPreviousPage = () => {\n    if (slidesInView.value.length === 0 || isFirstSlide.value) return;\n\n    const previousSlide: number = slidesInView.value[0] - slidesInView.value.length;\n    const offset = slides.value[previousSlide]?.offsetLeft || 0;\n\n    scrollToOffset(offset);\n  };\n\n  const showNextSlide = () => {\n    if (slidesInView.value.length === 0) return;\n\n    const nextSlide: number = slidesInView.value.length > 1 ? slidesInView.value[1] : slidesInView.value[0] + 1;\n\n    scrollToOffset(slides.value[nextSlide].offsetLeft);\n  };\n\n  const showPreviousSlide = () => {\n    if (slidesInView.value.length === 0) return;\n\n    const previousSlide: number = slidesInView.value[0] - 1;\n\n    scrollToOffset(slides.value[previousSlide].offsetLeft);\n  };\n\n  const updateDots = (isScrollingLeft: boolean) => {\n    if (!dotsRef.value || dotCountVisible.value >= totalPages.value) return;\n\n    const isOddDotCount = dotCountVisible.value % 2 !== 0;\n    const centerDot =\n      isOddDotCount || isScrollingLeft\n        ? Math.floor(dotCountVisible.value / 2) + 1\n        : Math.floor(dotCountVisible.value / 2);\n\n    dotsRef.value.scrollTo({\n      behavior: 'smooth',\n      left: currentPage.value < centerDot ? 0 : (currentPage.value - centerDot) * (dotWidth + dotGap),\n    });\n  };\n\n  onMounted(() => {\n    if (containerRef.value === null) return;\n\n    slides.value = Array.from(containerRef.value.children) as HTMLElement[];\n\n    measureDom();\n    observeSlides();\n    observeSlot();\n\n    if (window) {\n      window.addEventListener('resize', measureDom);\n    }\n  });\n\n  onUnmounted(() => {\n    slideObserver.value?.disconnect();\n    slotObserver.value?.disconnect();\n    window.removeEventListener('resize', measureDom);\n  });\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'tide-carousel',\n      CSS.POSITION.RELATIVE,\n      CSS.DISPLAY.FLEX,\n      CSS.FLEX.DIRECTION.COLUMN,\n      CSS.GAP.ONE,\n      CSS.WIDTH.MAX_FULL,\n    ]\"\n    ref=\"carouselRef\"\n  >\n    <section\n      :class=\"[CSS.DISPLAY.FLEX, props.title ? CSS.AXIS1.BETWEEN : CSS.AXIS1.END, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]\"\n      v-if=\"(!props.isFloating && showButtons) || props.title\"\n    >\n      <div\n        :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.AXIS2.CENTER, CSS.GAP.ONE]\"\n        v-if=\"props.title\"\n      >\n        <div\n          :class=\"[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]\"\n          v-if=\"props.title\"\n        >\n          {{ props.title }}\n        </div>\n\n        <div\n          :class=\"[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n          v-if=\"props.subtitle\"\n        >\n          {{ props.subtitle }}\n        </div>\n      </div>\n\n      <div\n        :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]\"\n        v-if=\"!props.isFloating && showButtons\"\n      >\n        <TideButtonIcon\n          :disabled=\"isFirstSlide\"\n          :icon=\"ICON.CHEVRON_LEFT\"\n          :priority=\"PRIORITY.TERTIARY\"\n          @click=\"isScrollByPage ? showPreviousPage() : showPreviousSlide()\"\n        />\n\n        <TideButtonIcon\n          :disabled=\"isLastSlide\"\n          :icon=\"ICON.CHEVRON_RIGHT\"\n          :priority=\"PRIORITY.TERTIARY\"\n          @click=\"isScrollByPage ? showNextPage() : showNextSlide()\"\n        />\n      </div>\n    </section>\n\n    <slot name=\"misc\" />\n\n    <div :class=\"[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX]\">\n      <ul\n        :class=\"[\n          'tide-carousel-container',\n          CSS.DISPLAY.FLEX,\n          CSS.GAP.ONE,\n          CSS.LIST_BULLETS.OFF,\n          CSS.OVERFLOW.X.SCROLL,\n          CSS.SCROLLBAR.OFF,\n          CSS.SNAP.ON,\n        ]\"\n        ref=\"containerRef\"\n        @touchend=\"handleTouchEnd\"\n        @touchstart.passive=\"handleTouchStart\"\n        @wheel=\"handleWheel\"\n      >\n        <slot />\n      </ul>\n\n      <div\n        :class=\"[\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.BOTTOM,\n          CSS.DISPLAY.FLEX,\n          CSS.AXIS1.CENTER,\n          CSS.MARGIN.BOTTOM.HALF,\n          CSS.WIDTH.FULL,\n          CSS.POINTER_EVENTS.OFF,\n        ]\"\n        v-if=\"hasDots && totalPages > 1\"\n      >\n        <div\n          :class=\"['tide-carousel-dots-container']\"\n          :style=\"{\n            width: `${dotContainerWidth}px`,\n          }\"\n        >\n          <div\n            :class=\"[\n              'tide-carousel-dots',\n              CSS.DISPLAY.FLEX,\n              CSS.AXIS1.START,\n              CSS.AXIS2.CENTER,\n              CSS.GAP.HALF,\n              CSS.OVERFLOW.X.SCROLL,\n              CSS.POINTER_EVENTS.OFF,\n              CSS.SCROLLBAR.OFF,\n            ]\"\n            ref=\"dotsRef\"\n          >\n            <div\n              :class=\"[\n                'tide-carousel-dot',\n                CSS.FLEX.SHRINK.OFF,\n                CSS.HEIGHT.ZERO,\n                CSS.WIDTH.ZERO,\n                CSS.BORDER.RADIUS.FULL,\n                CSS.BG.SURFACE.DEFAULT,\n                getDotClass(index),\n              ]\"\n              :key=\"index\"\n              v-for=\"(_, index) in totalPages\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        :class=\"[\n          'tide-carousel-button-overlay',\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.TOP,\n          CSS.DISPLAY.FLEX,\n          CSS.AXIS1.BETWEEN,\n          CSS.AXIS2.CENTER,\n          CSS.WIDTH.FULL,\n          CSS.HEIGHT.FULL,\n          CSS.POINTER_EVENTS.OFF,\n          props.isHideawayButtons ? 'hideaway' : '',\n        ]\"\n        v-if=\"isFloating && showButtons\"\n      >\n        <TideButtonIcon\n          :class=\"[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]\"\n          :disabled=\"isFirstSlide\"\n          :icon=\"ICON.CHEVRON_LEFT\"\n          :priority=\"PRIORITY.QUATERNARY\"\n          @click=\"isScrollByPage ? showPreviousPage() : showPreviousSlide()\"\n        />\n\n        <TideButtonIcon\n          :class=\"[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]\"\n          :disabled=\"isLastSlide\"\n          :icon=\"ICON.CHEVRON_RIGHT\"\n          :priority=\"PRIORITY.QUATERNARY\"\n          @click=\"isScrollByPage ? showNextPage() : showNextSlide()\"\n        />\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n  .tide-carousel-button-overlay.hideaway {\n    opacity: 0;\n  }\n\n  .tide-carousel:hover .tide-carousel-button-overlay.hideaway {\n    opacity: 1;\n  }\n\n  .tide-carousel-dot {\n    width: 8px;\n    height: 8px;\n    opacity: 0.75;\n    transform: scale(0.5);\n    transition: opacity var(--tide-animate), transform var(--tide-animate);\n  }\n\n  .tide-carousel-dot-neighbor {\n    transform: scale(0.75);\n  }\n\n  .tide-carousel-dot-active {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  @media (pointer: coarse) {\n    .tide-carousel .tide-carousel-button-overlay {\n      display: none;\n    }\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_toDisplayString","_createVNode","TideButtonIcon","_renderSlot","_createElementVNode","_normalizeStyle","_openBlock","_Fragment","_renderList"],"mappings":"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"}
+{"version":3,"file":"TideCarousel.vue2.js","sources":["../../src/components/TideCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a carousel component with navigation controls and slide indicators.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecarousel--docs) for TideCarousel\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, onMounted, onUnmounted, ref } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import TideImage from '@/components/TideImage.vue';\n  import { BREAKPOINT } from '@/types/Breakpoint';\n  import { ICON } from '@/types/Icon';\n  import { PRIORITY } from '@/types/Priority';\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */\n    hasDots?: boolean;\n\n    /** Optional image displayed alongside the header */\n    headerImage?: string;\n\n    /** Determines whether to display on-page or floating carousel */\n    isFloating?: boolean;\n\n    /** Determines font role used for title display */\n    isHeadline1?: boolean;\n\n    /** Determines whether on-page buttons should be hidden until hover */\n    isHideawayButtons?: boolean;\n\n    /** Determines whether to scroll by page or by individual slide */\n    isScrollByPage?: boolean;\n\n    /** Determines the max number of indicator dots to display at a given time */\n    maxDots?: number;\n\n    /** Determines the text displayed to the right of the title */\n    subtitle?: string;\n\n    /** Determines the title text displayed above the carousel */\n    title?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    hasDots: undefined,\n    headerImage: undefined,\n    isFloating: false,\n    isHeadline1: false,\n    isHideawayButtons: true,\n    isScrollByPage: true,\n    maxDots: 5,\n    subtitle: undefined,\n    title: undefined,\n  });\n\n  type Emits = {\n    (event: 'slidesAddedToView', slidesInView: number[]): void;\n  };\n\n  const emit = defineEmits<Emits>();\n\n  const carouselRef = ref<HTMLDivElement | null>(null);\n  const containerRef = ref<HTMLDivElement | null>(null);\n  const contentWidth = ref<number>(0);\n  const currentPageIndex = ref<number>(0);\n  const dotsRef = ref<HTMLDivElement | null>(null);\n  const frameWidth = ref<number>(0);\n  const isFirstSlide = ref<boolean>(true);\n  const isLastSlide = ref<boolean>(false);\n  const showButtons = ref<boolean>(true);\n  const slideObserver = ref<IntersectionObserver | null>(null);\n  const slides = ref<HTMLElement[]>([]);\n  const slidesInView = ref<number[]>([]);\n  const slotObserver = ref<MutationObserver | null>(null);\n  const touchStart = ref<Touch | undefined>(undefined);\n  const slidesInViewCount = ref<number>(1);\n\n  const currentPage = computed(() => currentPageIndex.value + 1);\n  const dotContainerWidth = computed(() => dotCountVisible.value * dotWidth + (dotCountVisible.value - 1) * dotGap);\n  const dotCountVisible = computed(() => (props.maxDots > totalPages.value ? totalPages.value : props.maxDots));\n  const totalPages = computed(() => {\n    if (!slides.value.length) return 0;\n    if (!props.isScrollByPage) return slides.value.length;\n\n    const quotient = Math.floor(slides.value.length / slidesInViewCount.value);\n    const remainder = slides.value.length % slidesInViewCount.value;\n\n    return remainder ? quotient + 1 : quotient;\n  });\n\n  const dotGap: number = 8;\n  const dotWidth: number = 8;\n  let scrollTimeout: number | undefined;\n\n  const getDotClass = (dotIndex: number) => {\n    let className = '';\n\n    if (dotIndex === currentPageIndex.value) className = 'tide-carousel-dot-active';\n    if (Math.abs(currentPageIndex.value - dotIndex) === 1) className = 'tide-carousel-dot-neighbor';\n\n    return className;\n  };\n\n  const getIsElementWithinContainer = (element: HTMLElement, container: HTMLElement) => {\n    const containerRect = container.getBoundingClientRect();\n    const containerRight = containerRect.left + containerRect.width;\n    const elementRect = element.getBoundingClientRect();\n    const elementRight = elementRect.left + elementRect.width;\n\n    return elementRight <= containerRight && elementRect.left >= containerRect.left;\n  };\n\n  const handleTouchEnd = (event: TouchEvent) => {\n    if (!touchStart.value) return;\n\n    const touchEnd = event.changedTouches[0];\n    const deltaX = touchStart.value.clientX - touchEnd.clientX;\n    const deltaY = touchEnd.clientY - touchStart.value.clientY;\n\n    if (Math.abs(deltaX) > Math.abs(deltaY)) scrollByDelta(deltaX);\n  };\n\n  const handleTouchStart = (event: TouchEvent) => {\n    touchStart.value = event.touches[0];\n  };\n\n  const handleWheel = (event: WheelEvent) => {\n    const isShiftKeyDown = event.shiftKey;\n    const isWheel = Math.abs(event.deltaY) >= 80;\n\n    if (isWheel && !isShiftKeyDown) return;\n    if (event.shiftKey) event.preventDefault();\n\n    clearTimeout(scrollTimeout);\n\n    scrollTimeout = window.setTimeout(() => {\n      if (isWheel) {\n        scrollByDelta(event.deltaY);\n      } else {\n        const offset = slides.value[slidesInView.value[0]]?.offsetLeft || 0;\n\n        scrollToOffset(offset);\n      }\n    }, 100);\n  };\n\n  const measureDom = () => {\n    if (!containerRef.value) return;\n\n    contentWidth.value = containerRef.value.scrollWidth;\n    frameWidth.value = containerRef.value.clientWidth;\n    showButtons.value = contentWidth.value > frameWidth.value;\n\n    slidesInViewCount.value = slides.value.filter((slide) =>\n      getIsElementWithinContainer(slide, containerRef.value as HTMLElement)\n    ).length;\n  };\n\n  const observeSlides = () => {\n    const options = {\n      root: carouselRef?.value,\n      rootMargin: '0px 1px 0px 0px',\n      threshold: 1,\n    };\n\n    slideObserver.value = new IntersectionObserver((entries) => {\n      let slidesAddedToView: number[] = [];\n\n      entries.forEach((entry) => {\n        const slideIndex = slides.value.indexOf(entry.target as HTMLElement);\n\n        if (entry.isIntersecting) {\n          slidesAddedToView.push(slideIndex);\n          slidesInView.value.push(slideIndex);\n        } else {\n          slidesInView.value = slidesInView.value.filter((slide) => slide !== slideIndex);\n        }\n\n        slidesInView.value.sort((a, b) => a - b);\n      });\n\n      isFirstSlide.value = slidesInView.value.includes(0);\n      isLastSlide.value = slidesInView.value.includes(slides.value.length - 1);\n\n      if (slidesAddedToView.length > 0) emit('slidesAddedToView', slidesAddedToView);\n    }, options);\n\n    slides.value.forEach((child) => {\n      if (slideObserver.value) slideObserver.value.observe(child);\n    });\n  };\n\n  const observeSlot = () => {\n    const observerCallback = () => {\n      if (containerRef.value === null) return;\n\n      slides.value = Array.from(containerRef.value.children) as HTMLElement[];\n      observeSlides();\n    };\n\n    slotObserver.value = new MutationObserver(observerCallback);\n\n    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });\n  };\n\n  const scrollByDelta = (delta: number) => {\n    const isScrollingLeft = delta < 0;\n\n    if (isScrollingLeft) {\n      props.isScrollByPage ? showPreviousPage() : showPreviousSlide();\n    } else {\n      props.isScrollByPage ? showNextPage() : showNextSlide();\n    }\n  };\n\n  const scrollToOffset = (target: number) => {\n    if (containerRef.value === null) return;\n\n    const isScrollingLeft = target <= containerRef.value.scrollLeft;\n\n    currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;\n\n    containerRef.value.scrollTo({\n      behavior: 'smooth',\n      left: target,\n    });\n    updateDots(isScrollingLeft);\n  };\n\n  const showNextPage = () => {\n    if (slidesInView.value.length === 0 || isLastSlide.value) return;\n\n    const nextSlide: number = slidesInView.value[slidesInView.value.length - 1] + 1;\n    const offset = slides.value[nextSlide]?.offsetLeft;\n\n    scrollToOffset(offset);\n  };\n\n  const showPreviousPage = () => {\n    if (slidesInView.value.length === 0 || isFirstSlide.value) return;\n\n    const previousSlide: number = slidesInView.value[0] - slidesInView.value.length;\n    const offset = slides.value[previousSlide]?.offsetLeft || 0;\n\n    scrollToOffset(offset);\n  };\n\n  const showNextSlide = () => {\n    if (slidesInView.value.length === 0) return;\n\n    const nextSlide: number = slidesInView.value.length > 1 ? slidesInView.value[1] : slidesInView.value[0] + 1;\n\n    scrollToOffset(slides.value[nextSlide].offsetLeft);\n  };\n\n  const showPreviousSlide = () => {\n    if (slidesInView.value.length === 0) return;\n\n    const previousSlide: number = slidesInView.value[0] - 1;\n\n    scrollToOffset(slides.value[previousSlide].offsetLeft);\n  };\n\n  const updateDots = (isScrollingLeft: boolean) => {\n    if (!dotsRef.value || dotCountVisible.value >= totalPages.value) return;\n\n    const isOddDotCount = dotCountVisible.value % 2 !== 0;\n    const centerDot =\n      isOddDotCount || isScrollingLeft\n        ? Math.floor(dotCountVisible.value / 2) + 1\n        : Math.floor(dotCountVisible.value / 2);\n\n    dotsRef.value.scrollTo({\n      behavior: 'smooth',\n      left: currentPage.value < centerDot ? 0 : (currentPage.value - centerDot) * (dotWidth + dotGap),\n    });\n  };\n\n  onMounted(() => {\n    if (containerRef.value === null) return;\n\n    slides.value = Array.from(containerRef.value.children) as HTMLElement[];\n\n    measureDom();\n    observeSlides();\n    observeSlot();\n\n    if (window) {\n      window.addEventListener('resize', measureDom);\n    }\n  });\n\n  onUnmounted(() => {\n    slideObserver.value?.disconnect();\n    slotObserver.value?.disconnect();\n    window.removeEventListener('resize', measureDom);\n  });\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'tide-carousel',\n      CSS.POSITION.RELATIVE,\n      CSS.DISPLAY.FLEX,\n      CSS.FLEX.DIRECTION.COLUMN,\n      CSS.GAP.ONE,\n      CSS.WIDTH.MAX_FULL,\n    ]\"\n    ref=\"carouselRef\"\n  >\n    <section\n      :class=\"[CSS.DISPLAY.FLEX, props.title ? CSS.AXIS1.BETWEEN : CSS.AXIS1.END, CSS.AXIS2.END, CSS.WIDTH.FULL]\"\n      v-if=\"(!props.isFloating && showButtons) || props.title || props.subtitle || props.headerImage\"\n    >\n      <div\n        :class=\"[\n          CSS.DISPLAY.FLEX,\n          CSS.GAP.HALF,\n          CSS.FLEX.DIRECTION.COLUMN,\n          CSS.AXIS2.START,\n          CSS.withBreakpoint([CSS.FLEX.DIRECTION.ROW, CSS.AXIS2.END], BREAKPOINT.MD),\n        ]\"\n        v-if=\"props.title || props.subtitle || props.headerImage\"\n      >\n        <TideImage\n          :src=\"props.headerImage\"\n          class=\"tide-carousel-header-image\"\n          v-if=\"props.headerImage\"\n        />\n\n        <div :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.AXIS2.START]\">\n          <div\n            :class=\"[props.isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]\"\n            v-if=\"props.title\"\n          >\n            {{ props.title }}\n          </div>\n\n          <div\n            :class=\"[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n            v-if=\"props.subtitle\"\n          >\n            {{ props.subtitle }}\n          </div>\n        </div>\n      </div>\n\n      <div\n        :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]\"\n        v-if=\"!props.isFloating && showButtons\"\n      >\n        <TideButtonIcon\n          :disabled=\"isFirstSlide\"\n          :icon=\"ICON.CHEVRON_LEFT\"\n          :priority=\"PRIORITY.TERTIARY\"\n          @click=\"isScrollByPage ? showPreviousPage() : showPreviousSlide()\"\n        />\n\n        <TideButtonIcon\n          :disabled=\"isLastSlide\"\n          :icon=\"ICON.CHEVRON_RIGHT\"\n          :priority=\"PRIORITY.TERTIARY\"\n          @click=\"isScrollByPage ? showNextPage() : showNextSlide()\"\n        />\n      </div>\n    </section>\n\n    <slot name=\"misc\" />\n\n    <div :class=\"[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX]\">\n      <ul\n        :class=\"[\n          'tide-carousel-container',\n          CSS.DISPLAY.FLEX,\n          CSS.GAP.ONE,\n          CSS.LIST_BULLETS.OFF,\n          CSS.OVERFLOW.X.SCROLL,\n          CSS.SCROLLBAR.OFF,\n          CSS.SNAP.ON,\n        ]\"\n        ref=\"containerRef\"\n        @touchend=\"handleTouchEnd\"\n        @touchstart.passive=\"handleTouchStart\"\n        @wheel=\"handleWheel\"\n      >\n        <slot />\n      </ul>\n\n      <div\n        :class=\"[\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.BOTTOM,\n          CSS.DISPLAY.FLEX,\n          CSS.AXIS1.CENTER,\n          CSS.MARGIN.BOTTOM.HALF,\n          CSS.WIDTH.FULL,\n          CSS.POINTER_EVENTS.OFF,\n        ]\"\n        v-if=\"hasDots && totalPages > 1\"\n      >\n        <div\n          :class=\"['tide-carousel-dots-container']\"\n          :style=\"{\n            width: `${dotContainerWidth}px`,\n          }\"\n        >\n          <div\n            :class=\"[\n              'tide-carousel-dots',\n              CSS.DISPLAY.FLEX,\n              CSS.AXIS1.START,\n              CSS.AXIS2.CENTER,\n              CSS.GAP.HALF,\n              CSS.OVERFLOW.X.SCROLL,\n              CSS.POINTER_EVENTS.OFF,\n              CSS.SCROLLBAR.OFF,\n            ]\"\n            ref=\"dotsRef\"\n          >\n            <div\n              :class=\"[\n                'tide-carousel-dot',\n                CSS.FLEX.SHRINK.OFF,\n                CSS.HEIGHT.ZERO,\n                CSS.WIDTH.ZERO,\n                CSS.BORDER.RADIUS.FULL,\n                CSS.BG.SURFACE.DEFAULT,\n                getDotClass(index),\n              ]\"\n              :key=\"index\"\n              v-for=\"(_, index) in totalPages\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        :class=\"[\n          'tide-carousel-button-overlay',\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.TOP,\n          CSS.DISPLAY.FLEX,\n          CSS.AXIS1.BETWEEN,\n          CSS.AXIS2.CENTER,\n          CSS.WIDTH.FULL,\n          CSS.HEIGHT.FULL,\n          CSS.POINTER_EVENTS.OFF,\n          props.isHideawayButtons ? 'hideaway' : '',\n        ]\"\n        v-if=\"isFloating && showButtons\"\n      >\n        <TideButtonIcon\n          :class=\"[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]\"\n          :disabled=\"isFirstSlide\"\n          :icon=\"ICON.CHEVRON_LEFT\"\n          :priority=\"PRIORITY.QUATERNARY\"\n          @click=\"isScrollByPage ? showPreviousPage() : showPreviousSlide()\"\n        />\n\n        <TideButtonIcon\n          :class=\"[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]\"\n          :disabled=\"isLastSlide\"\n          :icon=\"ICON.CHEVRON_RIGHT\"\n          :priority=\"PRIORITY.QUATERNARY\"\n          @click=\"isScrollByPage ? showNextPage() : showNextSlide()\"\n        />\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n  .tide-carousel-button-overlay.hideaway {\n    opacity: 0;\n  }\n\n  .tide-carousel:hover .tide-carousel-button-overlay.hideaway {\n    opacity: 1;\n  }\n\n  .tide-carousel-dot {\n    width: 8px;\n    height: 8px;\n    opacity: 0.75;\n    transform: scale(0.5);\n    transition: opacity var(--tide-animate), transform var(--tide-animate);\n  }\n\n  .tide-carousel-dot-neighbor {\n    transform: scale(0.75);\n  }\n\n  .tide-carousel-dot-active {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  .tide-carousel-header-image {\n    width: 73px;\n    height: 54px;\n  }\n\n  @media (pointer: coarse) {\n    .tide-carousel .tide-carousel-button-overlay {\n      display: none;\n    }\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createBlock","_createElementVNode","_toDisplayString","_createVNode","TideButtonIcon","_renderSlot","_normalizeStyle","_openBlock","_Fragment","_renderList"],"mappings":";;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;;;;;;AA0Cf,UAAM,QAAQ;AAgBd,UAAM,OAAO;AAEb,UAAM,cAAc,IAA2B,IAAI;AACnD,UAAM,eAAe,IAA2B,IAAI;AACpD,UAAM,eAAe,IAAY,CAAC;AAClC,UAAM,mBAAmB,IAAY,CAAC;AACtC,UAAM,UAAU,IAA2B,IAAI;AAC/C,UAAM,aAAa,IAAY,CAAC;AAChC,UAAM,eAAe,IAAa,IAAI;AACtC,UAAM,cAAc,IAAa,KAAK;AACtC,UAAM,cAAc,IAAa,IAAI;AACrC,UAAM,gBAAgB,IAAiC,IAAI;AAC3D,UAAM,SAAS,IAAmB,EAAE;AACpC,UAAM,eAAe,IAAc,EAAE;AACrC,UAAM,eAAe,IAA6B,IAAI;AACtD,UAAM,aAAa,IAAuB,MAAS;AACnD,UAAM,oBAAoB,IAAY,CAAC;AAEvC,UAAM,cAAc,SAAS,MAAM,iBAAiB,QAAQ,CAAC;AAC7D,UAAM,oBAAoB,SAAS,MAAM,gBAAgB,QAAQ,YAAY,gBAAgB,QAAQ,KAAK,MAAM;AAChH,UAAM,kBAAkB,SAAS,MAAO,MAAM,UAAU,WAAW,QAAQ,WAAW,QAAQ,MAAM,OAAQ;AAC5G,UAAM,aAAa,SAAS,MAAM;AAChC,UAAI,CAAC,OAAO,MAAM,OAAQ,QAAO;AACjC,UAAI,CAAC,MAAM,eAAgB,QAAO,OAAO,MAAM;AAE/C,YAAM,WAAW,KAAK,MAAM,OAAO,MAAM,SAAS,kBAAkB,KAAK;AACzE,YAAM,YAAY,OAAO,MAAM,SAAS,kBAAkB;AAE1D,aAAO,YAAY,WAAW,IAAI;AAAA,IACpC,CAAC;AAED,UAAM,SAAiB;AACvB,UAAM,WAAmB;AACzB,QAAI;AAEJ,UAAM,cAAc,CAAC,aAAqB;AACxC,UAAI,YAAY;AAEhB,UAAI,aAAa,iBAAiB,MAAO,aAAY;AACrD,UAAI,KAAK,IAAI,iBAAiB,QAAQ,QAAQ,MAAM,EAAG,aAAY;AAEnE,aAAO;AAAA,IACT;AAEA,UAAM,8BAA8B,CAAC,SAAsB,cAA2B;AACpF,YAAM,gBAAgB,UAAU,sBAAA;AAChC,YAAM,iBAAiB,cAAc,OAAO,cAAc;AAC1D,YAAM,cAAc,QAAQ,sBAAA;AAC5B,YAAM,eAAe,YAAY,OAAO,YAAY;AAEpD,aAAO,gBAAgB,kBAAkB,YAAY,QAAQ,cAAc;AAAA,IAC7E;AAEA,UAAM,iBAAiB,CAAC,UAAsB;AAC5C,UAAI,CAAC,WAAW,MAAO;AAEvB,YAAM,WAAW,MAAM,eAAe,CAAC;AACvC,YAAM,SAAS,WAAW,MAAM,UAAU,SAAS;AACnD,YAAM,SAAS,SAAS,UAAU,WAAW,MAAM;AAEnD,UAAI,KAAK,IAAI,MAAM,IAAI,KAAK,IAAI,MAAM,EAAG,eAAc,MAAM;AAAA,IAC/D;AAEA,UAAM,mBAAmB,CAAC,UAAsB;AAC9C,iBAAW,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACpC;AAEA,UAAM,cAAc,CAAC,UAAsB;AACzC,YAAM,iBAAiB,MAAM;AAC7B,YAAM,UAAU,KAAK,IAAI,MAAM,MAAM,KAAK;AAE1C,UAAI,WAAW,CAAC,eAAgB;AAChC,UAAI,MAAM,SAAU,OAAM,eAAA;AAE1B,mBAAa,aAAa;AAE1B,sBAAgB,OAAO,WAAW,MAAM;;AACtC,YAAI,SAAS;AACX,wBAAc,MAAM,MAAM;AAAA,QAC5B,OAAO;AACL,gBAAM,WAAS,YAAO,MAAM,aAAa,MAAM,CAAC,CAAC,MAAlC,mBAAqC,eAAc;AAElE,yBAAe,MAAM;AAAA,QACvB;AAAA,MACF,GAAG,GAAG;AAAA,IACR;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,aAAa,MAAO;AAEzB,mBAAa,QAAQ,aAAa,MAAM;AACxC,iBAAW,QAAQ,aAAa,MAAM;AACtC,kBAAY,QAAQ,aAAa,QAAQ,WAAW;AAEpD,wBAAkB,QAAQ,OAAO,MAAM;AAAA,QAAO,CAAC,UAC7C,4BAA4B,OAAO,aAAa,KAAoB;AAAA,MAAA,EACpE;AAAA,IACJ;AAEA,UAAM,gBAAgB,MAAM;AAC1B,YAAM,UAAU;AAAA,QACd,MAAM,2CAAa;AAAA,QACnB,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAGb,oBAAc,QAAQ,IAAI,qBAAqB,CAAC,YAAY;AAC1D,YAAI,oBAA8B,CAAA;AAElC,gBAAQ,QAAQ,CAAC,UAAU;AACzB,gBAAM,aAAa,OAAO,MAAM,QAAQ,MAAM,MAAqB;AAEnE,cAAI,MAAM,gBAAgB;AACxB,8BAAkB,KAAK,UAAU;AACjC,yBAAa,MAAM,KAAK,UAAU;AAAA,UACpC,OAAO;AACL,yBAAa,QAAQ,aAAa,MAAM,OAAO,CAAC,UAAU,UAAU,UAAU;AAAA,UAChF;AAEA,uBAAa,MAAM,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,QACzC,CAAC;AAED,qBAAa,QAAQ,aAAa,MAAM,SAAS,CAAC;AAClD,oBAAY,QAAQ,aAAa,MAAM,SAAS,OAAO,MAAM,SAAS,CAAC;AAEvE,YAAI,kBAAkB,SAAS,EAAG,MAAK,qBAAqB,iBAAiB;AAAA,MAC/E,GAAG,OAAO;AAEV,aAAO,MAAM,QAAQ,CAAC,UAAU;AAC9B,YAAI,cAAc,MAAO,eAAc,MAAM,QAAQ,KAAK;AAAA,MAC5D,CAAC;AAAA,IACH;AAEA,UAAM,cAAc,MAAM;AACxB,YAAM,mBAAmB,MAAM;AAC7B,YAAI,aAAa,UAAU,KAAM;AAEjC,eAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,QAAQ;AACrD,sBAAA;AAAA,MACF;AAEA,mBAAa,QAAQ,IAAI,iBAAiB,gBAAgB;AAE1D,UAAI,aAAa,MAAO,cAAa,MAAM,QAAQ,aAAa,OAAO,EAAE,WAAW,MAAM;AAAA,IAC5F;AAEA,UAAM,gBAAgB,CAAC,UAAkB;AACvC,YAAM,kBAAkB,QAAQ;AAEhC,UAAI,iBAAiB;AACnB,cAAM,iBAAiB,iBAAA,IAAqB,kBAAA;AAAA,MAC9C,OAAO;AACL,cAAM,iBAAiB,aAAA,IAAiB,cAAA;AAAA,MAC1C;AAAA,IACF;AAEA,UAAM,iBAAiB,CAAC,WAAmB;AACzC,UAAI,aAAa,UAAU,KAAM;AAEjC,YAAM,kBAAkB,UAAU,aAAa,MAAM;AAErD,uBAAiB,QAAQ,kBAAkB,iBAAiB,QAAQ,IAAI,iBAAiB,QAAQ;AAEjG,mBAAa,MAAM,SAAS;AAAA,QAC1B,UAAU;AAAA,QACV,MAAM;AAAA,MAAA,CACP;AACD,iBAAW,eAAe;AAAA,IAC5B;AAEA,UAAM,eAAe,MAAM;;AACzB,UAAI,aAAa,MAAM,WAAW,KAAK,YAAY,MAAO;AAE1D,YAAM,YAAoB,aAAa,MAAM,aAAa,MAAM,SAAS,CAAC,IAAI;AAC9E,YAAM,UAAS,YAAO,MAAM,SAAS,MAAtB,mBAAyB;AAExC,qBAAe,MAAM;AAAA,IACvB;AAEA,UAAM,mBAAmB,MAAM;;AAC7B,UAAI,aAAa,MAAM,WAAW,KAAK,aAAa,MAAO;AAE3D,YAAM,gBAAwB,aAAa,MAAM,CAAC,IAAI,aAAa,MAAM;AACzE,YAAM,WAAS,YAAO,MAAM,aAAa,MAA1B,mBAA6B,eAAc;AAE1D,qBAAe,MAAM;AAAA,IACvB;AAEA,UAAM,gBAAgB,MAAM;AAC1B,UAAI,aAAa,MAAM,WAAW,EAAG;AAErC,YAAM,YAAoB,aAAa,MAAM,SAAS,IAAI,aAAa,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;AAE1G,qBAAe,OAAO,MAAM,SAAS,EAAE,UAAU;AAAA,IACnD;AAEA,UAAM,oBAAoB,MAAM;AAC9B,UAAI,aAAa,MAAM,WAAW,EAAG;AAErC,YAAM,gBAAwB,aAAa,MAAM,CAAC,IAAI;AAEtD,qBAAe,OAAO,MAAM,aAAa,EAAE,UAAU;AAAA,IACvD;AAEA,UAAM,aAAa,CAAC,oBAA6B;AAC/C,UAAI,CAAC,QAAQ,SAAS,gBAAgB,SAAS,WAAW,MAAO;AAEjE,YAAM,gBAAgB,gBAAgB,QAAQ,MAAM;AACpD,YAAM,YACJ,iBAAiB,kBACb,KAAK,MAAM,gBAAgB,QAAQ,CAAC,IAAI,IACxC,KAAK,MAAM,gBAAgB,QAAQ,CAAC;AAE1C,cAAQ,MAAM,SAAS;AAAA,QACrB,UAAU;AAAA,QACV,MAAM,YAAY,QAAQ,YAAY,KAAK,YAAY,QAAQ,cAAc,WAAW;AAAA,MAAA,CACzF;AAAA,IACH;AAEA,cAAU,MAAM;AACd,UAAI,aAAa,UAAU,KAAM;AAEjC,aAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,QAAQ;AAErD,iBAAA;AACA,oBAAA;AACA,kBAAA;AAEA,UAAI,QAAQ;AACV,eAAO,iBAAiB,UAAU,UAAU;AAAA,MAC9C;AAAA,IACF,CAAC;AAED,gBAAY,MAAM;;AAChB,0BAAc,UAAd,mBAAqB;AACrB,yBAAa,UAAb,mBAAoB;AACpB,aAAO,oBAAoB,UAAU,UAAU;AAAA,IACjD,CAAC;;0BAIDA,mBAyKU,WAAA;AAAA,QAxKP,OAAKC,eAAA;AAAA;UAAiCC,MAAA,GAAA,EAAI,SAAS;AAAA,UAAgBA,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,KAAK,UAAU;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAWA,MAAA,GAAA,EAAI,MAAM;AAAA,QAAA;iBAQtJ;AAAA,QAAJ,KAAI;AAAA,MAAA;QAIM,CAAA,MAAM,cAAc,YAAA,SAAgB,MAAM,SAAS,MAAM,YAAY,MAAM,4BAFrFF,mBAuDU,WAAA;AAAA;UAtDP,OAAKC,eAAA,CAAGC,MAAA,GAAA,EAAI,QAAQ,MAAM,MAAM,QAAQA,MAAA,GAAA,EAAI,MAAM,UAAUA,MAAA,GAAA,EAAI,MAAM,KAAKA,MAAA,GAAA,EAAI,MAAM,KAAKA,MAAA,GAAA,EAAI,MAAM,IAAI,CAAA;AAAA,QAAA;UAWjG,MAAM,SAAS,MAAM,YAAY,MAAM,4BAR/CF,mBA+BM,OAAA;AAAA;YA9BH,OAAKC,eAAA;AAAA,cAAcC,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAgBA,MAAA,GAAA,EAAI,IAAI;AAAA,cAAgBA,MAAA,GAAA,EAAI,KAAK,UAAU;AAAA,cAAkBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAiBA,MAAA,GAAA,EAAI,eAAc,CAAEA,WAAI,KAAK,UAAU,KAAKA,MAAA,GAAA,EAAI,MAAM,GAAG,GAAGA,MAAA,UAAA,EAAW,EAAE;AAAA,YAAA;;YAYzM,MAAM,4BAHdC,YAIE,WAAA;AAAA;cAHC,KAAK,MAAM;AAAA,cACZ,OAAM;AAAA,YAAA;YAIRC,mBAcM,OAAA;AAAA,cAdA,uBAAQF,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,UAAU,QAAQA,WAAI,MAAM,KAAK,CAAA;AAAA,YAAA;cAGhE,MAAM,sBAFdF,mBAKM,OAAA;AAAA;gBAJH,uBAAQ,MAAM,cAAcE,MAAA,GAAA,EAAI,KAAK,KAAK,aAAaA,MAAA,GAAA,EAAI,KAAK,KAAK,UAAU,CAAA;AAAA,cAAA,GAG7EG,gBAAA,MAAM,KAAK,GAAA,CAAA;cAKR,MAAM,yBAFdL,mBAKM,OAAA;AAAA;gBAJH,uBAAQE,MAAA,GAAA,EAAI,KAAK,KAAK,SAASA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,cAAA,GAG3DG,gBAAA,MAAM,QAAQ,GAAA,CAAA;;;WAOd,MAAM,cAAc,YAAA,sBAF7BL,mBAiBM,OAAA;AAAA;YAhBH,uBAAQE,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,WAAI,IAAI,GAAG,CAAA;AAAA,UAAA;YAGxDI,YAKEC,aAAA;AAAA,cAJC,UAAU,aAAA;AAAA,cACV,MAAML,MAAA,IAAA,EAAK;AAAA,cACX,UAAUA,MAAA,QAAA,EAAS;AAAA,cACnB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,iBAAiB,iBAAA,IAAqB,kBAAA;AAAA,YAAiB;YAGjEI,YAKEC,aAAA;AAAA,cAJC,UAAU,YAAA;AAAA,cACV,MAAML,MAAA,IAAA,EAAK;AAAA,cACX,UAAUA,MAAA,QAAA,EAAS;AAAA,cACnB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,iBAAiB,aAAA,IAAiB,cAAA;AAAA,YAAa;;;QAK7DM,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAEpBJ,mBAkGM,OAAA;AAAA,UAlGA,OAAKH,eAAA,CAAGC,MAAA,GAAA,EAAI,SAAS,UAAUA,MAAA,GAAA,EAAI,QAAQ,IAAI,CAAA;AAAA,QAAA;UACnDE,mBAgBK,MAAA;AAAA,YAfF,OAAKH,eAAA;AAAA;cAAmDC,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAgBA,MAAA,GAAA,EAAI,IAAI;AAAA,cAAeA,MAAA,GAAA,EAAI,aAAa;AAAA,cAAeA,MAAA,GAAA,EAAI,SAAS,EAAE;AAAA,cAAkBA,MAAA,GAAA,EAAI,UAAU;AAAA,cAAeA,MAAA,GAAA,EAAI,KAAK;AAAA,YAAA;qBAS/M;AAAA,YAAJ,KAAI;AAAA,YACH,YAAU;AAAA,iCACU;AAAA,YACpB,SAAO;AAAA,UAAA;YAERM,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAaF,QAAA,WAAW,WAAA,QAAU,kBAV7BR,mBA8CM,OAAA;AAAA;YA7CH,OAAKC,eAAA;AAAA,cAAcC,MAAA,GAAA,EAAI,SAAS;AAAA,cAAoBA,MAAA,GAAA,EAAI,YAAY;AAAA,cAAkBA,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAkBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,cAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAgBA,MAAA,GAAA,EAAI,eAAe;AAAA,YAAA;;YAW9NE,mBAiCM,OAAA;AAAA,cAhCH,sBAAO,CAAA,8BAAA,CAAgC;AAAA,cACvC,OAAKK,eAAA;AAAA,0BAA0B,kBAAA,KAAiB;AAAA,cAAA;;cAIjDL,mBA0BM,OAAA;AAAA,gBAzBH,OAAKH,eAAA;AAAA;kBAAsDC,MAAA,GAAA,EAAI,QAAQ;AAAA,kBAAoBA,MAAA,GAAA,EAAI,MAAM;AAAA,kBAAqBA,MAAA,GAAA,EAAI,MAAM;AAAA,kBAAsBA,MAAA,GAAA,EAAI,IAAI;AAAA,kBAAoBA,MAAA,GAAA,EAAI,SAAS,EAAE;AAAA,kBAAsBA,MAAA,GAAA,EAAI,eAAe;AAAA,kBAAmBA,MAAA,GAAA,EAAI,UAAU;AAAA,gBAAA;yBAU5Q;AAAA,gBAAJ,KAAI;AAAA,cAAA;iBAEJQ,UAAA,IAAA,GAAAV,mBAYEW,UAAA,MAAAC,WADqB,WAAA,OAAU,CAAvB,GAAG,UAAK;sCAXlBZ,mBAYE,OAAA;AAAA,oBAXC,OAAKC,eAAA;AAAA;sBAAyDC,MAAA,GAAA,EAAI,KAAK,OAAO;AAAA,sBAAqBA,MAAA,GAAA,EAAI,OAAO;AAAA,sBAAsBA,MAAA,GAAA,EAAI,MAAM;AAAA,sBAAsBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,sBAAsBA,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,sBAAyB,YAAY,KAAK;AAAA,oBAAA;oBASrQ,KAAK;AAAA,kBAAA;;;;;UAoBN,QAAA,cAAc,YAAA,sBAbtBF,mBA8BM,OAAA;AAAA;YA7BH,OAAKC,eAAA;AAAA;cAAwDC,MAAA,GAAA,EAAI,SAAS;AAAA,cAAoBA,MAAA,GAAA,EAAI,YAAY;AAAA,cAAeA,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAmBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAkBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAgBA,MAAA,GAAA,EAAI,OAAO;AAAA,cAAgBA,MAAA,GAAA,EAAI,eAAe;AAAA,cAAe,MAAM,oBAAiB,aAAA;AAAA,YAAA;;YAcjUI,YAMEC,aAAA;AAAA,cALC,OAAKN,eAAA,CAAGC,MAAA,GAAA,EAAI,OAAO,KAAK,KAAKA,MAAA,GAAA,EAAI,eAAe,EAAE,CAAA;AAAA,cAClD,UAAU,aAAA;AAAA,cACV,MAAMA,MAAA,IAAA,EAAK;AAAA,cACX,UAAUA,MAAA,QAAA,EAAS;AAAA,cACnB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,iBAAiB,iBAAA,IAAqB,kBAAA;AAAA,YAAiB;YAGjEI,YAMEC,aAAA;AAAA,cALC,OAAKN,eAAA,CAAGC,MAAA,GAAA,EAAI,OAAO,MAAM,KAAKA,MAAA,GAAA,EAAI,eAAe,EAAE,CAAA;AAAA,cACnD,UAAU,YAAA;AAAA,cACV,MAAMA,MAAA,IAAA,EAAK;AAAA,cACX,UAAUA,MAAA,QAAA,EAAS;AAAA,cACnB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,iBAAiB,aAAA,IAAiB,cAAA;AAAA,YAAa;;;;;;;"}

package/dist/components/TideColumns.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TideColumns.vue2.js";
 /* empty css                 */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const TideColumns = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f7e2e25"]]);
+const TideColumns = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ea114d75"]]);
 export {
   TideColumns as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TideColumns.vue2.js","sources":["../../src/components/TideColumns.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a columns component for use in navigation.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecolumns--docs) for TideColumns\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines label for the columns section. */\n    heading?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    heading: '',\n  });\n</script>\n\n<template>\n  <section class=\"tide-columns\">\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 class=\"tide-columns-column\">\n        <slot name=\"section1\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section2\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section3\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section4\" />\n      </li>\n    </ul>\n  </section>\n</template>\n\n<style scoped>\n  .tide-columns-column {\n    width: 100%;\n  }\n\n  @media (min-width: 992px) {\n    .tide-columns-column {\n      width: calc((100% - 2rem) / 2);\n    }\n  }\n\n  @media (min-width: 1232px) {\n    .tide-columns-column {\n      width: calc((100% - 6rem) / 4);\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_toDisplayString","_normalizeClass","_renderSlot"],"mappings":";;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;AAWf,UAAM,QAAQ;;AAMd,aAAAA,UAAA,GAAAC,mBAsBU,WAtBV,YAsBU;AAAA,QArBRC,mBAEK,MAAA;AAAA,UAFA,uBAAQC,MAAA,GAAA,EAAI,OAAO,OAAO,IAAI,CAAA;AAAA,QAAA,GAC9BC,gBAAA,MAAM,OAAO,GAAA,CAAA;AAAA,QAGlBF,mBAgBK,MAAA;AAAA,UAhBA,OAAKG,eAAA,CAAGF,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,MAAMA,MAAA,GAAA,EAAI,IAAI,KAAKA,MAAA,GAAA,EAAI,aAAa,GAAG,CAAA;AAAA,QAAA;UAC7ED,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"TideColumns.vue2.js","sources":["../../src/components/TideColumns.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a columns component for use in navigation.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecolumns--docs) for TideColumns\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines label for the columns section. */\n    heading?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    heading: '',\n  });\n</script>\n\n<template>\n  <section class=\"tide-columns\">\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 class=\"tide-columns-column\">\n        <slot name=\"section1\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section2\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section3\" />\n      </li>\n\n      <li class=\"tide-columns-column\">\n        <slot name=\"section4\" />\n      </li>\n    </ul>\n  </section>\n</template>\n\n<style scoped>\n  .tide-columns-column {\n    width: 100%;\n  }\n\n  @container tide-responsive-root (min-width: 992px) {\n    .tide-columns-column {\n      width: calc((100% - 2rem) / 2);\n    }\n  }\n\n  @container tide-responsive-root (min-width: 1232px) {\n    .tide-columns-column {\n      width: calc((100% - 6rem) / 4);\n    }\n  }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_unref","_toDisplayString","_normalizeClass","_renderSlot"],"mappings":";;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;AAWf,UAAM,QAAQ;;AAMd,aAAAA,UAAA,GAAAC,mBAsBU,WAtBV,YAsBU;AAAA,QArBRC,mBAEK,MAAA;AAAA,UAFA,uBAAQC,MAAA,GAAA,EAAI,OAAO,OAAO,IAAI,CAAA;AAAA,QAAA,GAC9BC,gBAAA,MAAM,OAAO,GAAA,CAAA;AAAA,QAGlBF,mBAgBK,MAAA;AAAA,UAhBA,OAAKG,eAAA,CAAGF,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,MAAMA,MAAA,GAAA,EAAI,IAAI,KAAKA,MAAA,GAAA,EAAI,aAAa,GAAG,CAAA;AAAA,QAAA;UAC7ED,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;UAG1BJ,mBAEK,MAFL,YAEK;AAAA,YADHI,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;;;;"}

package/dist/components/TideForm.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, withModifiers, renderSlot } from "vue";
+import { defineComponent, openBlock, createElementBlock, withModifiers, normalizeClass, renderSlot } from "vue";
 import { useTideForm } from "../composables/useTideForm.js";
 const __default__ = {};
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -14,6 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("form", {
+        class: normalizeClass(["tide-form"]),
         onSubmit: withModifiers(handleSubmit, ["prevent"]),
         novalidate: ""
       }, [

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

@@ -1 +1 @@
-{"version":3,"file":"TideForm.vue.js","sources":["../../src/components/TideForm.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a form component to be used to wrap form elements and handle form submission.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideform--docs) for TideForm\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import { useTideForm } from '@/composables/useTideForm';\n\n  type Emits = {\n    (event: 'submit', e: SubmitEvent): void;\n  };\n  const emit = defineEmits<Emits>();\n\n  const { revealValidationErrors } = useTideForm();\n\n  const handleSubmit = (e: SubmitEvent) => {\n    revealValidationErrors();\n    emit('submit', e);\n  };\n</script>\n\n<template>\n  <form\n    @submit.prevent=\"handleSubmit\"\n    novalidate\n  >\n    <slot />\n  </form>\n</template>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;AAME,MAAA,cAAe,CAAA;;;;;;AASf,UAAM,OAAO;AAEb,UAAM,EAAE,uBAAA,IAA2B,YAAA;AAEnC,UAAM,eAAe,CAAC,MAAmB;AACvC,6BAAA;AACA,WAAK,UAAU,CAAC;AAAA,IAClB;;0BAIAA,mBAKO,QAAA;AAAA,QAJJ,wBAAgB,cAAY,CAAA,SAAA,CAAA;AAAA,QAC7B,YAAA;AAAA,MAAA;QAEAC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"TideForm.vue.js","sources":["../../src/components/TideForm.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a form component to be used to wrap form elements and handle form submission.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideform--docs) for TideForm\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import { useTideForm } from '@/composables/useTideForm';\n\n  type Emits = {\n    (event: 'submit', e: SubmitEvent): void;\n  };\n  const emit = defineEmits<Emits>();\n\n  const { revealValidationErrors } = useTideForm();\n\n  const handleSubmit = (e: SubmitEvent) => {\n    revealValidationErrors();\n    emit('submit', e);\n  };\n</script>\n\n<template>\n  <form\n    :class=\"['tide-form']\"\n    @submit.prevent=\"handleSubmit\"\n    novalidate\n  >\n    <slot />\n  </form>\n</template>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;AAME,MAAA,cAAe,CAAA;;;;;;AASf,UAAM,OAAO;AAEb,UAAM,EAAE,uBAAA,IAA2B,YAAA;AAEnC,UAAM,eAAe,CAAC,MAAmB;AACvC,6BAAA;AACA,WAAK,UAAU,CAAC;AAAA,IAClB;;0BAIAA,mBAMO,QAAA;AAAA,QALJ,sBAAO,CAAA,WAAA,CAAa;AAAA,QACpB,wBAAgB,cAAY,CAAA,SAAA,CAAA;AAAA,QAC7B,YAAA;AAAA,MAAA;QAEAC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/components/TideInputSupportingText.vue.js

@@ -16,6 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([
+          "tide-input-supporting-text",
           unref(CSS).DISPLAY.FLEX,
           unref(CSS).AXIS2.CENTER,
           unref(CSS).GAP.QUARTER,

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

@@ -1 +1 @@
-{"version":3,"file":"TideInputSupportingText.vue.js","sources":["../../src/components/TideInputSupportingText.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders an input supporting text component.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputsupportingtext--docs) for TideInputSupportingText\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\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    isError: boolean;\n    message: string;\n  };\n  defineProps<Props>();\n</script>\n\n<template>\n  <div\n    :class=\"[\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.QUARTER,\n      CSS.FONT.ROLE.LABEL_3,\n      isError ? [CSS.FONT.COLOR.GLOBAL.ERROR] : [CSS.FONT.COLOR.SURFACE.DEFAULT],\n    ]\"\n  >\n    <TideIcon\n      :class=\"[CSS.FLEX.SHRINK.OFF]\"\n      :icon=\"ICON.ERROR\"\n      :size=\"SIZE.SMALL\"\n      v-if=\"isError\"\n    />\n\n    <div>\n      {{ message }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createBlock","TideIcon","_createElementVNode"],"mappings":";;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;0BAiBfA,mBAmBM,OAAA;AAAA,QAlBH,OAAKC,eAAA;AAAA,UAAUC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAeA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,UAAe,QAAA,WAAWA,MAAA,GAAA,EAAI,KAAK,MAAM,OAAO,KAAK,IAAA,CAAKA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO;AAAA,QAAA;;QAYrL,QAAA,wBAJRC,YAKEC,aAAA;AAAA;UAJC,uBAAQF,MAAA,GAAA,EAAI,KAAK,OAAO,GAAG,CAAA;AAAA,UAC3B,MAAMA,MAAA,IAAA,EAAK;AAAA,UACX,MAAMA,MAAA,IAAA,EAAK;AAAA,QAAA;QAIdG,mBAEM,6BADD,QAAA,OAAO,GAAA,CAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"TideInputSupportingText.vue.js","sources":["../../src/components/TideInputSupportingText.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders an input supporting text component.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputsupportingtext--docs) for TideInputSupportingText\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\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    isError: boolean;\n    message: string;\n  };\n  defineProps<Props>();\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tide-input-supporting-text',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.QUARTER,\n      CSS.FONT.ROLE.LABEL_3,\n      isError ? [CSS.FONT.COLOR.GLOBAL.ERROR] : [CSS.FONT.COLOR.SURFACE.DEFAULT],\n    ]\"\n  >\n    <TideIcon\n      :class=\"[CSS.FLEX.SHRINK.OFF]\"\n      :icon=\"ICON.ERROR\"\n      :size=\"SIZE.SMALL\"\n      v-if=\"isError\"\n    />\n\n    <div>\n      {{ message }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createBlock","TideIcon","_createElementVNode"],"mappings":";;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;0BAiBfA,mBAoBM,OAAA;AAAA,QAnBH,OAAKC,eAAA;AAAA;UAA8CC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAeA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,UAAe,QAAA,WAAWA,MAAA,GAAA,EAAI,KAAK,MAAM,OAAO,KAAK,IAAA,CAAKA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO;AAAA,QAAA;;QAazN,QAAA,wBAJRC,YAKEC,aAAA;AAAA;UAJC,uBAAQF,MAAA,GAAA,EAAI,KAAK,OAAO,GAAG,CAAA;AAAA,UAC3B,MAAMA,MAAA,IAAA,EAAK;AAAA,UACX,MAAMA,MAAA,IAAA,EAAK;AAAA,QAAA;QAIdG,mBAEM,6BADD,QAAA,OAAO,GAAA,CAAA;AAAA,MAAA;;;;"}

package/dist/components/TideModal.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TideModal.vue2.js";
 /* empty css               */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const TideModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-48b2fcd3"]]);
+const TideModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d0a4311b"]]);
 export {
   TideModal as default
 };

package/dist/components/TideModal.vue2.js

@@ -129,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 icon: unref(ICON).CHEVRON_LEFT,
                 priority: unref(PRIORITY).QUATERNARY,
                 onClick: _cache[0] || (_cache[0] = ($event) => emit("back")),
-                "data-test": "tide-modal-back",
+                class: "tide-modal-back",
                 title: "Back"
               }, null, 8, ["icon", "priority"])) : createCommentVNode("", true),
               createElementVNode("div", {
@@ -138,11 +138,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 10, _hoisted_1),
               __props.isDismissible ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 1,
-                class: normalizeClass([unref(CSS).FLEX.GROW.OFF, unref(CSS).FLEX.SHRINK.OFF, unref(CSS).MARGIN.LEFT.AUTO]),
+                class: normalizeClass(["tide-modal-close", 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-modal-close"
+                onClick: close
               }, null, 8, ["class", "icon", "priority"])) : createCommentVNode("", true)
             ], 2),
             createElementVNode("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"TideModal.vue2.js","sources":["../../src/components/TideModal.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a modal intended to be used for displaying additional information or options.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemodal--docs) for TideModal\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script lang=\"ts\" setup>\n  import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import { BREAKPOINT } from '@/types/Breakpoint';\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    /**\n     * Called before the modal closes.\n     *\n     * Return `false` to cancel the close event.\n     */\n    beforeClose?: () => void | boolean | Promise<void | boolean>;\n    /** Controls display of the back button. */\n    isBackButton?: boolean;\n    /** Controls whether the modal can be dismissed with a close button or other gestures. */\n    isDismissible?: boolean;\n    /** The title to display in the modal's header. */\n    title?: string;\n    /** Custom override to the modal's width constraint. Include units. */\n    width?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    beforeClose: undefined,\n    isBackButton: false,\n    isDismissible: true,\n    title: undefined,\n    width: undefined,\n  });\n\n  type Emits = {\n    (e: 'back'): void;\n  };\n\n  const emit = defineEmits<Emits>();\n\n  const modalContent: Ref<HTMLDivElement | undefined> = ref();\n  const modalDialog: Ref<HTMLDialogElement | undefined> = ref();\n\n  const isOpen = defineModel<boolean>({ required: true });\n\n  const triggerNativeDialogOpen = () => {\n    modalDialog.value?.showModal();\n    setScrollLock(true);\n  };\n\n  const triggerNativeDialogClose = () => {\n    modalDialog.value?.close();\n    setScrollLock(false);\n  };\n\n  const scrollContentToTop = () => {\n    nextTick(() => {\n      if (!modalContent.value) return;\n      modalContent.value.scrollTop = 0;\n    });\n  };\n\n  const close = async () => {\n    if (props.beforeClose) {\n      const result = await props.beforeClose();\n      if (result === false) return;\n    }\n\n    isOpen.value = false;\n  };\n\n  const handleBackdropClick = () => {\n    if (props.isDismissible) close();\n  };\n\n  const handleEscapeKeyup = () => {\n    if (props.isDismissible) close();\n  };\n\n  watch(isOpen, () => {\n    if (!modalDialog.value) return;\n    if (isOpen.value) {\n      triggerNativeDialogOpen();\n      scrollContentToTop();\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-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]\"\n      ref=\"modalDialog\"\n      :style=\"{ '--modal-width': width }\"\n      @cancel.prevent\n      @click.self=\"handleBackdropClick\"\n      @keyup.escape=\"handleEscapeKeyup\"\n      closedby=\"none\"\n    >\n      <div\n        :class=\"[\n          'tide-modal-body',\n          CSS.BG.SURFACE.DEFAULT,\n          CSS.BORDER.RADIUS.ONE,\n          CSS.DISPLAY.FLEX,\n          CSS.FLEX.DIRECTION.COLUMN,\n          CSS.OVERFLOW.XY.HIDDEN,\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.BOTTOM,\n          CSS.SHADOW.TOP,\n          CSS.WIDTH.FULL,\n          CSS.WIDTH.MAX_FULL,\n          CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),\n        ]\"\n      >\n        <header\n          :class=\"[\n            'tide-modal-header',\n            CSS.AXIS2.CENTER,\n            CSS.BORDER.BOTTOM.ONE,\n            CSS.BORDER.COLOR.LOW,\n            CSS.DISPLAY.FLEX,\n            CSS.GAP.HALF,\n            CSS.ISOLATION.ISOLATE,\n            CSS.PADDING.Y.ONE,\n            CSS.POSITION.RELATIVE,\n            CSS.Z_INDEX.ONE,\n          ]\"\n        >\n          <TideButtonIcon\n            :icon=\"ICON.CHEVRON_LEFT\"\n            :priority=\"PRIORITY.QUATERNARY\"\n            @click=\"emit('back')\"\n            data-test=\"tide-modal-back\"\n            title=\"Back\"\n            v-if=\"isBackButton\"\n          />\n\n          <div\n            :class=\"[CSS.FONT.ROLE.HEADLINE_2]\"\n            v-text=\"title\"\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-modal-close\"\n            v-if=\"isDismissible\"\n          />\n        </header>\n\n        <div\n          :class=\"[\n            'tide-modal-content',\n            CSS.DISPLAY.GRID,\n            CSS.ISOLATION.ISOLATE,\n            CSS.OVERFLOW.X.HIDDEN,\n            CSS.OVERFLOW.Y.AUTO,\n            CSS.PADDING.Y.TWO,\n            CSS.WIDTH.FULL,\n          ]\"\n          ref=\"modalContent\"\n        >\n          <slot />\n        </div>\n\n        <footer\n          :class=\"[\n            'tide-modal-footer',\n            CSS.AXIS1.END,\n            CSS.DISPLAY.FLEX,\n            CSS.GAP.TWO,\n            CSS.ISOLATION.ISOLATE,\n            CSS.PADDING.Y.ONE,\n            CSS.SHADOW.TOP,\n          ]\"\n          v-if=\"$slots.footer\"\n        >\n          <slot name=\"footer\" />\n        </footer>\n      </div>\n    </dialog>\n  </Teleport>\n</template>\n\n<style scoped>\n  .tide-modal {\n    --modal-padding-x: 20px;\n    max-width: unset;\n    max-height: unset;\n    place-items: center;\n    display: none;\n    transition: all var(--tide-animate) allow-discrete;\n    transform: translateY(100%);\n  }\n\n  .tide-modal[open] {\n    display: grid;\n    transform: translateY(0%);\n  }\n\n  .tide-modal::backdrop {\n    background-color: transparent;\n    transition: all var(--tide-animate) allow-discrete;\n    backdrop-filter: blur(0px);\n  }\n\n  .tide-modal[open]::backdrop {\n    background-color: var(--tide-transparent-400);\n    backdrop-filter: var(--tide-bg-blur);\n  }\n\n  @starting-style {\n    .tide-modal[open] {\n      display: grid;\n      transform: translateY(100%);\n    }\n\n    .tide-modal[open]::backdrop {\n      background-color: transparent;\n      backdrop-filter: var(--tide-bg-blur);\n    }\n  }\n\n  .tide-modal-body {\n    width: var(--modal-width, 576px);\n    max-height: calc(100% - var(--tide-spacing-2));\n  }\n\n  .tide-modal-header,\n  .tide-modal-footer {\n    padding-inline: var(--modal-padding-x);\n  }\n\n  .tide-modal-content {\n    grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);\n    contain: layout;\n  }\n\n  :where(.tide-modal-content):deep(> :where(*)) {\n    grid-column: 2;\n  }\n\n  @media (max-width: 767px) {\n    .tide-modal-body {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .tide-modal {\n      --modal-padding-x: var(--tide-spacing-2);\n    }\n\n    .tide-modal-body {\n      max-height: 85%;\n      bottom: initial;\n    }\n  }\n</style>\n"],"names":["_useModel","_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_normalizeClass","TideButtonIcon","_toDisplayString","_renderSlot","$slots","_createElementBlock"],"mappings":"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"}
+{"version":3,"file":"TideModal.vue2.js","sources":["../../src/components/TideModal.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a modal intended to be used for displaying additional information or options.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemodal--docs) for TideModal\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script lang=\"ts\" setup>\n  import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import { BREAKPOINT } from '@/types/Breakpoint';\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    /**\n     * Called before the modal closes.\n     *\n     * Return `false` to cancel the close event.\n     */\n    beforeClose?: () => void | boolean | Promise<void | boolean>;\n    /** Controls display of the back button. */\n    isBackButton?: boolean;\n    /** Controls whether the modal can be dismissed with a close button or other gestures. */\n    isDismissible?: boolean;\n    /** The title to display in the modal's header. */\n    title?: string;\n    /** Custom override to the modal's width constraint. Include units. */\n    width?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    beforeClose: undefined,\n    isBackButton: false,\n    isDismissible: true,\n    title: undefined,\n    width: undefined,\n  });\n\n  type Emits = {\n    (e: 'back'): void;\n  };\n\n  const emit = defineEmits<Emits>();\n\n  const modalContent: Ref<HTMLDivElement | undefined> = ref();\n  const modalDialog: Ref<HTMLDialogElement | undefined> = ref();\n\n  const isOpen = defineModel<boolean>({ required: true });\n\n  const triggerNativeDialogOpen = () => {\n    modalDialog.value?.showModal();\n    setScrollLock(true);\n  };\n\n  const triggerNativeDialogClose = () => {\n    modalDialog.value?.close();\n    setScrollLock(false);\n  };\n\n  const scrollContentToTop = () => {\n    nextTick(() => {\n      if (!modalContent.value) return;\n      modalContent.value.scrollTop = 0;\n    });\n  };\n\n  const close = async () => {\n    if (props.beforeClose) {\n      const result = await props.beforeClose();\n      if (result === false) return;\n    }\n\n    isOpen.value = false;\n  };\n\n  const handleBackdropClick = () => {\n    if (props.isDismissible) close();\n  };\n\n  const handleEscapeKeyup = () => {\n    if (props.isDismissible) close();\n  };\n\n  watch(isOpen, () => {\n    if (!modalDialog.value) return;\n    if (isOpen.value) {\n      triggerNativeDialogOpen();\n      scrollContentToTop();\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-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]\"\n      ref=\"modalDialog\"\n      :style=\"{ '--modal-width': width }\"\n      @cancel.prevent\n      @click.self=\"handleBackdropClick\"\n      @keyup.escape=\"handleEscapeKeyup\"\n      closedby=\"none\"\n    >\n      <div\n        :class=\"[\n          'tide-modal-body',\n          CSS.BG.SURFACE.DEFAULT,\n          CSS.BORDER.RADIUS.ONE,\n          CSS.DISPLAY.FLEX,\n          CSS.FLEX.DIRECTION.COLUMN,\n          CSS.OVERFLOW.XY.HIDDEN,\n          CSS.POSITION.ABSOLUTE,\n          CSS.POSITIONING.BOTTOM,\n          CSS.SHADOW.TOP,\n          CSS.WIDTH.FULL,\n          CSS.WIDTH.MAX_FULL,\n          CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),\n        ]\"\n      >\n        <header\n          :class=\"[\n            'tide-modal-header',\n            CSS.AXIS2.CENTER,\n            CSS.BORDER.BOTTOM.ONE,\n            CSS.BORDER.COLOR.LOW,\n            CSS.DISPLAY.FLEX,\n            CSS.GAP.HALF,\n            CSS.ISOLATION.ISOLATE,\n            CSS.PADDING.Y.ONE,\n            CSS.POSITION.RELATIVE,\n            CSS.Z_INDEX.ONE,\n          ]\"\n        >\n          <TideButtonIcon\n            :icon=\"ICON.CHEVRON_LEFT\"\n            :priority=\"PRIORITY.QUATERNARY\"\n            @click=\"emit('back')\"\n            class=\"tide-modal-back\"\n            title=\"Back\"\n            v-if=\"isBackButton\"\n          />\n\n          <div\n            :class=\"[CSS.FONT.ROLE.HEADLINE_2]\"\n            v-text=\"title\"\n          />\n\n          <TideButtonIcon\n            :class=\"['tide-modal-close', CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]\"\n            :icon=\"ICON.CLOSE\"\n            :priority=\"PRIORITY.QUATERNARY\"\n            @click=\"close\"\n            v-if=\"isDismissible\"\n          />\n        </header>\n\n        <div\n          :class=\"[\n            'tide-modal-content',\n            CSS.DISPLAY.GRID,\n            CSS.ISOLATION.ISOLATE,\n            CSS.OVERFLOW.X.HIDDEN,\n            CSS.OVERFLOW.Y.AUTO,\n            CSS.PADDING.Y.TWO,\n            CSS.WIDTH.FULL,\n          ]\"\n          ref=\"modalContent\"\n        >\n          <slot />\n        </div>\n\n        <footer\n          :class=\"[\n            'tide-modal-footer',\n            CSS.AXIS1.END,\n            CSS.DISPLAY.FLEX,\n            CSS.GAP.TWO,\n            CSS.ISOLATION.ISOLATE,\n            CSS.PADDING.Y.ONE,\n            CSS.SHADOW.TOP,\n          ]\"\n          v-if=\"$slots.footer\"\n        >\n          <slot name=\"footer\" />\n        </footer>\n      </div>\n    </dialog>\n  </Teleport>\n</template>\n\n<style scoped>\n  .tide-modal {\n    --modal-padding-x: 20px;\n    max-width: unset;\n    max-height: unset;\n    place-items: center;\n    display: none;\n    transition: all var(--tide-animate) allow-discrete;\n    transform: translateY(100%);\n  }\n\n  .tide-modal[open] {\n    display: grid;\n    transform: translateY(0%);\n  }\n\n  .tide-modal::backdrop {\n    background-color: transparent;\n    transition: all var(--tide-animate) allow-discrete;\n    backdrop-filter: blur(0px);\n  }\n\n  .tide-modal[open]::backdrop {\n    background-color: var(--tide-transparent-400);\n    backdrop-filter: var(--tide-bg-blur);\n  }\n\n  @starting-style {\n    .tide-modal[open] {\n      display: grid;\n      transform: translateY(100%);\n    }\n\n    .tide-modal[open]::backdrop {\n      background-color: transparent;\n      backdrop-filter: var(--tide-bg-blur);\n    }\n  }\n\n  .tide-modal-body {\n    width: var(--modal-width, 576px);\n    max-height: calc(100% - var(--tide-spacing-2));\n  }\n\n  .tide-modal-header,\n  .tide-modal-footer {\n    padding-inline: var(--modal-padding-x);\n  }\n\n  .tide-modal-content {\n    grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);\n    contain: layout;\n  }\n\n  :where(.tide-modal-content):deep(> :where(*)) {\n    grid-column: 2;\n  }\n\n  @container tide-responsive-root (max-width: 767px) {\n    .tide-modal-body {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  @container tide-responsive-root (min-width: 768px) {\n    .tide-modal {\n      --modal-padding-x: var(--tide-spacing-2);\n    }\n\n    .tide-modal-body {\n      max-height: 85%;\n      bottom: initial;\n    }\n  }\n</style>\n"],"names":["_useModel","_createBlock","_Teleport","_unref","_createElementVNode","_mergeProps","_normalizeClass","TideButtonIcon","_toDisplayString","_renderSlot","$slots","_createElementBlock"],"mappings":";;;;;;;;AAME,MAAA,cAAe,EAAE,cAAc,MAAA;;;;;;;;;;;;;;;;AAgC/B,UAAM,QAAQ;AAYd,UAAM,OAAO;AAEb,UAAM,eAAgD,IAAA;AACtD,UAAM,cAAkD,IAAA;AAExD,UAAM,SAASA,SAAoB,SAAA,YAAmB;AAEtD,UAAM,0BAA0B,MAAM;;AACpC,wBAAY,UAAZ,mBAAmB;AACnB,oBAAc,IAAI;AAAA,IACpB;AAEA,UAAM,2BAA2B,MAAM;;AACrC,wBAAY,UAAZ,mBAAmB;AACnB,oBAAc,KAAK;AAAA,IACrB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,eAAS,MAAM;AACb,YAAI,CAAC,aAAa,MAAO;AACzB,qBAAa,MAAM,YAAY;AAAA,MACjC,CAAC;AAAA,IACH;AAEA,UAAM,QAAQ,YAAY;AACxB,UAAI,MAAM,aAAa;AACrB,cAAM,SAAS,MAAM,MAAM,YAAA;AAC3B,YAAI,WAAW,MAAO;AAAA,MACxB;AAEA,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,cAAe,OAAA;AAAA,IAC3B;AAEA,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM,cAAe,OAAA;AAAA,IAC3B;AAEA,UAAM,QAAQ,MAAM;AAClB,UAAI,CAAC,YAAY,MAAO;AACxB,UAAI,OAAO,OAAO;AAChB,gCAAA;AACA,2BAAA;AAAA,MACF,OAAO;AACL,iCAAA;AAAA,MACF;AAAA,IACF,CAAC;AAED,kBAAc,MAAM;AAClB,uBAAA;AAAA,IACF,CAAC;AAED,cAAU,MAAM;AACd,UAAI,OAAO,OAAO;AAChB,gCAAA;AAAA,MACF;AAAA,IACF,CAAC;AAED,oBAAgB,MAAM;AACpB,UAAI,OAAO,OAAO;AAChB,eAAO,QAAQ;AACf,iCAAA;AAAA,MACF;AAAA,IACF,CAAC;;0BAIDC,YA+FWC,UAAA;AAAA,QA/FA,QAAQC,MAAA,YAAA,CAAY;AAAA,MAAA;QAC7BC,mBA6FS,UA7FTC,WA6FS,KAAA,QA5FO;AAAA,UACb,OAAK,CAAA,cAAiBF,MAAA,GAAA,EAAI,GAAG,SAASA,MAAA,GAAA,EAAI,OAAO,MAAMA,MAAA,GAAA,EAAI,MAAM,MAAMA,MAAA,GAAA,EAAI,SAAS,GAAG,MAAM;AAAA,mBAC1F;AAAA,UAAJ,KAAI;AAAA,UACH,0BAA0B,QAAA,MAAA;AAAA,UAC1B,kDAAD,MAAA;AAAA,UAAA,GAAe,CAAA,SAAA,CAAA;AAAA,UACd,uBAAY,qBAAmB,CAAA,MAAA,CAAA;AAAA,UAC/B,kBAAc,mBAAiB,CAAA,QAAA,CAAA;AAAA,UAChC,UAAS;AAAA,QAAA;UAETC,mBAkFM,OAAA;AAAA,YAjFH,OAAKE,eAAA;AAAA;cAA2CH,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,cAAmBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,cAAeA,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAgBA,MAAA,GAAA,EAAI,KAAK,UAAU;AAAA,cAAkBA,MAAA,GAAA,EAAI,SAAS,GAAG;AAAA,cAAkBA,MAAA,GAAA,EAAI,SAAS;AAAA,cAAoBA,MAAA,GAAA,EAAI,YAAY;AAAA,cAAkBA,MAAA,GAAA,EAAI,OAAO;AAAA,cAAeA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAoBA,MAAA,GAAA,EAAI,eAAc,CAAEA,MAAA,GAAA,EAAI,OAAO,MAAM,GAAGA,MAAA,UAAA,EAAW,EAAE;AAAA,YAAA;;YAejaC,mBAmCS,UAAA;AAAA,cAlCN,OAAKE,eAAA;AAAA;gBAAiDH,MAAA,GAAA,EAAI,MAAM;AAAA,gBAAoBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,gBAAiBA,MAAA,GAAA,EAAI,OAAO,MAAM;AAAA,gBAAiBA,MAAA,GAAA,EAAI,QAAQ;AAAA,gBAAkBA,MAAA,GAAA,EAAI,IAAI;AAAA,gBAAkBA,MAAA,GAAA,EAAI,UAAU;AAAA,gBAAqBA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,gBAAiBA,MAAA,GAAA,EAAI,SAAS;AAAA,gBAAsBA,MAAA,GAAA,EAAI,QAAQ;AAAA,cAAA;;cAmB3T,QAAA,6BANRF,YAOEM,aAAA;AAAA;gBANC,MAAMJ,MAAA,IAAA,EAAK;AAAA,gBACX,UAAUA,MAAA,QAAA,EAAS;AAAA,gBACnB,+CAAO,KAAI,MAAA;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,cAAA;cAIRC,mBAGE,OAAA;AAAA,gBAFC,uBAAQD,MAAA,GAAA,EAAI,KAAK,KAAK,UAAU,CAAA;AAAA,gBACjC,aAAAK,gBAAQ,QAAM,KAAD;AAAA,cAAA;cAQP,QAAA,8BALRP,YAMEM,aAAA;AAAA;gBALC,OAAKD,eAAA,CAAA,oBAAuBH,WAAI,KAAK,KAAK,KAAKA,MAAA,GAAA,EAAI,KAAK,OAAO,KAAKA,MAAA,GAAA,EAAI,OAAO,KAAK,IAAI,CAAA;AAAA,gBACxF,MAAMA,MAAA,IAAA,EAAK;AAAA,gBACX,UAAUA,MAAA,QAAA,EAAS;AAAA,gBACnB,SAAO;AAAA,cAAA;;YAKZC,mBAaM,OAAA;AAAA,cAZH,OAAKE,eAAA;AAAA;gBAAkDH,MAAA,GAAA,EAAI,QAAQ;AAAA,gBAAkBA,MAAA,GAAA,EAAI,UAAU;AAAA,gBAAqBA,MAAA,GAAA,EAAI,SAAS,EAAE;AAAA,gBAAoBA,MAAA,GAAA,EAAI,SAAS,EAAE;AAAA,gBAAkBA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,gBAAiBA,MAAA,GAAA,EAAI,MAAM;AAAA,cAAA;uBASlO;AAAA,cAAJ,KAAI;AAAA,YAAA;cAEJM,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAAA;YAaFC,KAAAA,OAAO,uBAVfC,mBAaS,UAAA;AAAA;cAZN,OAAKL,eAAA;AAAA;gBAAiDH,MAAA,GAAA,EAAI,MAAM;AAAA,gBAAiBA,MAAA,GAAA,EAAI,QAAQ;AAAA,gBAAkBA,MAAA,GAAA,EAAI,IAAI;AAAA,gBAAiBA,MAAA,GAAA,EAAI,UAAU;AAAA,gBAAqBA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,gBAAiBA,MAAA,GAAA,EAAI,OAAO;AAAA,cAAA;;cAWtNM,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAAA;;;;;;;"}

package/dist/components/TidePagination.vue.js

@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: handlePreviousClick
           }, null, 8, ["disabled", "icon", "priority"]),
           createElementVNode("span", {
-            class: normalizeClass([unref(CSS).FONT.ROLE.BUTTON_1, unref(CSS).FONT.COLOR.SURFACE.DEFAULT])
+            class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_1_SEMIBOLD, unref(CSS).FONT.COLOR.SURFACE.DEFAULT])
           }, toDisplayString(unref(formatNumber)(currentIndex.value)) + " / " + toDisplayString(unref(formatNumber)(__props.pageCount)), 3),
           createVNode(_sfc_main$1, {
             disabled: currentIndex.value >= __props.pageCount,

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

@@ -1 +1 @@
-{"version":3,"file":"TidePagination.vue.js","sources":["../../src/components/TidePagination.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a pagination component for navigating through pages of content.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidepagination--docs) for TidePagination\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, watchEffect } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { PRIORITY } from '@/types/Priority';\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n\n  type Props = {\n    /** Total number of pages available */\n    pageCount: number;\n    /** Number of items per page. When provided, a results summary is shown below the pagination controls. */\n    pageSize?: number;\n    /** Total number of results */\n    totalResults: number;\n  };\n\n  const props = defineProps<Props>();\n\n  const currentIndex = defineModel<number>({ required: true });\n\n  watchEffect(() => {\n    if (props.pageCount < 1) return;\n\n    const clamped = Math.min(Math.max(currentIndex.value, 1), props.pageCount);\n    if (clamped !== currentIndex.value) currentIndex.value = clamped;\n  });\n\n  const resultStart = computed(() => {\n    if (props.pageSize === undefined) return undefined;\n    if (props.totalResults === 0) return formatNumber(0);\n    return formatNumber((currentIndex.value - 1) * props.pageSize + 1);\n  });\n\n  const resultEnd = computed(() => {\n    if (props.pageSize === undefined) return undefined;\n    if (props.totalResults === 0) return formatNumber(0);\n    return formatNumber(Math.min(currentIndex.value * props.pageSize, props.totalResults));\n  });\n\n  const handlePreviousClick = () => {\n    if (currentIndex.value > 1) {\n      currentIndex.value--;\n    }\n  };\n\n  const handleNextClick = () => {\n    if (currentIndex.value < props.pageCount) {\n      currentIndex.value++;\n    }\n  };\n</script>\n\n<template>\n  <section :class=\"['tide-pagination', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.AXIS2.CENTER, CSS.GAP.HALF]\">\n    <div :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]\">\n      <TideButtonIcon\n        :disabled=\"currentIndex <= 1\"\n        :icon=\"ICON.CHEVRON_LEFT\"\n        :priority=\"PRIORITY.QUATERNARY\"\n        @click=\"handlePreviousClick\"\n      />\n\n      <span :class=\"[CSS.FONT.ROLE.BUTTON_1, CSS.FONT.COLOR.SURFACE.DEFAULT]\">\n        {{ formatNumber(currentIndex) }} / {{ formatNumber(pageCount) }}\n      </span>\n\n      <TideButtonIcon\n        :disabled=\"currentIndex >= pageCount\"\n        :icon=\"ICON.CHEVRON_RIGHT\"\n        :priority=\"PRIORITY.QUATERNARY\"\n        @click=\"handleNextClick\"\n      />\n    </div>\n\n    <p\n      :class=\"[CSS.FONT.ROLE.BODY_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n      v-if=\"props.pageSize !== undefined\"\n    >\n      {{ resultStart }}–{{ resultEnd }} of {{ formatNumber(totalResults) }} results\n    </p>\n  </section>\n</template>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","TideButtonIcon","_toDisplayString"],"mappings":";;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;;;AAqBf,UAAM,QAAQ;AAEd,UAAM,eAAeA,8BAAsC;AAE3D,gBAAY,MAAM;AAChB,UAAI,MAAM,YAAY,EAAG;AAEzB,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,aAAa,OAAO,CAAC,GAAG,MAAM,SAAS;AACzE,UAAI,YAAY,aAAa,MAAO,cAAa,QAAQ;AAAA,IAC3D,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,aAAa,OAAW,QAAO;AACzC,UAAI,MAAM,iBAAiB,EAAG,QAAO,aAAa,CAAC;AACnD,aAAO,cAAc,aAAa,QAAQ,KAAK,MAAM,WAAW,CAAC;AAAA,IACnE,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,UAAI,MAAM,aAAa,OAAW,QAAO;AACzC,UAAI,MAAM,iBAAiB,EAAG,QAAO,aAAa,CAAC;AACnD,aAAO,aAAa,KAAK,IAAI,aAAa,QAAQ,MAAM,UAAU,MAAM,YAAY,CAAC;AAAA,IACvF,CAAC;AAED,UAAM,sBAAsB,MAAM;AAChC,UAAI,aAAa,QAAQ,GAAG;AAC1B,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,kBAAkB,MAAM;AAC5B,UAAI,aAAa,QAAQ,MAAM,WAAW;AACxC,qBAAa;AAAA,MACf;AAAA,IACF;;0BAIAC,mBA2BU,WAAA;AAAA,QA3BA,OAAKC,eAAA,CAAA,mBAAsBC,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,UAAU,QAAQA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,IAAI,CAAA;AAAA,MAAA;QAC9GC,mBAkBM,OAAA;AAAA,UAlBA,OAAKF,eAAA,CAAGC,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,IAAI,CAAA;AAAA,QAAA;UAC9EE,YAKEC,aAAA;AAAA,YAJC,UAAU,aAAA,SAAY;AAAA,YACtB,MAAMH,MAAA,IAAA,EAAK;AAAA,YACX,UAAUA,MAAA,QAAA,EAAS;AAAA,YACnB,SAAO;AAAA,UAAA;UAGVC,mBAEO,QAAA;AAAA,YAFA,uBAAQD,MAAA,GAAA,EAAI,KAAK,KAAK,UAAUA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GAChEI,gBAAAJ,MAAA,YAAA,EAAa,aAAA,KAAY,CAAA,IAAI,QAAGI,gBAAGJ,MAAA,YAAA,EAAa,QAAA,SAAS,CAAA,GAAA,CAAA;AAAA,UAG9DE,YAKEC,aAAA;AAAA,YAJC,UAAU,aAAA,SAAgB,QAAA;AAAA,YAC1B,MAAMH,MAAA,IAAA,EAAK;AAAA,YACX,UAAUA,MAAA,QAAA,EAAS;AAAA,YACnB,SAAO;AAAA,UAAA;;QAMJ,MAAM,aAAa,uBAF3BF,mBAKI,KAAA;AAAA;UAJD,uBAAQE,MAAA,GAAA,EAAI,KAAK,KAAK,QAAQA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,QAAA,mBAG1D,YAAA,KAAW,IAAG,MAACI,gBAAG,UAAA,KAAS,IAAG,SAAIA,gBAAGJ,MAAA,YAAA,EAAa,QAAA,YAAY,CAAA,IAAI,aACvE,CAAA;;;;;"}
+{"version":3,"file":"TidePagination.vue.js","sources":["../../src/components/TidePagination.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a pagination component for navigating through pages of content.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidepagination--docs) for TidePagination\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, watchEffect } from 'vue';\n\n  import TideButtonIcon from '@/components/TideButtonIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { PRIORITY } from '@/types/Priority';\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n\n  type Props = {\n    /** Total number of pages available */\n    pageCount: number;\n    /** Number of items per page. When provided, a results summary is shown below the pagination controls. */\n    pageSize?: number;\n    /** Total number of results */\n    totalResults: number;\n  };\n\n  const props = defineProps<Props>();\n\n  const currentIndex = defineModel<number>({ required: true });\n\n  watchEffect(() => {\n    if (props.pageCount < 1) return;\n\n    const clamped = Math.min(Math.max(currentIndex.value, 1), props.pageCount);\n    if (clamped !== currentIndex.value) currentIndex.value = clamped;\n  });\n\n  const resultStart = computed(() => {\n    if (props.pageSize === undefined) return undefined;\n    if (props.totalResults === 0) return formatNumber(0);\n    return formatNumber((currentIndex.value - 1) * props.pageSize + 1);\n  });\n\n  const resultEnd = computed(() => {\n    if (props.pageSize === undefined) return undefined;\n    if (props.totalResults === 0) return formatNumber(0);\n    return formatNumber(Math.min(currentIndex.value * props.pageSize, props.totalResults));\n  });\n\n  const handlePreviousClick = () => {\n    if (currentIndex.value > 1) {\n      currentIndex.value--;\n    }\n  };\n\n  const handleNextClick = () => {\n    if (currentIndex.value < props.pageCount) {\n      currentIndex.value++;\n    }\n  };\n</script>\n\n<template>\n  <section :class=\"['tide-pagination', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.AXIS2.CENTER, CSS.GAP.HALF]\">\n    <div :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]\">\n      <TideButtonIcon\n        :disabled=\"currentIndex <= 1\"\n        :icon=\"ICON.CHEVRON_LEFT\"\n        :priority=\"PRIORITY.QUATERNARY\"\n        @click=\"handlePreviousClick\"\n      />\n\n      <span :class=\"[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]\">\n        {{ formatNumber(currentIndex) }} / {{ formatNumber(pageCount) }}\n      </span>\n\n      <TideButtonIcon\n        :disabled=\"currentIndex >= pageCount\"\n        :icon=\"ICON.CHEVRON_RIGHT\"\n        :priority=\"PRIORITY.QUATERNARY\"\n        @click=\"handleNextClick\"\n      />\n    </div>\n\n    <p\n      :class=\"[CSS.FONT.ROLE.BODY_2, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n      v-if=\"props.pageSize !== undefined\"\n    >\n      {{ resultStart }}–{{ resultEnd }} of {{ formatNumber(totalResults) }} results\n    </p>\n  </section>\n</template>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","TideButtonIcon","_toDisplayString"],"mappings":";;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;;;AAqBf,UAAM,QAAQ;AAEd,UAAM,eAAeA,8BAAsC;AAE3D,gBAAY,MAAM;AAChB,UAAI,MAAM,YAAY,EAAG;AAEzB,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,aAAa,OAAO,CAAC,GAAG,MAAM,SAAS;AACzE,UAAI,YAAY,aAAa,MAAO,cAAa,QAAQ;AAAA,IAC3D,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,UAAI,MAAM,aAAa,OAAW,QAAO;AACzC,UAAI,MAAM,iBAAiB,EAAG,QAAO,aAAa,CAAC;AACnD,aAAO,cAAc,aAAa,QAAQ,KAAK,MAAM,WAAW,CAAC;AAAA,IACnE,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,UAAI,MAAM,aAAa,OAAW,QAAO;AACzC,UAAI,MAAM,iBAAiB,EAAG,QAAO,aAAa,CAAC;AACnD,aAAO,aAAa,KAAK,IAAI,aAAa,QAAQ,MAAM,UAAU,MAAM,YAAY,CAAC;AAAA,IACvF,CAAC;AAED,UAAM,sBAAsB,MAAM;AAChC,UAAI,aAAa,QAAQ,GAAG;AAC1B,qBAAa;AAAA,MACf;AAAA,IACF;AAEA,UAAM,kBAAkB,MAAM;AAC5B,UAAI,aAAa,QAAQ,MAAM,WAAW;AACxC,qBAAa;AAAA,MACf;AAAA,IACF;;0BAIAC,mBA2BU,WAAA;AAAA,QA3BA,OAAKC,eAAA,CAAA,mBAAsBC,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,UAAU,QAAQA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,IAAI,CAAA;AAAA,MAAA;QAC9GC,mBAkBM,OAAA;AAAA,UAlBA,OAAKF,eAAA,CAAGC,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,IAAI,CAAA;AAAA,QAAA;UAC9EE,YAKEC,aAAA;AAAA,YAJC,UAAU,aAAA,SAAY;AAAA,YACtB,MAAMH,MAAA,IAAA,EAAK;AAAA,YACX,UAAUA,MAAA,QAAA,EAAS;AAAA,YACnB,SAAO;AAAA,UAAA;UAGVC,mBAEO,QAAA;AAAA,YAFA,uBAAQD,MAAA,GAAA,EAAI,KAAK,KAAK,kBAAkBA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GACxEI,gBAAAJ,MAAA,YAAA,EAAa,aAAA,KAAY,CAAA,IAAI,QAAGI,gBAAGJ,MAAA,YAAA,EAAa,QAAA,SAAS,CAAA,GAAA,CAAA;AAAA,UAG9DE,YAKEC,aAAA;AAAA,YAJC,UAAU,aAAA,SAAgB,QAAA;AAAA,YAC1B,MAAMH,MAAA,IAAA,EAAK;AAAA,YACX,UAAUA,MAAA,QAAA,EAAS;AAAA,YACnB,SAAO;AAAA,UAAA;;QAMJ,MAAM,aAAa,uBAF3BF,mBAKI,KAAA;AAAA;UAJD,uBAAQE,MAAA,GAAA,EAAI,KAAK,KAAK,QAAQA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,QAAA,mBAG1D,YAAA,KAAW,IAAG,MAACI,gBAAG,UAAA,KAAS,IAAG,SAAIA,gBAAGJ,MAAA,YAAA,EAAa,QAAA,YAAY,CAAA,IAAI,aACvE,CAAA;;;;;"}

package/dist/components/TideRealmLogo.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./TideRealmLogo.vue2.js";
 /* empty css                   */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const TideRealmLogo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dec575c7"]]);
+const TideRealmLogo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a94b060d"]]);
 export {
   TideRealmLogo as default
 };

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

@@ -1 +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;;;;;"}
+{"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  @container tide-responsive-root (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  @container tide-responsive-root (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  @container tide-responsive-root (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  @container tide-responsive-root (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/TideResponsiveRoot.vue.js

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

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

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

package/dist/components/TideResponsiveRoot.vue2.js

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TideResponsiveRoot",
+  props: {
+    element: { default: "div" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.element), { class: "tide-responsive-root" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideResponsiveRoot.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideResponsiveRoot.vue2.js","sources":["../../src/components/TideResponsiveRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  type Props = {\n    element?: keyof HTMLElementTagNameMap;\n  };\n  withDefaults(defineProps<Props>(), {\n    element: 'div',\n  });\n</script>\n\n<template>\n  <component\n    class=\"tide-responsive-root\"\n    :is=\"element\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style scoped>\n  .tide-responsive-root {\n    container: var(--tide-responsive-root);\n  }\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;;;;AAUE,aAAAA,UAAA,GAAAC,YAKYC,wBAHL,QAAA,OAAO,GAAA,EADZ,OAAM,0BAAsB;AAAA,yBAG5B,MAAQ;AAAA,UAARC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;"}

package/dist/components/TideSeoLinks.vue.js

@@ -1,7 +1,7 @@
 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"]]);
+const TideSeoLinks = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5904f65f"]]);
 export {
   TideSeoLinks as default
 };