tide-design-system 2.2.6 → 2.2.8

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/utilities-lg.css

@@ -41,6 +41,7 @@
 	.lg-tide-axis1-between {justify-content: space-between;}
 	.lg-tide-axis1-center  {justify-content: center;}
 	.lg-tide-axis1-end     {justify-content: end;}
+	.lg-tide-axis1-start   {justify-content: start;}
 
 	.lg-tide-axis2-around  {align-items: space-around;}
 	.lg-tide-axis2-center  {align-items: center;}
@@ -69,6 +70,7 @@
 	.lg-tide-margin-1    {margin: var(--tide-spacing-1);}
 	.lg-tide-margin-2    {margin: var(--tide-spacing-2);}
 	.lg-tide-margin-4    {margin: var(--tide-spacing-4);}
+	.lg-tide-margin-auto {margin: auto;}
 
 	.lg-tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 	.lg-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -84,7 +86,7 @@
 	.lg-tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 	.lg-tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 	.lg-tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-	.lg-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+	.lg-tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 	.lg-tide-margin-top-0    {margin-top: 0;}
 	.lg-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -92,7 +94,7 @@
 	.lg-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 	.lg-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 	.lg-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-	.lg-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+	.lg-tide-margin-top-auto {margin-top: auto;}
 
 	.lg-tide-margin-right-0    {margin-right: 0;}
 	.lg-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -108,7 +110,7 @@
 	.lg-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 	.lg-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 	.lg-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-	.lg-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+	.lg-tide-margin-bottom-auto {margin-bottom: auto;}
 
 	.lg-tide-margin-left-0    {margin-left: 0;}
 	.lg-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -222,8 +224,6 @@
 	.lg-tide-max-height-full {max-height: 100%;}
 	.lg-tide-min-height-0    {min-height: 0;}
 
-	.lg-tide-width-container {max-width: 1168px;}
-
 	.lg-tide-width-auto {width: auto;}
 	.lg-tide-width-0    {width: 0;}
 	.lg-tide-width-full {width: 100%;}
@@ -232,6 +232,9 @@
 	.lg-tide-height-0    {height: 0;}
 	.lg-tide-height-full {height: 100%;}
 
+	/* Deprecated */
+	.lg-tide-width-container {max-width: 1168px;}
+
 	/* Background */
 	.lg-tide-bg-initial {background-color: initial;}
 
@@ -320,6 +323,7 @@
 
 	.lg-tide-isolate {isolation: isolate;}
 
+	/* Deprecated */
 	.lg-tide-leading-default {line-height: 1.4;}
 	.lg-tide-leading-normal  {line-height: normal;}
 

package/src/assets/css/utilities-md.css

