tide-design-system 2.3.0 → 2.4.0

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

@@ -405,12 +405,16 @@
 .tide-object-contain    {object-fit: contain;}
 .tide-object-scale-down {object-fit: scale-down;}
 
-.tide-opacity      {opacity: 1;}
-.tide-opacity-none {opacity: 0;}
+.tide-opacity          {opacity: 1;}
+.tide-opacity-disabled {opacity: var(--tide-disabled);}
+.tide-opacity-none     {opacity: 0;}
 
 .tide-pointer-events      {pointer-events: auto;}
 .tide-pointer-events-none {pointer-events: none;}
 
+.tide-user-select-none    {user-select: none;}
+.tide-user-select-initial {user-select: initial;}
+
 .tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 .tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 .tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -537,5 +541,5 @@ button.tide-button-secondary:disabled,
 button.tide-button-tertiary:disabled,
 button.tide-button-quaternary:disabled,
 button.tide-button-floating:disabled {
-  opacity: 0.32;
+  opacity: var(--tide-disabled);
 }

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

@@ -411,6 +411,10 @@
 .tide-pointer-events      {pointer-events: auto;}
 .tide-pointer-events-none {pointer-events: none;}
 
+.tide-user-select-none    {user-select: none;}
+.tide-opacity-disabled 		{opacity: var(--tide-disabled);}
+.tide-user-select-initial {user-select: initial;}
+
 .tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 .tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 .tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -537,7 +541,7 @@ button.tide-button-secondary:disabled,
 button.tide-button-tertiary:disabled,
 button.tide-button-quaternary:disabled,
 button.tide-button-floating:disabled {
-  opacity: 0.32;
+  opacity: var(--tide-disabled);
 }
 
 @media (min-width: 768px) {
@@ -948,12 +952,16 @@ button.tide-button-floating:disabled {
 	.sm-tide-object-contain    {object-fit: contain;}
 	.sm-tide-object-scale-down {object-fit: scale-down;}
 
-	.sm-tide-opacity      {opacity: 1;}
-	.sm-tide-opacity-none {opacity: 0;}
+	.sm-tide-opacity      		{opacity: 1;}
+	.sm-tide-opacity-disabled {opacity: var(--tide-disabled);}
+	.sm-tide-opacity-none 		{opacity: 0;}
 
 	.sm-tide-pointer-events      {pointer-events: auto;}
 	.sm-tide-pointer-events-none {pointer-events: none;}
 
+	.sm-tide-user-select-none    {user-select: none;}
+	.sm-tide-user-select-initial {user-select: initial;}
+
 	.sm-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 	.sm-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 	.sm-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -1080,7 +1088,7 @@ button.tide-button-floating:disabled {
 	button.sm-tide-button-tertiary:disabled,
 	button.sm-tide-button-quaternary:disabled,
 	button.sm-tide-button-floating:disabled {
-	  opacity: 0.32;
+	  opacity: var(--tide-disabled);
 	}
 }
 
@@ -1492,12 +1500,16 @@ button.tide-button-floating:disabled {
 	.md-tide-object-contain    {object-fit: contain;}
 	.md-tide-object-scale-down {object-fit: scale-down;}
 
-	.md-tide-opacity      {opacity: 1;}
-	.md-tide-opacity-none {opacity: 0;}
+	.md-tide-opacity      		{opacity: 1;}
+	.md-tide-opacity-disabled {opacity: var(--tide-disabled);}
+	.md-tide-opacity-none 		{opacity: 0;}
 
 	.md-tide-pointer-events      {pointer-events: auto;}
 	.md-tide-pointer-events-none {pointer-events: none;}
 
+	.md-tide-user-select-none    {user-select: none;}
+	.md-tide-user-select-initial {user-select: initial;}
+
 	.md-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 	.md-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 	.md-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -1624,7 +1636,7 @@ button.tide-button-floating:disabled {
 	button.md-tide-button-tertiary:disabled,
 	button.md-tide-button-quaternary:disabled,
 	button.md-tide-button-floating:disabled {
-	  opacity: 0.32;
+	  opacity: var(--tide-disabled);
 	}
 }
 
@@ -2036,12 +2048,16 @@ button.tide-button-floating:disabled {
 	.lg-tide-object-contain    {object-fit: contain;}
 	.lg-tide-object-scale-down {object-fit: scale-down;}
 
-	.lg-tide-opacity      {opacity: 1;}
-	.lg-tide-opacity-none {opacity: 0;}
+	.lg-tide-opacity      		{opacity: 1;}
+	.lg-tide-opacity-disabled {opacity: var(--tide-disabled);}
+	.lg-tide-opacity-none 		{opacity: 0;}
 
 	.lg-tide-pointer-events      {pointer-events: auto;}
 	.lg-tide-pointer-events-none {pointer-events: none;}
 
+	.lg-tide-user-select-none    {user-select: none;}
+	.lg-tide-user-select-initial {user-select: initial;}
+
 	.lg-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 	.lg-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 	.lg-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -2168,7 +2184,7 @@ button.tide-button-floating:disabled {
 	button.lg-tide-button-tertiary:disabled,
 	button.lg-tide-button-quaternary:disabled,
 	button.lg-tide-button-floating:disabled {
-	  opacity: 0.32;
+	  opacity: var(--tide-disabled);
 	}
 }
 
@@ -2580,12 +2596,16 @@ button.tide-button-floating:disabled {
 	.xl-tide-object-contain    {object-fit: contain;}
 	.xl-tide-object-scale-down {object-fit: scale-down;}
 
-	.xl-tide-opacity      {opacity: 1;}
-	.xl-tide-opacity-none {opacity: 0;}
+	.xl-tide-opacity       		{opacity: 1;}
+	.xl-tide-opacity-disabled {opacity: var(--tide-disabled);}
+	.xl-tide-opacity-none  		{opacity: 0;}
 
 	.xl-tide-pointer-events      {pointer-events: auto;}
 	.xl-tide-pointer-events-none {pointer-events: none;}
 
+	.xl-tide-user-select-none    {user-select: none;}
+	.xl-tide-user-select-initial {user-select: initial;}
+
 	.xl-tide-ratio-1\/1 {aspect-ratio: 1 / 1;}
 	.xl-tide-ratio-16\/9 {aspect-ratio: 16 / 9;}
 	.xl-tide-ratio-3\/2 {aspect-ratio: 3 / 2;}
@@ -2712,6 +2732,6 @@ button.tide-button-floating:disabled {
 	button.xl-tide-button-tertiary:disabled,
 	button.xl-tide-button-quaternary:disabled,
 	button.xl-tide-button-floating:disabled {
-	  opacity: 0.32;
+	  opacity: var(--tide-disabled);
 	}
 }

package/src/assets/css/utilities.css

@@ -1,2 +1,16 @@
 @import './utilities-base.css';
 @import './utilities-responsive.css';
+
+/* Non-responsive utility classes */
+
+.tide-screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/assets/css/variables.css

@@ -53,7 +53,7 @@
   --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
 
   /* Blur */
-  --tide-bg-blur: 8px;
+  --tide-bg-blur: blur(8px);
 
   /* Global tonal palette */
   --tide-gray-100:  #FFFFFF;

package/src/components/TideAlert.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ALERT } from '@/types/Alert';
@@ -28,6 +30,13 @@
   });
 
   const emit = defineEmits<Emits>();
+
+  const iconType = computed(() => {
+    if (props.type === ALERT.ERROR) return ICON.PRIORITY_HIGH;
+    if (props.type === ALERT.SUCCESS) return ICON.CHECK;
+    if (props.type === ALERT.WARNING) return ICON.WARNING;
+    return ICON.INFORMATION;
+  });
 </script>
 
 <template>
@@ -64,15 +73,13 @@
       v-if="!props.isToast"
     >
       <TideIcon
-        :icon="ICON.INFORMATION"
+        :icon="iconType"
         :size="SIZE.SMALL"
       />
     </div>
 
-    <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
-      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
-        {{ props.heading }}
-      </h2>
+    <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
+      {{ props.heading }}
     </div>
 
     <TideButtonIcon
@@ -84,7 +91,7 @@
       v-if="isDismissible"
     />
 
-    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, !props.isToast && CSS.FONT.COLOR.SURFACE.VARIANT]">
+    <div :class="['tide-alert-body', CSS.FONT.ROLE.BODY_2, !props.isToast && CSS.FONT.COLOR.SURFACE.DEFAULT]">
       <slot />
     </div>
   </div>

package/src/components/TideCarousel.vue

@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
 
-  import type { Ref } from 'vue';
-
   type Props = {
     bleed?: number;
     isFloating?: boolean;
     isHeadline1?: boolean;
     isHideawayButtons?: boolean;
+    isScrollByPage?: boolean;
     isTouchscreen?: boolean;
     subtitle?: string;
     title?: string;
@@ -23,174 +22,150 @@
     isFloating: false,
     isHeadline1: false,
     isHideawayButtons: true,
+    isScrollByPage: true,
     isTouchscreen: undefined,
     subtitle: undefined,
     title: undefined,
   });
 
   type Emits = {
-    (event: 'slideChange', slideIndex: number): void;
     (event: 'slidesAddedToView', slidesInView: number[]): void;
   };
 
   const emit = defineEmits<Emits>();
 
