tide-design-system 2.5.19 → 2.6.0

package/dist/components/TideCarousel.vue2.js

@@ -0,0 +1,359 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, createVNode, renderSlot, createElementVNode, normalizeStyle, Fragment, renderList } 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";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideCarousel",
+  props: {
+    hasDots: { type: Boolean, default: void 0 },
+    isFloating: { type: Boolean, default: false },
+    isHeadline1: { type: Boolean, default: false },
+    isHideawayButtons: { type: Boolean, default: true },
+    isScrollByPage: { type: Boolean, default: true },
+    maxDots: { default: 5 },
+    subtitle: { default: void 0 },
+    title: { default: void 0 }
+  },
+  emits: ["slidesAddedToView"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const carouselRef = ref(null);
+    const containerRef = ref(null);
+    const contentWidth = ref(0);
+    const currentPageIndex = ref(0);
+    const dotsRef = ref(null);
+    const frameWidth = ref(0);
+    const isFirstSlide = ref(true);
+    const isLastSlide = ref(false);
+    const showButtons = ref(true);
+    const slideObserver = ref(null);
+    const slides = ref([]);
+    const slidesInView = ref([]);
+    const slotObserver = ref(null);
+    const touchStart = ref(void 0);
+    const slidesInViewCount = ref(1);
+    const currentPage = computed(() => currentPageIndex.value + 1);
+    const dotContainerWidth = computed(() => dotCountVisible.value * dotWidth + (dotCountVisible.value - 1) * dotGap);
+    const dotCountVisible = computed(() => props.maxDots > totalPages.value ? totalPages.value : props.maxDots);
+    const totalPages = computed(() => {
+      if (!slides.value.length) return 0;
+      if (!props.isScrollByPage) return slides.value.length;
+      const quotient = Math.floor(slides.value.length / slidesInViewCount.value);
+      const remainder = slides.value.length % slidesInViewCount.value;
+      return remainder ? quotient + 1 : quotient;
+    });
+    const dotGap = 8;
+    const dotWidth = 8;
+    let scrollTimeout;
+    const getDotClass = (dotIndex) => {
+      let className = "";
+      if (dotIndex === currentPageIndex.value) className = "tide-carousel-dot-active";
+      if (Math.abs(currentPageIndex.value - dotIndex) === 1) className = "tide-carousel-dot-neighbor";
+      return className;
+    };
+    const getIsElementWithinContainer = (element, container) => {
+      const containerRect = container.getBoundingClientRect();
+      const containerRight = containerRect.left + containerRect.width;
+      const elementRect = element.getBoundingClientRect();
+      const elementRight = elementRect.left + elementRect.width;
+      return elementRight <= containerRight && elementRect.left >= containerRect.left;
+    };
+    const handleTouchEnd = (event) => {
+      if (!touchStart.value) return;
+      const touchEnd = event.changedTouches[0];
+      const deltaX = touchStart.value.clientX - touchEnd.clientX;
+      const deltaY = touchEnd.clientY - touchStart.value.clientY;
+      if (Math.abs(deltaX) > Math.abs(deltaY)) scrollByDelta(deltaX);
+    };
+    const handleTouchStart = (event) => {
+      touchStart.value = event.touches[0];
+    };
+    const handleWheel = (event) => {
+      const isShiftKeyDown = event.shiftKey;
+      const isWheel = Math.abs(event.deltaY) >= 80;
+      if (isWheel && !isShiftKeyDown) return;
+      if (event.shiftKey) event.preventDefault();
+      clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(() => {
+        var _a;
+        if (isWheel) {
+          scrollByDelta(event.deltaY);
+        } else {
+          const offset = ((_a = slides.value[slidesInView.value[0]]) == null ? void 0 : _a.offsetLeft) || 0;
+          scrollToOffset(offset);
+        }
+      }, 100);
+    };
+    const measureDom = () => {
+      if (!containerRef.value) return;
+      contentWidth.value = containerRef.value.scrollWidth;
+      frameWidth.value = containerRef.value.clientWidth;
+      showButtons.value = contentWidth.value > frameWidth.value;
+      slidesInViewCount.value = slides.value.filter(
+        (slide) => getIsElementWithinContainer(slide, containerRef.value)
+      ).length;
+    };
+    const observeSlides = () => {
+      const options = {
+        root: carouselRef == null ? void 0 : carouselRef.value,
+        rootMargin: "0px 1px 0px 0px",
+        threshold: 1
+      };
+      slideObserver.value = new IntersectionObserver((entries) => {
+        let slidesAddedToView = [];
+        entries.forEach((entry) => {
+          const slideIndex = slides.value.indexOf(entry.target);
+          if (entry.isIntersecting) {
+            slidesAddedToView.push(slideIndex);
+            slidesInView.value.push(slideIndex);
+          } else {
+            slidesInView.value = slidesInView.value.filter((slide) => slide !== slideIndex);
+          }
+          slidesInView.value.sort((a, b) => a - b);
+        });
+        isFirstSlide.value = slidesInView.value.includes(0);
+        isLastSlide.value = slidesInView.value.includes(slides.value.length - 1);
+        if (slidesAddedToView.length > 0) emit("slidesAddedToView", slidesAddedToView);
+      }, options);
+      slides.value.forEach((child) => {
+        if (slideObserver.value) slideObserver.value.observe(child);
+      });
+    };
+    const observeSlot = () => {
+      const observerCallback = () => {
+        if (containerRef.value === null) return;
+        slides.value = Array.from(containerRef.value.children);
+        observeSlides();
+      };
+      slotObserver.value = new MutationObserver(observerCallback);
+      if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
+    };
+    const scrollByDelta = (delta) => {
+      const isScrollingLeft = delta < 0;
+      if (isScrollingLeft) {
+        props.isScrollByPage ? showPreviousPage() : showPreviousSlide();
+      } else {
+        props.isScrollByPage ? showNextPage() : showNextSlide();
+      }
+    };
+    const scrollToOffset = (target) => {
+      if (containerRef.value === null) return;
+      const isScrollingLeft = target <= containerRef.value.scrollLeft;
+      currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;
+      containerRef.value.scrollTo({
+        behavior: "smooth",
+        left: target
+      });
+      updateDots(isScrollingLeft);
+    };
+    const showNextPage = () => {
+      var _a;
+      if (slidesInView.value.length === 0 || isLastSlide.value) return;
+      const nextSlide = slidesInView.value[slidesInView.value.length - 1] + 1;
+      const offset = (_a = slides.value[nextSlide]) == null ? void 0 : _a.offsetLeft;
+      scrollToOffset(offset);
+    };
+    const showPreviousPage = () => {
+      var _a;
+      if (slidesInView.value.length === 0 || isFirstSlide.value) return;
+      const previousSlide = slidesInView.value[0] - slidesInView.value.length;
+      const offset = ((_a = slides.value[previousSlide]) == null ? void 0 : _a.offsetLeft) || 0;
+      scrollToOffset(offset);
+    };
+    const showNextSlide = () => {
+      if (slidesInView.value.length === 0) return;
+      const nextSlide = slidesInView.value.length > 1 ? slidesInView.value[1] : slidesInView.value[0] + 1;
+      scrollToOffset(slides.value[nextSlide].offsetLeft);
+    };
+    const showPreviousSlide = () => {
+      if (slidesInView.value.length === 0) return;
+      const previousSlide = slidesInView.value[0] - 1;
+      scrollToOffset(slides.value[previousSlide].offsetLeft);
+    };
+    const updateDots = (isScrollingLeft) => {
+      if (!dotsRef.value || dotCountVisible.value >= totalPages.value) return;
+      const isOddDotCount = dotCountVisible.value % 2 !== 0;
+      const centerDot = isOddDotCount || isScrollingLeft ? Math.floor(dotCountVisible.value / 2) + 1 : Math.floor(dotCountVisible.value / 2);
+      dotsRef.value.scrollTo({
+        behavior: "smooth",
+        left: currentPage.value < centerDot ? 0 : (currentPage.value - centerDot) * (dotWidth + dotGap)
+      });
+    };
+    onMounted(() => {
+      if (containerRef.value === null) return;
+      slides.value = Array.from(containerRef.value.children);
+      measureDom();
+      observeSlides();
+      observeSlot();
+      if (window) {
+        window.addEventListener("resize", measureDom);
+      }
+    });
+    onUnmounted(() => {
+      var _a, _b;
+      (_a = slideObserver.value) == null ? void 0 : _a.disconnect();
+      (_b = slotObserver.value) == null ? void 0 : _b.disconnect();
+      window.removeEventListener("resize", measureDom);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", {
+        class: normalizeClass([
+          "tide-carousel",
+          unref(CSS).POSITION.RELATIVE,
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).FLEX.DIRECTION.COLUMN,
+          unref(CSS).GAP.ONE,
+          unref(CSS).WIDTH.MAX_FULL
+        ]),
+        ref_key: "carouselRef",
+        ref: carouselRef
+      }, [
+        !props.isFloating && showButtons.value || props.title ? (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])
+        }, [
+          props.title ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.WRAP, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.ONE])
+          }, [
+            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)) : createCommentVNode("", true),
+          !props.isFloating && showButtons.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.ONE])
+          }, [
+            createVNode(_sfc_main$1, {
+              disabled: isFirstSlide.value,
+              icon: unref(ICON).CHEVRON_LEFT,
+              priority: unref(PRIORITY).TERTIARY,
+              onClick: _cache[0] || (_cache[0] = ($event) => __props.isScrollByPage ? showPreviousPage() : showPreviousSlide())
+            }, null, 8, ["disabled", "icon", "priority"]),
+            createVNode(_sfc_main$1, {
+              disabled: isLastSlide.value,
+              icon: unref(ICON).CHEVRON_RIGHT,
+              priority: unref(PRIORITY).TERTIARY,
+              onClick: _cache[1] || (_cache[1] = ($event) => __props.isScrollByPage ? showNextPage() : showNextSlide())
+            }, null, 8, ["disabled", "icon", "priority"])
+          ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "misc", {}, void 0, true),
+        createElementVNode("div", {
+          class: normalizeClass([unref(CSS).POSITION.RELATIVE, unref(CSS).DISPLAY.FLEX])
+        }, [
+          createElementVNode("ul", {
+            class: normalizeClass([
+              "tide-carousel-container",
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).GAP.ONE,
+              unref(CSS).LIST_BULLETS.OFF,
+              unref(CSS).OVERFLOW.X.SCROLL,
+              unref(CSS).SCROLLBAR.OFF,
+              unref(CSS).SNAP.ON
+            ]),
+            ref_key: "containerRef",
+            ref: containerRef,
+            onTouchend: handleTouchEnd,
+            onTouchstartPassive: handleTouchStart,
+            onWheel: handleWheel
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ], 34),
+          __props.hasDots && totalPages.value > 1 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([
+              unref(CSS).POSITION.ABSOLUTE,
+              unref(CSS).POSITIONING.BOTTOM,
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).AXIS1.CENTER,
+              unref(CSS).MARGIN.BOTTOM.HALF,
+              unref(CSS).WIDTH.FULL,
+              unref(CSS).POINTER_EVENTS.OFF
+            ])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(["tide-carousel-dots-container"]),
+              style: normalizeStyle({
+                width: `${dotContainerWidth.value}px`
+              })
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([
+                  "tide-carousel-dots",
+                  unref(CSS).DISPLAY.FLEX,
+                  unref(CSS).AXIS1.START,
+                  unref(CSS).AXIS2.CENTER,
+                  unref(CSS).GAP.HALF,
+                  unref(CSS).OVERFLOW.X.SCROLL,
+                  unref(CSS).POINTER_EVENTS.OFF,
+                  unref(CSS).SCROLLBAR.OFF
+                ]),
+                ref_key: "dotsRef",
+                ref: dotsRef
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(totalPages.value, (_, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    class: normalizeClass([
+                      "tide-carousel-dot",
+                      unref(CSS).FLEX.SHRINK.OFF,
+                      unref(CSS).HEIGHT.ZERO,
+                      unref(CSS).WIDTH.ZERO,
+                      unref(CSS).BORDER.RADIUS.FULL,
+                      unref(CSS).BG.SURFACE.DEFAULT,
+                      getDotClass(index)
+                    ]),
+                    key: index
+                  }, null, 2);
+                }), 128))
+              ], 2)
+            ], 4)
+          ], 2)) : createCommentVNode("", true),
+          __props.isFloating && showButtons.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass([
+              "tide-carousel-button-overlay",
+              unref(CSS).POSITION.ABSOLUTE,
+              unref(CSS).POSITIONING.TOP,
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).AXIS1.BETWEEN,
+              unref(CSS).AXIS2.CENTER,
+              unref(CSS).WIDTH.FULL,
+              unref(CSS).HEIGHT.FULL,
+              unref(CSS).POINTER_EVENTS.OFF,
+              props.isHideawayButtons ? "hideaway" : ""
+            ])
+          }, [
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.LEFT.ONE, unref(CSS).POINTER_EVENTS.ON]),
+              disabled: isFirstSlide.value,
+              icon: unref(ICON).CHEVRON_LEFT,
+              priority: unref(PRIORITY).QUATERNARY,
+              onClick: _cache[2] || (_cache[2] = ($event) => __props.isScrollByPage ? showPreviousPage() : showPreviousSlide())
+            }, null, 8, ["class", "disabled", "icon", "priority"]),
+            createVNode(_sfc_main$1, {
+              class: normalizeClass([unref(CSS).MARGIN.RIGHT.ONE, unref(CSS).POINTER_EVENTS.ON]),
+              disabled: isLastSlide.value,
+              icon: unref(ICON).CHEVRON_RIGHT,
+              priority: unref(PRIORITY).QUATERNARY,
+              onClick: _cache[3] || (_cache[3] = ($event) => __props.isScrollByPage ? showNextPage() : showNextSlide())
+            }, null, 8, ["class", "disabled", "icon", "priority"])
+          ], 2)) : createCommentVNode("", true)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideCarousel.vue2.js.map

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

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

