tide-design-system 2.5.19 → 2.6.0

package/dist/components/TideModal.vue2.js

@@ -0,0 +1,186 @@
+import { defineComponent, ref, useModel, watch, onBeforeMount, onMounted, onBeforeUnmount, openBlock, createBlock, Teleport, unref, createElementVNode, mergeProps, withKeys, withModifiers, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createElementBlock, mergeModels, nextTick } from "vue";
+import _sfc_main$1 from "./TideButtonIcon.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";
+import { initFauxTopLayer, TOP_LAYER_ID, setScrollLock } from "../utilities/viewport.js";
+const _hoisted_1 = ["textContent"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideModal",
+  props: /* @__PURE__ */ mergeModels({
+    beforeClose: { type: Function, default: void 0 },
+    isBackButton: { type: Boolean, default: false },
+    isDismissible: { type: Boolean, default: true },
+    title: { default: void 0 },
+    width: { default: void 0 }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["back"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modalContent = ref();
+    const modalDialog = ref();
+    const isOpen = useModel(__props, "modelValue");
+    const triggerNativeDialogOpen = () => {
+      var _a;
+      (_a = modalDialog.value) == null ? void 0 : _a.showModal();
+      setScrollLock(true);
+    };
+    const triggerNativeDialogClose = () => {
+      var _a;
+      (_a = modalDialog.value) == null ? void 0 : _a.close();
+      setScrollLock(false);
+    };
+    const scrollContentToTop = () => {
+      nextTick(() => {
+        if (!modalContent.value) return;
+        modalContent.value.scrollTop = 0;
+      });
+    };
+    const close = async () => {
+      if (props.beforeClose) {
+        const result = await props.beforeClose();
+        if (result === false) return;
+      }
+      isOpen.value = false;
+    };
+    const handleBackdropClick = () => {
+      if (props.isDismissible) close();
+    };
+    const handleEscapeKeyup = () => {
+      if (props.isDismissible) close();
+    };
+    watch(isOpen, () => {
+      if (!modalDialog.value) return;
+      if (isOpen.value) {
+        triggerNativeDialogOpen();
+        scrollContentToTop();
+      } else {
+        triggerNativeDialogClose();
+      }
+    });
+    onBeforeMount(() => {
+      initFauxTopLayer();
+    });
+    onMounted(() => {
+      if (isOpen.value) {
+        triggerNativeDialogOpen();
+      }
+    });
+    onBeforeUnmount(() => {
+      if (isOpen.value) {
+        isOpen.value = false;
+        triggerNativeDialogClose();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: `#${unref(TOP_LAYER_ID)}`
+      }, [
+        createElementVNode("dialog", mergeProps(_ctx.$attrs, {
+          class: ["tide-modal", unref(CSS).BG.INITIAL, unref(CSS).HEIGHT.FULL, unref(CSS).WIDTH.FULL, unref(CSS).OVERFLOW.XY.HIDDEN],
+          ref_key: "modalDialog",
+          ref: modalDialog,
+          style: { "--modal-width": __props.width },
+          onCancel: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["prevent"])),
+          onClick: withModifiers(handleBackdropClick, ["self"]),
+          onKeyup: withKeys(handleEscapeKeyup, ["escape"]),
+          closedby: "none"
+        }), [
+          createElementVNode("div", {
+            class: normalizeClass([
+              "tide-modal-body",
+              unref(CSS).BG.SURFACE.DEFAULT,
+              unref(CSS).BORDER.RADIUS.ONE,
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).FLEX.DIRECTION.COLUMN,
+              unref(CSS).OVERFLOW.XY.HIDDEN,
+              unref(CSS).POSITION.ABSOLUTE,
+              unref(CSS).POSITIONING.BOTTOM,
+              unref(CSS).SHADOW.TOP,
+              unref(CSS).WIDTH.FULL,
+              unref(CSS).WIDTH.MAX_FULL,
+              unref(CSS).withBreakpoint([unref(CSS).SHADOW.BOTTOM], unref(BREAKPOINT).SM)
+            ])
+          }, [
+            createElementVNode("header", {
+              class: normalizeClass([
+                "tide-modal-header",
+                unref(CSS).AXIS2.CENTER,
+                unref(CSS).BORDER.BOTTOM.ONE,
+                unref(CSS).BORDER.COLOR.LOW,
+                unref(CSS).DISPLAY.FLEX,
+                unref(CSS).GAP.HALF,
+                unref(CSS).ISOLATION.ISOLATE,
+                unref(CSS).PADDING.Y.ONE,
+                unref(CSS).POSITION.RELATIVE,
+                unref(CSS).Z_INDEX.ONE
+              ])
+            }, [
+              __props.isBackButton ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                icon: unref(ICON).CHEVRON_LEFT,
+                priority: unref(PRIORITY).QUATERNARY,
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("back")),
+                "data-test": "tide-modal-back",
+                title: "Back"
+              }, null, 8, ["icon", "priority"])) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: normalizeClass([unref(CSS).FONT.ROLE.HEADLINE_2]),
+                textContent: toDisplayString(__props.title)
+              }, 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]),
+                icon: unref(ICON).CLOSE,
+                priority: unref(PRIORITY).QUATERNARY,
+                onClick: close,
+                "data-test": "tide-modal-close"
+              }, null, 8, ["class", "icon", "priority"])) : createCommentVNode("", true)
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass([
+                "tide-modal-content",
+                unref(CSS).DISPLAY.GRID,
+                unref(CSS).ISOLATION.ISOLATE,
+                unref(CSS).OVERFLOW.X.HIDDEN,
+                unref(CSS).OVERFLOW.Y.AUTO,
+                unref(CSS).PADDING.Y.TWO,
+                unref(CSS).WIDTH.FULL
+              ]),
+              ref_key: "modalContent",
+              ref: modalContent
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 2),
+            _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
+              key: 0,
+              class: normalizeClass([
+                "tide-modal-footer",
+                unref(CSS).AXIS1.END,
+                unref(CSS).DISPLAY.FLEX,
+                unref(CSS).GAP.TWO,
+                unref(CSS).ISOLATION.ISOLATE,
+                unref(CSS).PADDING.Y.ONE,
+                unref(CSS).SHADOW.TOP
+              ])
+            }, [
+              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+            ], 2)) : createCommentVNode("", true)
+          ], 2)
+        ], 16)
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideModal.vue2.js.map

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