@@ -1,4 +1,3 @@
-/* Medium breakpoint */
 @media (min-width: 992px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
@@ -42,6 +41,7 @@
 	.md-tide-axis1-between {justify-content: space-between;}
 	.md-tide-axis1-center  {justify-content: center;}
 	.md-tide-axis1-end     {justify-content: end;}
+	.md-tide-axis1-start   {justify-content: start;}
 
 	.md-tide-axis2-around  {align-items: space-around;}
 	.md-tide-axis2-center  {align-items: center;}
@@ -70,6 +70,7 @@
 	.md-tide-margin-1    {margin: var(--tide-spacing-1);}
 	.md-tide-margin-2    {margin: var(--tide-spacing-2);}
 	.md-tide-margin-4    {margin: var(--tide-spacing-4);}
+	.md-tide-margin-auto {margin: auto;}
 
 	.md-tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 	.md-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -85,7 +86,7 @@
 	.md-tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 	.md-tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 	.md-tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-	.md-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+	.md-tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 	.md-tide-margin-top-0    {margin-top: 0;}
 	.md-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -93,7 +94,7 @@
 	.md-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 	.md-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 	.md-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-	.md-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+	.md-tide-margin-top-auto {margin-top: auto;}
 
 	.md-tide-margin-right-0    {margin-right: 0;}
 	.md-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -109,7 +110,7 @@
 	.md-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 	.md-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 	.md-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-	.md-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+	.md-tide-margin-bottom-auto {margin-bottom: auto;}
 
 	.md-tide-margin-left-0    {margin-left: 0;}
 	.md-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -223,8 +224,6 @@
 	.md-tide-max-height-full {max-height: 100%;}
 	.md-tide-min-height-0    {min-height: 0;}
 
-	.md-tide-width-container {max-width: 1168px;}
-
 	.md-tide-width-auto {width: auto;}
 	.md-tide-width-0    {width: 0;}
 	.md-tide-width-full {width: 100%;}
@@ -233,6 +232,9 @@
 	.md-tide-height-0    {height: 0;}
 	.md-tide-height-full {height: 100%;}
 
+	/* Deprecated */
+	.md-tide-width-container {max-width: 1168px;}
+
 	/* Background */
 	.md-tide-bg-initial {background-color: initial;}
 
@@ -321,6 +323,7 @@
 
 	.md-tide-isolate {isolation: isolate;}
 
+	/* Deprecated */
 	.md-tide-leading-default {line-height: 1.4;}
 	.md-tide-leading-normal  {line-height: normal;}
 

package/src/assets/css/utilities-sm.css

@@ -41,6 +41,7 @@
 	.sm-tide-axis1-between {justify-content: space-between;}
 	.sm-tide-axis1-center  {justify-content: center;}
 	.sm-tide-axis1-end     {justify-content: end;}
+	.sm-tide-axis1-start   {justify-content: start;}
 
 	.sm-tide-axis2-around  {align-items: space-around;}
 	.sm-tide-axis2-center  {align-items: center;}
@@ -69,6 +70,7 @@
 	.sm-tide-margin-1    {margin: var(--tide-spacing-1);}
 	.sm-tide-margin-2    {margin: var(--tide-spacing-2);}
 	.sm-tide-margin-4    {margin: var(--tide-spacing-4);}
+	.sm-tide-margin-auto {margin: auto;}
 
 	.sm-tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 	.sm-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -84,7 +86,7 @@
 	.sm-tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 	.sm-tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 	.sm-tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-	.sm-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+	.sm-tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 	.sm-tide-margin-top-0    {margin-top: 0;}
 	.sm-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -92,7 +94,7 @@
 	.sm-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 	.sm-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 	.sm-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-	.sm-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+	.sm-tide-margin-top-auto {margin-top: auto;}
 
 	.sm-tide-margin-right-0    {margin-right: 0;}
 	.sm-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -108,7 +110,7 @@
 	.sm-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 	.sm-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 	.sm-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-	.sm-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+	.sm-tide-margin-bottom-auto {margin-bottom: auto;}
 
 	.sm-tide-margin-left-0    {margin-left: 0;}
 	.sm-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -222,8 +224,6 @@
 	.sm-tide-max-height-full {max-height: 100%;}
 	.sm-tide-min-height-0    {min-height: 0;}
 
-	.sm-tide-width-container {max-width: 1168px;}
-
 	.sm-tide-width-auto {width: auto;}
 	.sm-tide-width-0    {width: 0;}
 	.sm-tide-width-full {width: 100%;}
@@ -232,6 +232,9 @@
 	.sm-tide-height-0    {height: 0;}
 	.sm-tide-height-full {height: 100%;}
 
+	/* Deprecated */
+	.sm-tide-width-container {max-width: 1168px;}
+
 	/* Background */
 	.sm-tide-bg-initial {background-color: initial;}
 
@@ -320,6 +323,7 @@
 
 	.sm-tide-isolate {isolation: isolate;}
 
+	/* Deprecated */
 	.sm-tide-leading-default {line-height: 1.4;}
 	.sm-tide-leading-normal  {line-height: normal;}
 

package/src/assets/css/utilities-xl.css

@@ -1,4 +1,4 @@
-@media (min-width: 1232px) {
+@media (min-width: 1920px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.xl-tide-position-absolute {position: absolute;}
@@ -41,6 +41,7 @@
 	.xl-tide-axis1-between {justify-content: space-between;}
 	.xl-tide-axis1-center  {justify-content: center;}
 	.xl-tide-axis1-end     {justify-content: end;}
+	.xl-tide-axis1-start   {justify-content: start;}
 
 	.xl-tide-axis2-around  {align-items: space-around;}
 	.xl-tide-axis2-center  {align-items: center;}
@@ -69,6 +70,7 @@
 	.xl-tide-margin-1    {margin: var(--tide-spacing-1);}
 	.xl-tide-margin-2    {margin: var(--tide-spacing-2);}
 	.xl-tide-margin-4    {margin: var(--tide-spacing-4);}
+	.xl-tide-margin-auto {margin: auto;}
 
 	.xl-tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 	.xl-tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -84,7 +86,7 @@
 	.xl-tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 	.xl-tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 	.xl-tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-	.xl-tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+	.xl-tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 	.xl-tide-margin-top-0    {margin-top: 0;}
 	.xl-tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -92,7 +94,7 @@
 	.xl-tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 	.xl-tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 	.xl-tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-	.xl-tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+	.xl-tide-margin-top-auto {margin-top: auto;}
 
 	.xl-tide-margin-right-0    {margin-right: 0;}
 	.xl-tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -108,7 +110,7 @@
 	.xl-tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 	.xl-tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 	.xl-tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-	.xl-tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+	.xl-tide-margin-bottom-auto {margin-bottom: auto;}
 
 	.xl-tide-margin-left-0    {margin-left: 0;}
 	.xl-tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -222,8 +224,6 @@
 	.xl-tide-max-height-full {max-height: 100%;}
 	.xl-tide-min-height-0    {min-height: 0;}
 
-	.xl-tide-width-container {max-width: 1168px;}
-
 	.xl-tide-width-auto {width: auto;}
 	.xl-tide-width-0    {width: 0;}
 	.xl-tide-width-full {width: 100%;}
@@ -232,6 +232,9 @@
 	.xl-tide-height-0    {height: 0;}
 	.xl-tide-height-full {height: 100%;}
 
+	/* Deprecated */
+	.xl-tide-width-container {max-width: 1168px;}
+
 	/* Background */
 	.xl-tide-bg-initial {background-color: initial;}
 
@@ -320,6 +323,7 @@
 
 	.xl-tide-isolate {isolation: isolate;}
 
+	/* Deprecated */
 	.xl-tide-leading-default {line-height: 1.4;}
 	.xl-tide-leading-normal  {line-height: normal;}
 

package/src/assets/css/utilities.css

@@ -40,6 +40,7 @@
 .tide-axis1-between {justify-content: space-between;}
 .tide-axis1-center  {justify-content: center;}
 .tide-axis1-end     {justify-content: end;}
+.tide-axis1-start   {justify-content: start;}
 
 .tide-axis2-around  {align-items: space-around;}
 .tide-axis2-center  {align-items: center;}
@@ -68,6 +69,7 @@
 .tide-margin-1    {margin: var(--tide-spacing-1);}
 .tide-margin-2    {margin: var(--tide-spacing-2);}
 .tide-margin-4    {margin: var(--tide-spacing-4);}
+.tide-margin-auto {margin: auto;}
 
 .tide-margin-x-0    {margin-left: 0;                        margin-right: 0;}
 .tide-margin-x-1\/4 {margin-left: var(--tide-spacing-1\/4); margin-right: var(--tide-spacing-1\/4);}
@@ -83,7 +85,7 @@
 .tide-margin-y-1    {margin-top: var(--tide-spacing-1);    margin-bottom: var(--tide-spacing-1);}
 .tide-margin-y-2    {margin-top: var(--tide-spacing-2);    margin-bottom: var(--tide-spacing-2);}
 .tide-margin-y-4    {margin-top: var(--tide-spacing-4);    margin-bottom: var(--tide-spacing-4);}
-.tide-margin-y-auto {margin-top: var(--tide-spacing-auto); margin-bottom: var(--tide-spacing-auto);}
+.tide-margin-y-auto {margin-top: auto;                     margin-bottom: auto;}
 
 .tide-margin-top-0    {margin-top: 0;}
 .tide-margin-top-1\/4 {margin-top: var(--tide-spacing-1\/4);}
@@ -91,7 +93,7 @@
 .tide-margin-top-1    {margin-top: var(--tide-spacing-1);}
 .tide-margin-top-2    {margin-top: var(--tide-spacing-2);}
 .tide-margin-top-4    {margin-top: var(--tide-spacing-4);}
-.tide-margin-top-auto {margin-top: var(--tide-spacing-auto);}
+.tide-margin-top-auto {margin-top: auto;}
 
 .tide-margin-right-0    {margin-right: 0;}
 .tide-margin-right-1\/4 {margin-right: var(--tide-spacing-1\/4);}
@@ -107,7 +109,7 @@
 .tide-margin-bottom-1    {margin-bottom: var(--tide-spacing-1);}
 .tide-margin-bottom-2    {margin-bottom: var(--tide-spacing-2);}
 .tide-margin-bottom-4    {margin-bottom: var(--tide-spacing-4);}
-.tide-margin-bottom-auto {margin-bottom: var(--tide-spacing-auto);}
+.tide-margin-bottom-auto {margin-bottom: auto;}
 
 .tide-margin-left-0    {margin-left: 0;}
 .tide-margin-left-1\/4 {margin-left: var(--tide-spacing-1\/4);}
@@ -221,8 +223,6 @@
 .tide-max-height-full {max-height: 100%;}
 .tide-min-height-0    {min-height: 0;}
 
-.tide-width-container {max-width: 1168px;}
-
 .tide-width-auto {width: auto;}
 .tide-width-0    {width: 0;}
 .tide-width-full {width: 100%;}
@@ -231,6 +231,9 @@
 .tide-height-0    {height: 0;}
 .tide-height-full {height: 100%;}
 
+/* Deprecated */
+.tide-width-container {max-width: 1168px;}
+
 /* Background */
 .tide-bg-initial {background-color: initial;}
 
@@ -319,6 +322,7 @@
 
 .tide-isolate {isolation: isolate;}
 
+/* Deprecated */
 .tide-leading-default {line-height: 1.4;}
 .tide-leading-normal  {line-height: normal;}
 

package/src/components/TideCarousel.vue

@@ -6,6 +6,8 @@
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
 
+  import type { Ref } from 'vue';
+
   type Props = {
     bleed?: number;
     isFloating?: boolean;
@@ -26,10 +28,16 @@
     title: undefined,
   });
 
-  const emit = defineEmits(['change']);
+  type Emits = {
+    (event: 'slideChange', slideIndex: number): void;
+    (event: 'slidesAddedToView', slidesInView: number[]): void;
+  };
 
-  const containerRef = ref();
+  const emit = defineEmits<Emits>();
 
+  const containerRef: Ref<HTMLDivElement | null> = ref(null);
+  const slideObserver = ref<IntersectionObserver | null>(null);
+  const slotObserver = ref<MutationObserver | null>(null);
   const contentRightEdge = ref();
   const contentWidth = ref();
   const currentSlide = ref(0);
@@ -42,6 +50,7 @@
 
   const updateContainerBleed = () => {
     if (props.bleed == undefined) return;
+    if (containerRef.value === null) return;
 
     if (isLastSlide.value && showButtons.value) {
       // Prevent gradient from bleeding off left edge in last position.
@@ -61,17 +70,21 @@
    * the frame.
    */
   const measureCurrentSlide = () => {
-    // Get left offset of each slide.
-    const slideOffsets = Array.from(containerRef.value.children).map((slide: any) => slide.offsetLeft);
+    const container = containerRef.value;
+    if (!container) return;
+
+    // Cast once, so TS knows these are HTMLElements
+    const slideOffsets = Array.from(container.children as HTMLCollectionOf<HTMLElement>).map(
+      (slide) => slide.offsetLeft
+    );
 
     if (slideOffsets.length === 0) return;
 
-    // Get closest offset to current scroll position.
-    const closestSlideOffset = slideOffsets.reduce((prev, curr) => {
-      return Math.abs(curr - containerRef.value.scrollLeft) < Math.abs(prev - containerRef.value.scrollLeft)
-        ? curr
-        : prev;
-    });
+    const scrollLeft = container.scrollLeft;
+
+    const closestSlideOffset = slideOffsets.reduce((prev, curr) =>
+      Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev
+    );
 
     currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
 
@@ -79,6 +92,7 @@
   };
 
   const measureDom = () => {
+    if (containerRef.value === null) return;
     contentRightEdge.value = containerRef.value.scrollLeft + containerRef.value.clientWidth;
     contentWidth.value = containerRef.value.scrollWidth;
     frameWidth.value = containerRef.value.clientWidth;
@@ -97,17 +111,19 @@
   };
 
   const scrollToSlide = (slideIndex: number) => {
+    if (containerRef.value === null) return;
     containerRef.value.scrollTo({
       behavior: 'smooth',
-      left: containerRef.value.children[slideIndex].offsetLeft,
+      left: (containerRef.value.children[slideIndex] as HTMLElement).offsetLeft,
     });
   };
 
   const showNextSlide = () => {
+    if (containerRef.value === null) return;
     if (contentRightEdge.value > contentWidth.value) {
       containerRef.value.scrollTo({
         behavior: 'smooth',
-        left: contentWidth,
+        left: contentWidth.value,
       });
     } else if (!isLastSlide.value) {
       scrollToSlide(currentSlide.value + 1);
@@ -120,13 +136,52 @@
     }
   };
 
+  const observeSlides = () => {
+    const options = {
+      root: containerRef?.value,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    slideObserver.value = new IntersectionObserver((entries) => {
+      let slides: number[] = [];
+
+      entries.forEach((entry) => {
+        const slideIndex = Array.from(containerRef.value?.children ?? []).indexOf(entry.target);
+        if (entry.isIntersecting) {
+          slides.push(slideIndex);
+        }
+      });
+
+      if (slides.length > 0) emit('slidesAddedToView', slides);
+    }, options);
+    Array.from(containerRef.value?.children ?? []).forEach((child) => {
+      if (slideObserver.value) slideObserver.value.observe(child);
+    });
+  };
+
+  const observeSlot = () => {
+    const observerCallback = () => {
+      observeSlides();
+    };
+    slotObserver.value = new MutationObserver(observerCallback);
+    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
+  };
+
   onMounted(() => {
+    if (window) {
+      window.addEventListener('resize', measureDom);
+    }
+
     measureDom();
-    window.addEventListener('resize', measureDom);
+    observeSlides();
+    observeSlot();
   });
 
   onUnmounted(() => {
     window.removeEventListener('resize', measureDom);
+    slideObserver.value?.disconnect();
+    slotObserver.value?.disconnect();
   });
 
   onUpdated(() => {
@@ -134,7 +189,7 @@
   });
 
   watch(currentSlide, () => {
-    emit('change', currentSlide.value);
+    emit('slideChange', currentSlide.value);
   });
 </script>
 

package/src/docs/development.md

@@ -60,13 +60,18 @@
       4. Serve the Sandbox App locally:
 
             `npm run dev`
+
    3. Via NPM Link
+
+        Note: If using Windows Subsystem for Linux (WSL), both the TIDE repository and the consumer repository need to be pulled down into the Linux environment.
+
       1. From the local instance of TIDE repository, create local package alias:
 
             `npm link`
       2. From the local instance of the consumer repository, leverage local package alias:
 
-        `npm link tide-design-system`
+            `npm link tide-design-system`
+
       3. Run the local instance of `tide-design-system`.
       4. Run the local instance of the consumer repository.
       5. Visit the local instance of the consumer repository in the browser as normal. All structures imported from the `tide-design-system` dependency will now reflect the local instance.

package/src/docs/integration-full.md

@@ -1,7 +1,9 @@
 # TIDE Full Integration
 1. Install dependency from NPM registry:
 
-   `npm install tide-design-system`
+   `npm install tide-design-system --save-exact`
+
+   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
 
 2. Use CSS utilities:
    1. Import global utilities:
@@ -22,6 +24,8 @@
 
       `import { CSS } from 'tide-design-system';`
 
+      Note: See the [TypeScript CSS constant](../types/Styles.ts) for full details.
+
    4. Leverage CSS utilities via TypeScript CSS constant:
 
       `<div :class="[CSS.POSITION.ABSOLUTE]" />`

package/src/docs/integration-partial.md

@@ -1,7 +1,9 @@
 # TIDE Partial Integration
 1. Install dependency from NPM registry:
 
-   `npm install tide-design-system`
+   `npm install tide-design-system --save-exact`
+
+   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
 
 2. Use CSS utilities:
    1. Import global utilities one of two ways:
@@ -36,6 +38,8 @@
 
          `<div class="tide-position-absolute" />`
 
+      Note: See the [CSS utilities](../assets/css/utilities.ts) for full details.
+
    4. Leverage responsive CSS utilities:
 
          `<div class="tide-position-relative md-tide-position-absolute" />`

package/src/docs/migration.md

@@ -10,6 +10,14 @@ The first implementation of the TIDE Design System was developed directly within
    4. CSS utilities
    5. Unit tests
 
+## Status
+1. The [legacy code](https://github.com/traderinteractive/marketplace) at the top level of the `marketplace` repository uses a [partial integration](./integration-partial.md) of TIDE, making the CSS utilities available globally.
+   1. Dependency controlled by the top level config: [package.json](https://github.com/traderinteractive/marketplace/blob/qa/package.json). **Version must be upgraded manually.**
+   2. Integration controlled by the [Gulp build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Agulpfile.js&type=code).
+2. The [redesign code](https://github.com/traderinteractive/marketplace/tree/qa/frontend) within the `/frontend` subdirectory of the `marketplace` repository uses a [full integration](./integration-full.md) of TIDE, making both the CSS utilities and Vue 3 components available for import from any Vue 3 file.
+   1. Dependency controlled by the nested config: [/frontend/package.json](https://github.com/traderinteractive/marketplace/blob/qa/frontend/package.json). **Version must be upgraded manually.**
+   2. Integration controlled by the [Vite build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Afrontend%2Fvite.config.ts&type=code).
+
 ## Workflow
 As TIDE structures become available in the TIDE repository, the TIDE team will work to identify redundant structures within the `marketplace` repository, create tickets detailing the work to reimplement these structures, and work with the relevant product teams to determine priority and ownership of these tasks.
 
@@ -63,3 +71,4 @@ As TIDE structures become available in the TIDE repository, the TIDE team will w
 
 7.  Delete unused [JS constants](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/types/Styles.ts) (CSS_OLD)
 8.  Delete unused [CSS utilities](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/assets/css/utilities.css)
+9.  Run `npm run precommit` from the `/frontend` directory to identify (and potentially autofix) any ESLint, TypeScript, and/or Vitest issues, as the build server will reject any source branch that contains syntax violations or failing unit tests.

package/src/stories/DemoCssUtilities.stories.ts

@@ -1,7 +1,7 @@
 /* eslint vue/sort-keys: 0 */
 
 import Border from '@/stories/FoundationsBorder.stories';
-import Gap from '@/stories/FoundationsGap.stories';
+import Flexbox from '@/stories/FoundationsFlexbox.stories';
 import Margin from '@/stories/FoundationsMargin.stories';
 import Padding from '@/stories/FoundationsPadding.stories';
 import Shadow from '@/stories/FoundationsShadow.stories';
@@ -93,7 +93,7 @@ export default {
   argTypes: {
     ...Border.argTypes,
     ...Shadow.argTypes,
-    ...Gap.argTypes,
+    ...Flexbox.argTypes,
     ...Padding.argTypes,
     children: {
       control: 'text',

package/src/stories/{FoundationsGap.stories.ts → FoundationsFlexbox.stories.ts}

@@ -69,13 +69,13 @@ export default {
   argTypes: {
     flexAxis1: {
       ...formatArgType({ FLEX_AXIS1 }),
-      description: 'Dictates alignment of children along primary axis',
-      name: 'Flex Axis Primary',
+      description: 'Dictates alignment of children along main axis',
+      name: 'Main Axis',
     },
     flexAxis2: {
       ...formatArgType({ FLEX_AXIS2 }),
-      description: 'Dictates alignment of children along secondary axis',
-      name: 'Flex Axis Secondary',
+      description: 'Dictates alignment of children along cross axis',
+      name: 'Cross Axis',
     },
     flexDirection: {
       ...formatArgType({ FLEX_DIRECTION }),
@@ -84,7 +84,7 @@ export default {
     },
     flexGap: {
       ...formatArgType({ GAP }),
-      description: 'Dictates vertical and/or horizontal spacing between elements within a flexbox container',
+      description: 'Dictates spacing between elements along the main axis',
       name: 'Flex Gap',
     },
     flexWrap: {
@@ -103,7 +103,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Utilities/Gap',
+  title: 'Utilities/Flexbox',
 };
 
 export const Default = {};