package/dist/components/TideChipAction.vue.js

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

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

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

package/dist/components/TideChipAction.vue2.js

@@ -0,0 +1,58 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString } from "vue";
+import _sfc_main$1 from "./InternalBaseLink.vue.js";
+import _sfc_main$2 from "./TideIcon.vue.js";
+/* empty css              */
+import { ELEMENT } from "../types/Element.js";
+import { ICON } from "../types/Icon.js";
+import { CSS } from "../types/Styles.js";
+import { TARGET } from "../types/Target.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideChipAction",
+  props: {
+    element: { default: ELEMENT.LINK },
+    href: { default: void 0 },
+    iconLeading: { default: ICON.SEARCH },
+    isNewTab: { type: Boolean, default: false },
+    label: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const rootElement = computed(() => props.element === ELEMENT.LINK ? _sfc_main$1 : props.element);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(rootElement.value), {
+        class: normalizeClass([
+          "tide-chip-action",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).BORDER.FULL.ONE,
+          unref(CSS).BORDER.RADIUS.FULL,
+          unref(CSS).BORDER.COLOR.DEFAULT,
+          unref(CSS).PADDING.X.ONE,
+          unref(CSS).PADDING.Y.HALF,
+          unref(CSS).BG.SURFACE.DEFAULT,
+          unref(CSS).FONT.ROLE.LINK_2,
+          unref(CSS).FONT.COLOR.SURFACE.DEFAULT,
+          unref(CSS).UNDERLINE.REST.OFF
+        ]),
+        href: props.href,
+        target: props.isNewTab ? unref(TARGET).BLANK : unref(TARGET).SELF,
+        type: __props.element === unref(ELEMENT).BUTTON ? unref(ELEMENT).BUTTON : void 0
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            icon: props.iconLeading
+          }, null, 8, ["icon"]),
+          createElementVNode("span", null, toDisplayString(props.label), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "href", "target", "type"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideChipAction.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideChipAction.vue2.js","sources":["../../src/components/TideChipAction.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a chip action button intended to be used in navigation menus relating to searches.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipaction--docs) for TideChipAction\n   */\n  export default {};\n</script>\n\n<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import InternalBaseLink from '@/components/InternalBaseLink.vue';\n  import TideIcon from '@/components/TideIcon.vue';\n  import { ELEMENT } from '@/types/Element';\n  import { ICON } from '@/types/Icon';\n  import { CSS } from '@/types/Styles';\n  import { TARGET } from '@/types/Target';\n\n  import type { Element } from '@/types/Element';\n  import type { Icon } from '@/types/Icon';\n\n  type Props = {\n    /** HTML tag type. */\n    element?: Element;\n\n    /** URL to navigate to on click. */\n    href?: string;\n\n    /** Icon to show before the label. */\n    iconLeading?: Icon;\n\n    /** Determines whether to target a new browser tab. */\n    isNewTab?: boolean;\n\n    /** Chip text. */\n    label: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    element: ELEMENT.LINK,\n    href: undefined,\n    iconLeading: ICON.SEARCH,\n    isNewTab: false,\n  });\n\n  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));\n</script>\n\n<template>\n  <component\n    :class=\"[\n      'tide-chip-action',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.BORDER.FULL.ONE,\n      CSS.BORDER.RADIUS.FULL,\n      CSS.BORDER.COLOR.DEFAULT,\n      CSS.PADDING.X.ONE,\n      CSS.PADDING.Y.HALF,\n      CSS.BG.SURFACE.DEFAULT,\n      CSS.FONT.ROLE.LINK_2,\n      CSS.FONT.COLOR.SURFACE.DEFAULT,\n      CSS.UNDERLINE.REST.OFF,\n    ]\"\n    :href=\"props.href\"\n    :target=\"props.isNewTab ? TARGET.BLANK : TARGET.SELF\"\n    :type=\"element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined\"\n    :is=\"rootElement\"\n  >\n    <TideIcon :icon=\"props.iconLeading\" />\n\n    <span>{{ props.label }}</span>\n  </component>\n</template>\n\n<style scoped>\n  .tide-chip-action:hover {\n    background-color: var(--tide-surface-variant);\n    border-color: var(--tide-border-high);\n  }\n</style>\n"],"names":["InternalBaseLink","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_unref","_createVNode","TideIcon","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;AAiCf,UAAM,QAAQ;AAOd,UAAM,cAAc,SAAS,MAAO,MAAM,YAAY,QAAQ,OAAOA,cAAmB,MAAM,OAAQ;;AAItG,aAAAC,aAAAC,YAwBYC,wBALL,YAAA,KAAW,GAAA;AAAA,QAlBf,OAAKC,eAAA;AAAA;UAAoCC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,UAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,UAAYA,MAAA,GAAA,EAAI,OAAO,MAAM;AAAA,UAAeA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAWA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAYA,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,UAAeA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,UAAcA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ;AAAA,UAAeA,MAAA,GAAA,EAAI,UAAU,KAAK;AAAA,QAAA;QAe5W,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM,WAAWA,MAAA,MAAA,EAAO,QAAQA,MAAA,MAAA,EAAO;AAAA,QAC/C,MAAM,QAAA,YAAYA,MAAA,OAAA,EAAQ,SAASA,MAAA,OAAA,EAAQ,SAAS;AAAA,MAAA;yBAGrD,MAAsC;AAAA,UAAtCC,YAAsCC,aAAA;AAAA,YAA3B,MAAM,MAAM;AAAA,UAAA;UAEvBC,mBAA8B,QAAA,MAAAC,gBAArB,MAAM,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;"}