@@ -0,0 +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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"}

package/dist/components/TidePagination.vue.js

@@ -0,0 +1,82 @@
+import { defineComponent, useModel, watchEffect, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, toDisplayString, createCommentVNode, mergeModels } from "vue";
+import _sfc_main$1 from "./TideButtonIcon.vue.js";
+import { ICON } from "../types/Icon.js";
+import { PRIORITY } from "../types/Priority.js";
+import { CSS } from "../types/Styles.js";
+import { formatNumber } from "../utilities/format.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TidePagination",
+  props: /* @__PURE__ */ mergeModels({
+    pageCount: {},
+    pageSize: {},
+    totalResults: {}
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const currentIndex = useModel(__props, "modelValue");
+    watchEffect(() => {
+      if (props.pageCount < 1) return;
+      const clamped = Math.min(Math.max(currentIndex.value, 1), props.pageCount);
+      if (clamped !== currentIndex.value) currentIndex.value = clamped;
+    });
+    const resultStart = computed(() => {
+      if (props.pageSize === void 0) return void 0;
+      if (props.totalResults === 0) return formatNumber(0);
+      return formatNumber((currentIndex.value - 1) * props.pageSize + 1);
+    });
+    const resultEnd = computed(() => {
+      if (props.pageSize === void 0) return void 0;
+      if (props.totalResults === 0) return formatNumber(0);
+      return formatNumber(Math.min(currentIndex.value * props.pageSize, props.totalResults));
+    });
+    const handlePreviousClick = () => {
+      if (currentIndex.value > 1) {
+        currentIndex.value--;
+      }
+    };
+    const handleNextClick = () => {
+      if (currentIndex.value < props.pageCount) {
+        currentIndex.value++;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", {
+        class: normalizeClass(["tide-pagination", unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.HALF])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS1.CENTER, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.HALF])
+        }, [
+          createVNode(_sfc_main$1, {
+            disabled: currentIndex.value <= 1,
+            icon: unref(ICON).CHEVRON_LEFT,
+            priority: unref(PRIORITY).QUATERNARY,
+            onClick: handlePreviousClick
+          }, null, 8, ["disabled", "icon", "priority"]),
+          createElementVNode("span", {
+            class: normalizeClass([unref(CSS).FONT.ROLE.BUTTON_1, 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,
+            icon: unref(ICON).CHEVRON_RIGHT,
+            priority: unref(PRIORITY).QUATERNARY,
+            onClick: handleNextClick
+          }, null, 8, ["disabled", "icon", "priority"])
+        ], 2),
+        props.pageSize !== void 0 ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          class: normalizeClass([unref(CSS).FONT.ROLE.BODY_2, unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+        }, toDisplayString(resultStart.value) + "–" + toDisplayString(resultEnd.value) + " of " + toDisplayString(unref(formatNumber)(__props.totalResults)) + " results ", 3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TidePagination.vue.js.map

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

@@ -0,0 +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;;;;;"}

package/dist/components/TidePagination.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./TidePagination.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TidePagination.vue2.js.map

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

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

package/dist/components/TidePopover.vue.js

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

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

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

package/dist/components/TidePopover.vue2.js

@@ -0,0 +1,156 @@
+import { defineComponent, ref, computed, watch, watchEffect, onBeforeMount, onMounted, onUnmounted, openBlock, createBlock, Teleport, unref, createVNode, Transition, withCtx, withDirectives, createElementVNode, mergeProps, renderSlot, vShow } from "vue";
+import { autoPlacement, offset, shift, useFloating, autoUpdate } from "@floating-ui/vue";
+import { CSS } from "../types/Styles.js";
+import { isClickOutside } from "../utilities/event.js";
+import { initFauxTopLayer, TOP_LAYER_ID } from "../utilities/viewport.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TidePopover",
+  props: {
+    anchorId: {},
+    offset: { default: 16 }
+  },
+  setup(__props) {
+    const props = __props;
+    const anchor = ref(null);
+    const floating = ref(null);
+    const root = ref(null);
+    const isHovered = ref(false);
+    const isToggledOpen = ref(false);
+    const isTouchDevice = ref(false);
+    const middleware = ref([autoPlacement(), offset({ mainAxis: props.offset }), shift({ padding: 16 })]);
+    const isShowPopover = computed(() => isHovered.value || isToggledOpen.value);
+    const { floatingStyles } = useFloating(anchor, floating, {
+      middleware,
+      strategy: "fixed",
+      whileElementsMounted: autoUpdate
+    });
+    const handlePermanentOpenBodyClick = (e) => {
+      if (!anchor.value || !floating.value) return;
+      if (isClickOutside(e, [anchor.value, floating.value])) {
+        isToggledOpen.value = false;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
+    const handleAnchorElementMouseOver = () => {
+      if (isTouchDevice.value) return;
+      isHovered.value = true;
+    };
+    const handleAnchorElementMouseLeave = () => {
+      if (isTouchDevice.value) return;
+      isHovered.value = false;
+    };
+    const handleAnchorElementTouchStart = () => {
+      isTouchDevice.value = true;
+    };
+    const handleAnchorElementClick = (e) => {
+      e.preventDefault();
+      if (isToggledOpen.value) {
+        isToggledOpen.value = false;
+        isHovered.value = false;
+      } else {
+        isToggledOpen.value = true;
+      }
+    };
+    const addListenersToAnchorElement = () => {
+      if (!anchor.value) return null;
+      anchor.value.addEventListener("touchstart", handleAnchorElementTouchStart, { passive: true });
+      anchor.value.addEventListener("mouseover", handleAnchorElementMouseOver);
+      anchor.value.addEventListener("mouseleave", handleAnchorElementMouseLeave);
+      anchor.value.addEventListener("click", handleAnchorElementClick);
+    };
+    const removeListenersFromAnchorElement = () => {
+      if (!anchor.value) return null;
+      anchor.value.removeEventListener("touchstart", handleAnchorElementTouchStart);
+      anchor.value.removeEventListener("mouseover", handleAnchorElementMouseOver);
+      anchor.value.removeEventListener("mouseleave", handleAnchorElementMouseLeave);
+      anchor.value.removeEventListener("click", handleAnchorElementClick);
+    };
+    const handlePermanentOpenBodyKeydown = (e) => {
+      if (e.key === "Escape") {
+        isToggledOpen.value = false;
+      }
+    };
+    const addOpenListenersToRoot = () => {
+      if (!root.value) return;
+      root.value.addEventListener("click", handlePermanentOpenBodyClick, true);
+      root.value.addEventListener("keydown", handlePermanentOpenBodyKeydown);
+    };
+    const removeOpenListenersFromRoot = () => {
+      if (!root.value) return;
+      root.value.removeEventListener("click", handlePermanentOpenBodyClick, true);
+      root.value.removeEventListener("keydown", handlePermanentOpenBodyKeydown);
+    };
+    const updateAnchorElement = () => {
+      anchor.value = document.getElementById(props.anchorId);
+    };
+    watch(
+      () => isToggledOpen.value,
+      (newValue) => {
+        if (newValue) {
+          addOpenListenersToRoot();
+        } else {
+          removeOpenListenersFromRoot();
+        }
+      }
+    );
+    watch(
+      () => props.anchorId,
+      () => {
+        removeListenersFromAnchorElement();
+        updateAnchorElement();
+        addListenersToAnchorElement();
+      }
+    );
+    watchEffect(() => {
+      middleware.value = [autoPlacement(), offset({ mainAxis: props.offset }), shift({ padding: 16 })];
+    });
+    onBeforeMount(() => {
+      initFauxTopLayer();
+    });
+    onMounted(() => {
+      updateAnchorElement();
+      root.value = document.documentElement;
+      addListenersToAnchorElement();
+    });
+    onUnmounted(() => {
+      removeListenersFromAnchorElement();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, {
+        to: `#${unref(TOP_LAYER_ID)}`
+      }, [
+        createVNode(Transition, null, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, {
+              class: [
+                "tide-popover",
+                unref(CSS).BG.SURFACE.DEFAULT,
+                unref(CSS).BORDER.COLOR.LOW,
+                unref(CSS).BORDER.FULL.ONE,
+                unref(CSS).BORDER.RADIUS.HALF,
+                unref(CSS).FONT.ROLE.BODY_2,
+                unref(CSS).PADDING.FULL.ONE,
+                unref(CSS).SHADOW.BOTTOM
+              ],
+              ref_key: "floating",
+              ref: floating,
+              style: { ...unref(floatingStyles) }
+            }), [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 16), [
+              [vShow, isShowPopover.value]
+            ])
+          ]),
+          _: 3
+        })
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TidePopover.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TidePopover.vue2.js","sources":["../../src/components/TidePopover.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a popover intended to be used for displaying additional information.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidepopover--docs) for TidePopover\n   */\n  export default { inheritAttrs: false };\n</script>\n\n<script lang=\"ts\" setup>\n  import { autoPlacement, autoUpdate, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue';\n  import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';\n\n  import { CSS } from '@/types/Styles';\n  import { isClickOutside } from '@/utilities/event';\n  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';\n\n  import type { Ref } from 'vue';\n\n  type Props = {\n    /** Determines the HTML node over which the Popover will appear */\n    anchorId: string;\n\n    /** Determines spacing between Popover and anchor node */\n    offset?: number;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    offset: 16,\n  });\n\n  const anchor: Ref<HTMLElement | null> = ref(null);\n  const floating: Ref<HTMLElement | null> = ref(null);\n  const root: Ref<HTMLElement | null> = ref(null);\n  const isHovered = ref(false);\n  const isToggledOpen = ref(false);\n  const isTouchDevice = ref(false);\n  const middleware = ref([autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })]);\n\n  const isShowPopover = computed(() => isHovered.value || isToggledOpen.value);\n\n  const { floatingStyles } = useFloating(anchor, floating, {\n    middleware,\n    strategy: 'fixed',\n    whileElementsMounted: autoUpdate,\n  });\n\n  const handlePermanentOpenBodyClick = (e: MouseEvent) => {\n    if (!anchor.value || !floating.value) return;\n    if (isClickOutside(e, [anchor.value, floating.value])) {\n      isToggledOpen.value = false;\n      e.preventDefault();\n      e.stopImmediatePropagation();\n    }\n  };\n\n  const handleAnchorElementMouseOver = () => {\n    if (isTouchDevice.value) return;\n    isHovered.value = true;\n  };\n\n  const handleAnchorElementMouseLeave = () => {\n    if (isTouchDevice.value) return;\n    isHovered.value = false;\n  };\n\n  const handleAnchorElementTouchStart = () => {\n    isTouchDevice.value = true;\n  };\n\n  const handleAnchorElementClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (isToggledOpen.value) {\n      isToggledOpen.value = false;\n      isHovered.value = false;\n    } else {\n      isToggledOpen.value = true;\n    }\n  };\n\n  const addListenersToAnchorElement = () => {\n    if (!anchor.value) return null;\n    anchor.value.addEventListener('touchstart', handleAnchorElementTouchStart, { passive: true });\n    anchor.value.addEventListener('mouseover', handleAnchorElementMouseOver);\n    anchor.value.addEventListener('mouseleave', handleAnchorElementMouseLeave);\n    anchor.value.addEventListener('click', handleAnchorElementClick);\n  };\n\n  const removeListenersFromAnchorElement = () => {\n    if (!anchor.value) return null;\n    anchor.value.removeEventListener('touchstart', handleAnchorElementTouchStart);\n    anchor.value.removeEventListener('mouseover', handleAnchorElementMouseOver);\n    anchor.value.removeEventListener('mouseleave', handleAnchorElementMouseLeave);\n    anchor.value.removeEventListener('click', handleAnchorElementClick);\n  };\n\n  const handlePermanentOpenBodyKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      isToggledOpen.value = false;\n    }\n  };\n\n  const addOpenListenersToRoot = () => {\n    if (!root.value) return;\n    root.value.addEventListener('click', handlePermanentOpenBodyClick, true);\n    root.value.addEventListener('keydown', handlePermanentOpenBodyKeydown);\n  };\n\n  const removeOpenListenersFromRoot = () => {\n    if (!root.value) return;\n    root.value.removeEventListener('click', handlePermanentOpenBodyClick, true);\n    root.value.removeEventListener('keydown', handlePermanentOpenBodyKeydown);\n  };\n\n  const updateAnchorElement = () => {\n    anchor.value = document.getElementById(props.anchorId);\n  };\n\n  watch(\n    () => isToggledOpen.value,\n    (newValue) => {\n      if (newValue) {\n        addOpenListenersToRoot();\n      } else {\n        removeOpenListenersFromRoot();\n      }\n    }\n  );\n\n  watch(\n    () => props.anchorId,\n    () => {\n      removeListenersFromAnchorElement();\n      updateAnchorElement();\n      addListenersToAnchorElement();\n    }\n  );\n\n  watchEffect(() => {\n    middleware.value = [autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })];\n  });\n\n  onBeforeMount(() => {\n    initFauxTopLayer();\n  });\n\n  onMounted(() => {\n    updateAnchorElement();\n    root.value = document.documentElement;\n    addListenersToAnchorElement();\n  });\n\n  onUnmounted(() => {\n    removeListenersFromAnchorElement();\n  });\n</script>\n\n<template>\n  <Teleport :to=\"`#${TOP_LAYER_ID}`\">\n    <Transition>\n      <div\n        v-bind=\"$attrs\"\n        :class=\"[\n          'tide-popover',\n          CSS.BG.SURFACE.DEFAULT,\n          CSS.BORDER.COLOR.LOW,\n          CSS.BORDER.FULL.ONE,\n          CSS.BORDER.RADIUS.HALF,\n          CSS.FONT.ROLE.BODY_2,\n          CSS.PADDING.FULL.ONE,\n          CSS.SHADOW.BOTTOM,\n        ]\"\n        ref=\"floating\"\n        :style=\"{ ...floatingStyles }\"\n        v-show=\"isShowPopover\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n  .tide-popover {\n    max-width: 256px;\n  }\n  .v-enter-from,\n  .v-leave-to {\n    opacity: 0;\n  }\n  .v-enter-active,\n  .v-leave-active {\n    transition: opacity var(--tide-animate);\n  }\n  .v-enter-to,\n  .v-leave-from {\n    opacity: 1;\n  }\n</style>\n"],"names":["offsetMiddleware","_createBlock","_Teleport","_unref","_createVNode","_Transition","_createElementVNode","_mergeProps","_renderSlot"],"mappings":"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"}

package/dist/components/TideRating.vue.js

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

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

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

package/dist/components/TideRating.vue2.js

@@ -0,0 +1,75 @@
+import { defineComponent, useModel, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, mergeModels } from "vue";
+import { CSS } from "../types/Styles.js";
+const _hoisted_1 = ["onClick"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideRating",
+  props: /* @__PURE__ */ mergeModels({
+    description: { default: void 0 },
+    maxRating: { default: 10 },
+    showRating: { type: Boolean, default: false },
+    title: { default: void 0 }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const ratingValue = useModel(__props, "modelValue");
+    const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));
+    const handleClick = (segment) => {
+      ratingValue.value = segment;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tide-rating", unref(CSS).WIDTH.FULL])
+      }, [
+        createElementVNode("section", {
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS2.CENTER, unref(CSS).AXIS1.BETWEEN, unref(CSS).PADDING.BOTTOM.HALF])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_2])
+          }, toDisplayString(props.title), 3),
+          props.showRating ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_3, unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+          }, toDisplayString(ratingValue.value) + "/" + toDisplayString(props.maxRating), 3)) : createCommentVNode("", true)
+        ], 2),
+        props.description ? (openBlock(), createElementBlock("section", {
+          key: 0,
+          class: normalizeClass([unref(CSS).FONT.ROLE.BODY_2, unref(CSS).PADDING.BOTTOM.ONE, unref(CSS).OVERFLOW.XY.HIDDEN, unref(CSS).ELLIPSIS])
+        }, toDisplayString(props.description), 3)) : createCommentVNode("", true),
+        createElementVNode("section", {
+          class: normalizeClass(["tide-rating-bar", unref(CSS).DISPLAY.FLEX, unref(CSS).GAP.QUARTER, unref(CSS).FLEX.GROW.ON, unref(CSS).FLEX.SHRINK.ON])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(segments.value, (segment) => {
+            return openBlock(), createElementBlock("button", {
+              class: normalizeClass([
+                "tide-rating-segment",
+                unref(CSS).BG.SURFACE.VARIANT,
+                unref(CSS).POSITION.RELATIVE,
+                unref(CSS).OVERFLOW.XY.HIDDEN,
+                unref(CSS).FLEX.GROW.ON,
+                unref(CSS).FLEX.SHRINK.ON,
+                unref(CSS).FLEX.BASIS.ZERO,
+                unref(CSS).BORDER.FULL.ZERO,
+                segment === 1 && ["tide-rating-segment-first"],
+                segment === segments.value.length && ["tide-rating-segment-last"],
+                segment <= ratingValue.value && [unref(CSS).BG.SURFACE.GRADIENT]
+              ]),
+              key: segment,
+              onClick: ($event) => handleClick(segment),
+              type: "button"
+            }, null, 10, _hoisted_1);
+          }), 128))
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideRating.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideRating.vue2.js","sources":["../../src/components/TideRating.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a rating component intended to be used for displaying and selecting a rating.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tiderating--docs) for TideRating\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Determines the text displayed below the title */\n    description?: string;\n\n    /** Maximum rating value / Number of segments */\n    maxRating?: number;\n\n    /** Determines whether to display the current rating value */\n    showRating?: boolean;\n\n    /** Determines the title text displayed above the rating component */\n    title?: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    description: undefined,\n    maxRating: 10,\n    showRating: false,\n    title: undefined,\n  });\n\n  const ratingValue = defineModel<number>({ required: true });\n\n  const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));\n\n  const handleClick = (segment: number) => {\n    ratingValue.value = segment;\n  };\n</script>\n\n<template>\n  <div :class=\"['tide-rating', CSS.WIDTH.FULL]\">\n    <section :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.AXIS1.BETWEEN, CSS.PADDING.BOTTOM.HALF]\">\n      <div :class=\"[CSS.FONT.ROLE.LABEL_2]\">\n        {{ props.title }}\n      </div>\n      <div\n        :class=\"[CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        v-if=\"props.showRating\"\n      >\n        {{ ratingValue }}/{{ props.maxRating }}\n      </div>\n    </section>\n    <section\n      :class=\"[CSS.FONT.ROLE.BODY_2, CSS.PADDING.BOTTOM.ONE, CSS.OVERFLOW.XY.HIDDEN, CSS.ELLIPSIS]\"\n      v-if=\"props.description\"\n    >\n      {{ props.description }}\n    </section>\n\n    <section :class=\"['tide-rating-bar', CSS.DISPLAY.FLEX, CSS.GAP.QUARTER, CSS.FLEX.GROW.ON, CSS.FLEX.SHRINK.ON]\">\n      <button\n        :class=\"[\n          'tide-rating-segment',\n          CSS.BG.SURFACE.VARIANT,\n          CSS.POSITION.RELATIVE,\n          CSS.OVERFLOW.XY.HIDDEN,\n          CSS.FLEX.GROW.ON,\n          CSS.FLEX.SHRINK.ON,\n          CSS.FLEX.BASIS.ZERO,\n          CSS.BORDER.FULL.ZERO,\n          segment === 1 && ['tide-rating-segment-first'],\n          segment === segments.length && ['tide-rating-segment-last'],\n          segment <= ratingValue && [CSS.BG.SURFACE.GRADIENT],\n        ]\"\n        :key=\"segment\"\n        @click=\"handleClick(segment)\"\n        type=\"button\"\n        v-for=\"segment in segments\"\n      />\n    </section>\n  </div>\n</template>\n\n<style scoped>\n  .tide-rating-bar {\n    height: 28px;\n  }\n\n  .tide-rating-segment {\n    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);\n  }\n\n  .tide-rating-segment-first {\n    border-top-left-radius: 9999px;\n    border-bottom-left-radius: 9999px;\n    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);\n  }\n\n  .tide-rating-segment-last {\n    border-top-right-radius: 9999px;\n    border-bottom-right-radius: 9999px;\n    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_Fragment","_renderList"],"mappings":";;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;;;;AAsBf,UAAM,QAAQ;AAOd,UAAM,cAAcA,8BAAsC;AAE1D,UAAM,WAAW,SAAS,MAAM,MAAM,KAAK,EAAE,QAAQ,MAAM,UAAA,GAAa,CAAC,GAAG,UAAU,QAAQ,CAAC,CAAC;AAEhG,UAAM,cAAc,CAAC,YAAoB;AACvC,kBAAY,QAAQ;AAAA,IACtB;;0BAIAC,mBAwCM,OAAA;AAAA,QAxCA,OAAKC,eAAA,CAAA,eAAkBC,MAAA,GAAA,EAAI,MAAM,IAAI,CAAA;AAAA,MAAA;QACzCC,mBAUU,WAAA;AAAA,UAVA,OAAKF,eAAA,CAAGC,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,MAAM,SAASA,MAAA,GAAA,EAAI,QAAQ,OAAO,IAAI,CAAA;AAAA,QAAA;UAC9FC,mBAEM,OAAA;AAAA,YAFA,uBAAQD,MAAA,GAAA,EAAI,KAAK,KAAK,OAAO,CAAA;AAAA,UAAA,GAC9BE,gBAAA,MAAM,KAAK,GAAA,CAAA;AAAA,UAIR,MAAM,2BAFdJ,mBAKM,OAAA;AAAA;YAJH,uBAAQE,MAAA,GAAA,EAAI,KAAK,KAAK,SAASA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GAG3DE,gBAAA,YAAA,KAAW,IAAG,MAACA,gBAAG,MAAM,SAAS,GAAA,CAAA;;QAKhC,MAAM,4BAFdJ,mBAKU,WAAA;AAAA;UAJP,OAAKC,eAAA,CAAGC,MAAA,GAAA,EAAI,KAAK,KAAK,QAAQA,MAAA,GAAA,EAAI,QAAQ,OAAO,KAAKA,MAAA,GAAA,EAAI,SAAS,GAAG,QAAQA,MAAA,GAAA,EAAI,QAAQ,CAAA;AAAA,QAAA,GAGxFE,gBAAA,MAAM,WAAW,GAAA,CAAA;QAGtBD,mBAoBU,WAAA;AAAA,UApBA,OAAKF,eAAA,CAAA,mBAAsBC,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,IAAI,SAASA,MAAA,GAAA,EAAI,KAAK,KAAK,IAAIA,MAAA,GAAA,EAAI,KAAK,OAAO,EAAE,CAAA;AAAA,QAAA;4BAC1GF,mBAkBEK,UAAA,MAAAC,WADkB,SAAA,OAAQ,CAAnB,YAAO;gCAjBhBN,mBAkBE,UAAA;AAAA,cAjBC,OAAKC,eAAA;AAAA;gBAA+CC,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,gBAAmBA,MAAA,GAAA,EAAI,SAAS;AAAA,gBAAoBA,MAAA,GAAA,EAAI,SAAS,GAAG;AAAA,gBAAkBA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,gBAAcA,MAAA,GAAA,EAAI,KAAK,OAAO;AAAA,gBAAcA,MAAA,GAAA,EAAI,KAAK,MAAM;AAAA,gBAAgBA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,gBAAgB,YAAO,KAAA,CAAA,2BAAA;AAAA,gBAAmD,YAAY,SAAA,MAAS,UAAM,CAAA,0BAAA;AAAA,gBAA4C,WAAW,qBAAW,CAAKA,MAAA,GAAA,EAAI,GAAG,QAAQ,QAAQ;AAAA,cAAA;cAarc,KAAK;AAAA,cACL,SAAK,CAAA,WAAE,YAAY,OAAO;AAAA,cAC3B,MAAK;AAAA,YAAA;;;;;;;"}

package/dist/components/TideRealmLogo.vue.js

@@ -0,0 +1,8 @@
+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"]]);
+export {
+  TideRealmLogo as default
+};
+//# sourceMappingURL=TideRealmLogo.vue.js.map

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

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