-  const containerRef: Ref<HTMLDivElement | null> = ref(null);
+  const containerRef = ref<HTMLDivElement | null>(null);
+  const isFirstSlide = ref<boolean>(true);
+  const isLastSlide = ref<boolean>(false);
+  const showButtons = ref<boolean>(true);
   const slideObserver = ref<IntersectionObserver | null>(null);
+  const slidesInView = ref<number[]>([]);
   const slotObserver = ref<MutationObserver | null>(null);
-  const contentRightEdge = ref();
-  const contentWidth = ref();
-  const currentSlide = ref(0);
-  const frameWidth = ref();
-  const hasOverflow = ref();
-  const isFirstSlide = ref();
-  const isLastSlide = ref();
-  const lastPosition = ref();
-  const showButtons = ref();
 
-  const updateContainerBleed = () => {
-    if (props.bleed == undefined) return;
-    if (containerRef.value === null) return;
+  const slides = ref<HTMLElement[]>([]);
 
-    if (isLastSlide.value && showButtons.value) {
-      // Prevent gradient from bleeding off left edge in last position.
-      containerRef.value.style.margin = `-${props.bleed}px -${props.bleed}px -${props.bleed}px 0`;
-      containerRef.value.style.padding = `${props.bleed}px ${props.bleed}px ${props.bleed}px 0`;
-    } else {
-      // Prevent gradient from bleeding off right edge in first position.
-      containerRef.value.style.margin = `-${props.bleed}px 0 -${props.bleed}px -${props.bleed}px`;
-      containerRef.value.style.padding = `${props.bleed}px 0 ${props.bleed}px ${props.bleed}px`;
-    }
+  // TODO: debounce
+  const handleScroll = () => {
+    updateContainerBleed();
   };
 
-  /**
-   * Measure the current slide based on the scroll
-   * position of the frame. The current slide is
-   * the slide that is closest to the left edge of
-   * the frame.
-   */
-  const measureCurrentSlide = () => {
-    const container = containerRef.value;
-    if (!container) return;
+  const observeSlides = () => {
+    const options = {
+      root: containerRef?.value,
+      rootMargin: '0px 1px 0px 0px',
+      threshold: 1,
+    };
 
-    // Cast once, so TS knows these are HTMLElements
-    const slideOffsets = Array.from(container.children as HTMLCollectionOf<HTMLElement>).map(
-      (slide) => slide.offsetLeft
-    );
+    slideObserver.value = new IntersectionObserver((entries) => {
+      let slidesAddedToView: number[] = [];
 
-    if (slideOffsets.length === 0) return;
+      entries.forEach((entry) => {
+        const slideIndex = slides.value.indexOf(entry.target as HTMLElement);
 
-    const scrollLeft = container.scrollLeft;
+        if (entry.isIntersecting) {
+          slidesAddedToView.push(slideIndex);
+          slidesInView.value.push(slideIndex);
+        } else {
+          slidesInView.value = slidesInView.value.filter((slide) => slide !== slideIndex);
+        }
 
-    const closestSlideOffset = slideOffsets.reduce((prev, curr) =>
-      Math.abs(curr - scrollLeft) < Math.abs(prev - scrollLeft) ? curr : prev
-    );
+        slidesInView.value.sort((a, b) => a - b);
+      });
 
-    currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
+      isFirstSlide.value = slidesInView.value.includes(0);
+      isLastSlide.value = slidesInView.value.includes(slides.value.length - 1);
 
-    updateContainerBleed();
-  };
+      if (slidesAddedToView.length > 0) emit('slidesAddedToView', slidesAddedToView);
+    }, options);
 
-  const measureDom = () => {
-    if (containerRef.value === null) return;
-    contentRightEdge.value = Math.round(containerRef.value.scrollLeft + containerRef.value.clientWidth);
-    contentWidth.value = containerRef.value.scrollWidth;
-    frameWidth.value = containerRef.value.clientWidth;
-    hasOverflow.value = contentWidth.value > frameWidth.value;
-    isFirstSlide.value = currentSlide.value === 0;
-    isLastSlide.value = contentRightEdge.value === contentWidth.value;
-    lastPosition.value = containerRef.value.scrollWidth - containerRef.value.clientWidth;
-    showButtons.value = hasOverflow.value && !props.isTouchscreen;
-
-    measureCurrentSlide();
+    slides.value.forEach((child) => {
+      if (slideObserver.value) slideObserver.value.observe(child);
+    });
   };
 
-  // TODO: debounce this
-  const handleScroll = () => {
-    measureDom();
+  const observeSlot = () => {
+    const observerCallback = () => {
+      if (containerRef.value === null) return;
+
+      slides.value = Array.from(containerRef.value.children) as HTMLElement[];
+      observeSlides();
+    };
+
+    slotObserver.value = new MutationObserver(observerCallback);
+
+    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
   };
 
-  const scrollToSlide = (slideIndex: number) => {
+  const scrollToOffset = (target: number) => {
     if (containerRef.value === null) return;
+
     containerRef.value.scrollTo({
       behavior: 'smooth',
-      left: (containerRef.value.children[slideIndex] as HTMLElement).offsetLeft,
+      left: target,
     });
   };
 
-  const showNextSlide = () => {
-    if (containerRef.value === null) return;
-    if (contentRightEdge.value > contentWidth.value) {
-      containerRef.value.scrollTo({
-        behavior: 'smooth',
-        left: contentWidth.value,
-      });
-    } else if (!isLastSlide.value) {
-      scrollToSlide(currentSlide.value + 1);
-    }
+  const showNextPage = () => {
+    if (slidesInView.value.length === 0) return;
+
+    const nextSlide: number = slidesInView.value[slidesInView.value.length - 1] + 1;
+
+    scrollToOffset(slides.value[nextSlide].offsetLeft);
   };
 
-  const showPreviousSlide = () => {
-    if (!isFirstSlide.value) {
-      scrollToSlide(currentSlide.value - 1);
-    }
+  const showPreviousPage = () => {
+    if (slidesInView.value.length === 0) return;
+
+    const previousSlide: number = slidesInView.value[0] - slidesInView.value.length;
+
+    scrollToOffset(slides.value[previousSlide]?.offsetLeft || 0);
   };
 
-  const observeSlides = () => {
-    const options = {
-      root: containerRef?.value,
-      rootMargin: '0px',
-      threshold: 0.5,
-    };
+  const showNextSlide = () => {
+    if (slidesInView.value.length === 0) return;
 
-    slideObserver.value = new IntersectionObserver((entries) => {
-      let slides: number[] = [];
+    const nextSlide: number = slidesInView.value.length > 1 ? slidesInView.value[1] : slidesInView.value[0] + 1;
 
-      entries.forEach((entry) => {
-        const slideIndex = Array.from(containerRef.value?.children ?? []).indexOf(entry.target);
-        if (entry.isIntersecting) {
-          slides.push(slideIndex);
-        }
-      });
+    scrollToOffset(slides.value[nextSlide].offsetLeft);
+  };
 
-      if (slides.length > 0) emit('slidesAddedToView', slides);
-    }, options);
-    Array.from(containerRef.value?.children ?? []).forEach((child) => {
-      if (slideObserver.value) slideObserver.value.observe(child);
-    });
+  const showPreviousSlide = () => {
+    if (slidesInView.value.length === 0) return;
+
+    const previousSlide: number = slidesInView.value[0] - 1;
+
+    scrollToOffset(slides.value[previousSlide].offsetLeft);
   };
 
-  const observeSlot = () => {
-    const observerCallback = () => {
-      observeSlides();
-    };
-    slotObserver.value = new MutationObserver(observerCallback);
-    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
+  const updateContainerBleed = () => {
+    if (containerRef.value === null) return;
+    if (props.bleed == undefined) return;
+
+    if (isLastSlide.value && showButtons.value) {
+      // Prevent gradient from bleeding off left edge in last position.
+      containerRef.value.style.margin = `-${props.bleed}px -${props.bleed}px -${props.bleed}px 0`;
+      containerRef.value.style.padding = `${props.bleed}px ${props.bleed}px ${props.bleed}px 0`;
+    } else {
+      // Prevent gradient from bleeding off right edge in first position.
+      containerRef.value.style.margin = `-${props.bleed}px 0 -${props.bleed}px -${props.bleed}px`;
+      containerRef.value.style.padding = `${props.bleed}px 0 ${props.bleed}px ${props.bleed}px`;
+    }
   };
 
   onMounted(() => {
-    if (window) {
-      window.addEventListener('resize', measureDom);
-    }
+    if (containerRef.value === null) return;
+
+    slides.value = Array.from(containerRef.value.children) as HTMLElement[];
 
-    measureDom();
     observeSlides();
     observeSlot();
+    updateContainerBleed();
   });
 
   onUnmounted(() => {
-    window.removeEventListener('resize', measureDom);
     slideObserver.value?.disconnect();
     slotObserver.value?.disconnect();
   });
-
-  onUpdated(() => {
-    measureDom();
-  });
-
-  watch(currentSlide, () => {
-    emit('slideChange', currentSlide.value);
-  });
 </script>
 
 <template>
@@ -207,21 +182,21 @@
   >
     <section
       :class="[CSS.DISPLAY.FLEX, props.title ? CSS.AXIS1.BETWEEN : CSS.AXIS1.END, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]"
-      v-if="!props.isFloating && (showButtons || props.title)"
+      v-if="(!props.isFloating && showButtons) || props.title"
     >
       <div
-        :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
-        v-if="props.title || props.subtitle"
+        :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
+        v-if="props.title"
       >
         <div
-          :class="[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
+          :class="[CSS.WHITESPACE_WRAP.OFF, isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
           v-if="props.title"
         >
           {{ props.title }}
         </div>
 
         <div
-          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
+          :class="[CSS.WHITESPACE_WRAP.OFF, CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
           v-if="props.subtitle"
         >
           {{ props.subtitle }}
@@ -230,20 +205,20 @@
 
       <div
         :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
-        v-if="showButtons"
+        v-if="!props.isFloating && showButtons"
       >
         <TideButtonIcon
-          :disabled="currentSlide === 0"
+          :disabled="isFirstSlide"
           :icon="ICON.CHEVRON_LEFT"
           :priority="PRIORITY.TERTIARY"
-          @click="showPreviousSlide"
+          @click="isScrollByPage ? showPreviousPage() : showPreviousSlide()"
         />
 
         <TideButtonIcon
           :disabled="isLastSlide"
           :icon="ICON.CHEVRON_RIGHT"
           :priority="PRIORITY.TERTIARY"
-          @click="showNextSlide"
+          @click="isScrollByPage ? showNextPage() : showNextSlide()"
         />
       </div>
     </section>
@@ -267,38 +242,38 @@
       >
         <slot />
       </ul>
-    </div>
 
-    <div
-      :class="[
-        'tide-carousel-button-overlay',
-        CSS.POSITION.ABSOLUTE,
-        CSS.POSITIONING.TOP,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.BETWEEN,
-        CSS.AXIS2.CENTER,
-        CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-        CSS.POINTER_EVENTS.OFF,
-        props.isHideawayButtons ? 'hideaway' : '',
-      ]"
-      v-if="isFloating && showButtons"
-    >
-      <TideButtonIcon
-        :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
-        :disabled="currentSlide === 0"
-        :icon="ICON.CHEVRON_LEFT"
-        :priority="PRIORITY.QUATERNARY"
-        @click="showPreviousSlide"
-      />
-
-      <TideButtonIcon
-        :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
-        :disabled="isLastSlide"
-        :icon="ICON.CHEVRON_RIGHT"
-        :priority="PRIORITY.QUATERNARY"
-        @click="showNextSlide"
-      />
+      <div
+        :class="[
+          'tide-carousel-button-overlay',
+          CSS.POSITION.ABSOLUTE,
+          CSS.POSITIONING.TOP,
+          CSS.DISPLAY.FLEX,
+          CSS.AXIS1.BETWEEN,
+          CSS.AXIS2.CENTER,
+          CSS.WIDTH.FULL,
+          CSS.HEIGHT.FULL,
+          CSS.POINTER_EVENTS.OFF,
+          props.isHideawayButtons ? 'hideaway' : '',
+        ]"
+        v-if="isFloating && showButtons"
+      >
+        <TideButtonIcon
+          :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
+          :disabled="isFirstSlide"
+          :icon="ICON.CHEVRON_LEFT"
+          :priority="PRIORITY.QUATERNARY"
+          @click="isScrollByPage ? showPreviousPage() : showPreviousSlide()"
+        />
+
+        <TideButtonIcon
+          :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
+          :disabled="isLastSlide"
+          :icon="ICON.CHEVRON_RIGHT"
+          :priority="PRIORITY.QUATERNARY"
+          @click="isScrollByPage ? showNextPage() : showNextSlide()"
+        />
+      </div>
     </div>
   </section>
 </template>

package/src/components/TideForm.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import { useTideForm } from '@/composables/useTideForm';
+
+  type Emits = {
+    (event: 'submit', e: SubmitEvent): void;
+  };
+  const emit = defineEmits<Emits>();
+
+  const { revealValidationErrors } = useTideForm();
+
+  const handleSubmit = (e: SubmitEvent) => {
+    revealValidationErrors();
+    emit('submit', e);
+  };
+</script>
+
+<template>
+  <form
+    @submit.prevent="handleSubmit"
+    novalidate
+  >
+    <slot />
+  </form>
+</template>