package/dist/components/TideChipFilter.vue.js

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

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

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

package/dist/components/TideChipFilter.vue2.js

@@ -0,0 +1,51 @@
+import { defineComponent, useModel, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createElementVNode, toDisplayString, mergeModels } from "vue";
+import { CSS } from "../types/Styles.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideChipFilter",
+  props: /* @__PURE__ */ mergeModels({
+    label: {}
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const isActive = useModel(__props, "modelValue");
+    const handleClick = () => {
+      isActive.value = !isActive.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass([
+          "tide-chip-filter",
+          isActive.value ? ["active", unref(CSS).BG.SECONDARY, unref(CSS).FONT.COLOR.SECONDARY] : [unref(CSS).BG.SURFACE.VARIANT, unref(CSS).FONT.COLOR.SURFACE.DEFAULT],
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).BORDER.FULL.ONE,
+          unref(CSS).BORDER.RADIUS.FULL,
+          unref(CSS).PADDING.X.ONE,
+          unref(CSS).PADDING.Y.HALF,
+          unref(CSS).FONT.ROLE.LABEL_2
+        ]),
+        onClick: handleClick,
+        type: "button"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
+        createElementVNode("div", {
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).AXIS1.CENTER, unref(CSS).AXIS2.CENTER, unref(CSS).GAP.HALF])
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass([unref(CSS).FONT.ROLE.LABEL_1, unref(CSS).WHITESPACE_WRAP.OFF])
+          }, toDisplayString(__props.label), 3)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideChipFilter.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideChipFilter.vue2.js","sources":["../../src/components/TideChipFilter.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a chip filter component for use in navigation.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipfilter--docs) for TideChipFilter\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Chip text. */\n    label: string;\n  };\n\n  defineProps<Props>();\n\n  const isActive = defineModel<boolean>({ required: true });\n\n  const handleClick = () => {\n    isActive.value = !isActive.value;\n  };\n</script>\n\n<template>\n  <button\n    :class=\"[\n      'tide-chip-filter',\n      isActive\n        ? ['active', CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]\n        : [CSS.BG.SURFACE.VARIANT, CSS.FONT.COLOR.SURFACE.DEFAULT],\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.BORDER.FULL.ONE,\n      CSS.BORDER.RADIUS.FULL,\n      CSS.PADDING.X.ONE,\n      CSS.PADDING.Y.HALF,\n      CSS.FONT.ROLE.LABEL_2,\n    ]\"\n    @click=\"handleClick\"\n    type=\"button\"\n  >\n    <slot />\n\n    <div :class=\"[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]\">\n      <span :class=\"[CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]\">\n        {{ label }}\n      </span>\n    </div>\n  </button>\n</template>\n\n<style scoped>\n  /* Border must always exist to prevent resize on hover state, but match background color on rest state to blend in. */\n  .tide-chip-filter {\n    border-color: var(--tide-surface-variant);\n  }\n\n  .tide-chip-filter.active {\n    border-color: var(--tide-secondary);\n  }\n\n  .tide-chip-filter:hover {\n    background-color: var(--tide-surface-variant);\n    border-color: var(--tide-border);\n    color: var(--tide-on-surface);\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createElementVNode"],"mappings":";;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;AAaf,UAAM,WAAWA,8BAAuC;AAExD,UAAM,cAAc,MAAM;AACxB,eAAS,QAAQ,CAAC,SAAS;AAAA,IAC7B;;0BAIAC,mBAyBS,UAAA;AAAA,QAxBN,OAAKC,eAAA;AAAA;UAAoC,SAAA,mBAA8BC,MAAA,GAAA,EAAI,GAAG,WAAWA,MAAA,GAAA,EAAI,KAAK,MAAM,SAAS,IAAa,CAAAA,MAAA,GAAA,EAAI,GAAG,QAAQ,SAASA,MAAA,GAAA,EAAI,KAAK,MAAM,QAAQ,OAAO;AAAA,UAASA,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,UAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,UAAYA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAWA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAYA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,QAAA;QAc3X,SAAO;AAAA,QACR,MAAK;AAAA,MAAA;QAELC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAERC,mBAIM,OAAA;AAAA,UAJA,OAAKH,eAAA,CAAGC,WAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,MAAM,QAAQA,MAAA,GAAA,EAAI,IAAI,IAAI,CAAA;AAAA,QAAA;UAC9EE,mBAEO,QAAA;AAAA,YAFA,OAAKH,eAAA,CAAGC,MAAA,GAAA,EAAI,KAAK,KAAK,SAASA,MAAA,GAAA,EAAI,gBAAgB,GAAG,CAAA;AAAA,UAAA,mBACxD,QAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;"}

package/dist/components/TideChipInput.vue.js

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

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

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

package/dist/components/TideChipInput.vue2.js

@@ -0,0 +1,43 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createVNode } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import { ICON } from "../types/Icon.js";
+import { CSS } from "../types/Styles.js";
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideChipInput",
+  props: {
+    label: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass([
+          "tide-chip-input",
+          unref(CSS).BG.SURFACE.VARIANT,
+          unref(CSS).FONT.COLOR.SURFACE,
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).BORDER.FULL.ONE,
+          unref(CSS).BORDER.RADIUS.FULL,
+          unref(CSS).PADDING.X.ONE,
+          unref(CSS).PADDING.Y.HALF,
+          unref(CSS).FONT.ROLE.LABEL_2
+        ]),
+        type: "button"
+      }, [
+        createElementVNode("span", null, toDisplayString(props.label), 1),
+        createVNode(_sfc_main$1, {
+          icon: unref(ICON).CLOSE
+        }, null, 8, ["icon"])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideChipInput.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TideChipInput.vue2.js","sources":["../../src/components/TideChipInput.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders a input chip component for use in navigation.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipinput--docs) for TideChipInput\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import TideIcon from '@/components/TideIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { CSS } from '@/types/Styles';\n\n  type Props = {\n    /** Chip text */\n    label: string;\n  };\n\n  const props = defineProps<Props>();\n</script>\n\n<template>\n  <button\n    :class=\"[\n      'tide-chip-input',\n      CSS.BG.SURFACE.VARIANT,\n      CSS.FONT.COLOR.SURFACE,\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.BORDER.FULL.ONE,\n      CSS.BORDER.RADIUS.FULL,\n      CSS.PADDING.X.ONE,\n      CSS.PADDING.Y.HALF,\n      CSS.FONT.ROLE.LABEL_2,\n    ]\"\n    type=\"button\"\n  >\n    <span>{{ props.label }}</span>\n\n    <TideIcon :icon=\"ICON.CLOSE\" />\n  </button>\n</template>\n\n<style scoped>\n  .tide-chip-input {\n    border-color: var(--tide-border);\n  }\n\n  .tide-chip-input:hover {\n    border-color: var(--tide-border-high);\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createVNode","TideIcon"],"mappings":";;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;AAaf,UAAM,QAAQ;;0BAIdA,mBAmBS,UAAA;AAAA,QAlBN,OAAKC,eAAA;AAAA;UAAmCC,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,UAAeA,MAAA,GAAA,EAAI,KAAK,MAAM;AAAA,UAAeA,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,UAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,UAAYA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAWA,MAAA,GAAA,EAAI,QAAQ,EAAE;AAAA,UAAYA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,QAAA;QAanS,MAAK;AAAA,MAAA;QAELC,mBAA8B,QAAA,MAAAC,gBAArB,MAAM,KAAK,GAAA,CAAA;AAAA,QAEpBC,YAA+BC,aAAA;AAAA,UAApB,MAAMJ,MAAA,IAAA,EAAK;AAAA,QAAA;;;;;"}

package/dist/components/TideColumns.vue.js

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

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

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