tide-design-system 2.4.5 → 2.4.6

package/src/components/TideButton.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
@@ -10,6 +12,7 @@
   import type { Icon } from '@/types/Icon';
   import type { Priority } from '@/types/Priority';
   import type { SizeButton } from '@/types/Size';
+  import type { ButtonType } from '@/types/Type';
 
   type Props = {
     disabled?: boolean;
@@ -21,6 +24,7 @@
     label: string;
     priority?: Priority;
     size?: SizeButton;
+    type?: ButtonType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +37,12 @@
     label: undefined,
     priority: PRIORITY.PRIMARY,
     size: SIZE_BUTTON.LARGE,
+    type: undefined,
   });
+
+  const typeAttribute = computed<string | undefined>(() =>
+    props.element === ELEMENT.BUTTON ? props.type ?? ELEMENT.BUTTON : undefined
+  );
 </script>
 
 <template>
@@ -43,18 +52,19 @@
       props.priority && `tide-button-${props.priority}`,
       props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
       props.element === ELEMENT.LINK ? CSS.UNDERLINE.REST.OFF : '',
-      size === SIZE_BUTTON.SMALL && [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.X.ONE, CSS.PADDING.Y.HALF],
-      size === SIZE_BUTTON.LARGE && [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.X.TWO, CSS.PADDING.Y.ONE],
+      size === SIZE_BUTTON.SMALL
+        ? [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.X.ONE, CSS.PADDING.Y.HALF, CSS.BORDER.RADIUS.QUARTER]
+        : [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.X.TWO, CSS.PADDING.Y.ONE, CSS.BORDER.RADIUS.HALF],
       CSS.AXIS1.CENTER,
       CSS.AXIS2.CENTER,
       CSS.GAP.HALF,
-      CSS.BORDER.RADIUS.HALF,
       CSS.FONT.ROLE.LABEL_1_SEMIBOLD,
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
     :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"
     :target="props.element === ELEMENT.LINK && props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"
+    :type="typeAttribute"
+    :is="element"
   >
     <TideIcon
       :icon="props.iconLeading"

package/src/components/TideButtonIcon.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
@@ -9,6 +11,7 @@
   import type { Element } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
   import type { Priority } from '@/types/Priority';
+  import type { ButtonType } from '@/types/Type';
 
   type Props = {
     disabled?: boolean;
@@ -17,6 +20,7 @@
     icon: Icon;
     isNewTab?: boolean;
     priority?: Priority;
+    type?: ButtonType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -26,14 +30,19 @@
     icon: undefined,
     isNewTab: false,
     priority: PRIORITY.PRIMARY,
+    type: undefined,
   });
+
+  const typeAttribute = computed<string | undefined>(() =>
+    props.element === ELEMENT.BUTTON ? props.type ?? ELEMENT.BUTTON : undefined
+  );
 </script>
 
 <template>
   <component
     :aria-label="props.icon"
     :class="[
-      props.element === ELEMENT.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
+      'tide-button-icon',
       props.priority && `tide-button-${props.priority}`,
       [CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
       props.element === ELEMENT.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
@@ -41,7 +50,8 @@
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
     :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"
     :target="props.element === ELEMENT.LINK && props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :is="props.element === ELEMENT.LINK ? 'a' : 'button'"
+    :type="typeAttribute"
+    :is="element"
   >
     <TideIcon
       :icon="props.icon"

package/src/components/TideButtonPagination.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-  import { ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+  import { ELEMENT_BROAD } from '@/types/Element';
   import { CSS } from '@/types/Styles';
 
-  import type { ElementTextAsIcon } from '@/types/Element';
+  import type { ElementBroad } from '@/types/Element';
 
   type Props = {
     disabled?: boolean;
-    element?: ElementTextAsIcon;
+    element?: ElementBroad;
     href?: string;
     label: string | number;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     disabled: false,
-    element: ELEMENT_TEXT_AS_ICON.BUTTON,
+    element: ELEMENT_BROAD.BUTTON,
     href: undefined,
     label: undefined,
   });
@@ -22,21 +22,16 @@
 <template>
   <component
     :class="[
-      props.element === ELEMENT_TEXT_AS_ICON.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
+      'tide-button-icon',
       [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
-      props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
-      props.element === ELEMENT_TEXT_AS_ICON.DIV ? [CSS.CURSOR.POINTER] : '',
+      props.element === ELEMENT_BROAD.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
+      props.element === ELEMENT_BROAD.DIV ? [CSS.CURSOR.POINTER] : '',
       [CSS.FONT.ROLE.HEADLINE_3],
     ]"
-    :disabled="props.element === ELEMENT_TEXT_AS_ICON.BUTTON && props.disabled"
-    :href="props.element === ELEMENT_TEXT_AS_ICON.LINK && props.href ? props.href : undefined"
-    :is="
-      props.element === ELEMENT_TEXT_AS_ICON.LINK
-        ? 'a'
-        : props.element === ELEMENT_TEXT_AS_ICON.BUTTON
-        ? 'button'
-        : 'div'
-    "
+    :disabled="props.element === ELEMENT_BROAD.BUTTON && props.disabled"
+    :href="props.element === ELEMENT_BROAD.LINK && props.href ? props.href : undefined"
+    :type="element === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined"
+    :is="element"
   >
     <span :class="['label', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER]">
       {{ props.label }}

package/src/components/TideButtonSegmented.vue

@@ -49,6 +49,7 @@
       :data-track="tab.dataTrack || undefined"
       :key="tab.label"
       @click="handleClick(index)"
+      type="button"
       v-for="(tab, index) in props.tabs"
     >
       <span :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]">

package/src/components/TideCard.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
   import TideIcon from '@/components/TideIcon.vue';
   import { TYPE_CARD } from '@/types/Card';
+  import { ELEMENT_BROAD } from '@/types/Element';
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
   import type { CardType } from '@/types/Card';
+  import type { ElementBroad } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
 
   type Props = {
@@ -16,13 +20,17 @@
     href?: string;
   };
 
-  withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {
     description: undefined,
     href: undefined,
     icon: undefined,
     selected: undefined,
     type: TYPE_CARD.INFORMATIONAL,
   });
+
+  const rootElement = computed<ElementBroad>(() =>
+    props.href ? ELEMENT_BROAD.LINK : props.type === TYPE_CARD.INFORMATIONAL ? ELEMENT_BROAD.DIV : ELEMENT_BROAD.DIV
+  );
 </script>
 
 <template>
@@ -42,7 +50,8 @@
       type === TYPE_CARD.SELECTABLE && selected && 'selected',
     ]"
     :href="href"
-    :is="href ? 'a' : type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
+    :type="rootElement === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined"
+    :is="rootElement"
   >
     <TideIcon
       :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"

package/src/components/TideCarousel.vue

@@ -12,7 +12,6 @@
     isHeadline1?: boolean;
     isHideawayButtons?: boolean;
     isScrollByPage?: boolean;
-    isTouchscreen?: boolean;
     maxDots?: number;
     subtitle?: string;
     title?: string;
@@ -24,7 +23,6 @@
     isHeadline1: false,
     isHideawayButtons: true,
     isScrollByPage: true,
-    isTouchscreen: undefined,
     maxDots: 5,
     subtitle: undefined,
     title: undefined,
@@ -83,6 +81,7 @@
 
     contentWidth.value = containerRef.value.scrollWidth;
     frameWidth.value = containerRef.value.clientWidth;
+    showButtons.value = contentWidth.value > frameWidth.value;
   };
 
   const observeSlides = () => {
@@ -237,14 +236,14 @@
         v-if="props.title"
       >
         <div
-          :class="[CSS.WHITESPACE_WRAP.OFF, isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
+          :class="[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
           v-if="props.title"
         >
           {{ props.title }}
         </div>
 
         <div
-          :class="[CSS.WHITESPACE_WRAP.OFF, CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
+          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
           v-if="props.subtitle"
         >
           {{ props.subtitle }}
@@ -393,4 +392,10 @@
     transform: scale(1);
     opacity: 1;
   }
+
+  @media (pointer: coarse) {
+    .tide-carousel .tide-carousel-button-overlay {
+      display: none;
+    }
+  }
 </style>

package/src/components/TideChipAction.vue

@@ -39,6 +39,7 @@
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+    :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
     :is="element"
   >
     <TideIcon :icon="ICON.SEARCH" />

package/src/components/TideChipFilter.vue

@@ -26,6 +26,7 @@
       CSS.FONT.ROLE.LABEL_2,
       props.isActive ? 'active' : '',
     ]"
+    type="button"
   >
     <slot />
     <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">

package/src/components/TideChipInput.vue

@@ -25,6 +25,7 @@
       CSS.PADDING.Y.HALF,
       CSS.FONT.ROLE.LABEL_2,
     ]"
+    type="button"
   >
     <span>{{ props.label }}</span>
 

package/src/components/TideIcon.vue

@@ -43,7 +43,7 @@
 </script>
 
 <template>
-  <div :class="['tide-icon', props.size]">
+  <div :class="['tide-icon', props.size, CSS.FLEX.SHRINK.OFF]">
     <Component
       :class="[CSS.DISPLAY.BLOCK]"
       :data-icon="icon"

package/src/components/TideImage.vue

@@ -61,14 +61,6 @@
   <picture
     :class="['tide-image', CSS.DISPLAY.BLOCK]"
     ref="picture"
-    :style="
-      width || height
-        ? {
-            width: width || undefined,
-            height: height || undefined,
-          }
-        : undefined
-    "
   >
     <source
       :key="source.srcset"
@@ -79,11 +71,19 @@
 
     <img
       :alt="alt"
-      :class="['tide-image-img', CSS.WIDTH.FULL, CSS.HEIGHT.FULL, CSS.OBJECT.CENTER, objectFitClassName]"
+      :class="[
+        'tide-image-img',
+        !props.width && CSS.WIDTH.FULL,
+        !props.height && CSS.HEIGHT.FULL,
+        CSS.OBJECT.CENTER,
+        objectFitClassName,
+      ]"
       :fetchpriority="isLazy ? undefined : 'high'"
+      :height="props.height"
       :loading="props.isLazy ? 'lazy' : 'eager'"
       ref="img"
       :src="src ?? imageDefault"
+      :width="props.width"
       @error="setImageFromDefault"
     />
   </picture>

package/src/components/TideInputText.vue

@@ -253,6 +253,7 @@
 
       <button
         @click="handleClear"
+        type="button"
         v-if="shouldShowClearButton"
       >
         <TideIcon
@@ -264,6 +265,7 @@
 
       <button
         @click="showPassword = !showPassword"
+        type="button"
         v-if="shouldShowPasswordButton"
       >
         <TideIcon

package/src/components/TideInputTextDeprecated.vue

@@ -234,6 +234,7 @@
 
       <button
         @click="handleClear"
+        type="button"
         v-if="hasClear && type !== TEXT_INPUT_TYPE.PASSWORD"
       >
         <TideIcon
@@ -245,6 +246,7 @@
 
       <button
         @click="showPassword = !showPassword"
+        type="button"
         v-if="type === TEXT_INPUT_TYPE.PASSWORD"
       >
         <TideIcon

package/src/components/TideInputTextarea.vue

@@ -119,7 +119,6 @@
         CSS.GAP.HALF,
         CSS.POSITION.RELATIVE,
         CSS.BORDER.RADIUS.HALF,
-        CSS.PADDING.LEFT.ONE,
         CSS.PADDING.TOP.HALF,
         CSS.OVERFLOW.XY.HIDDEN,
         CSS.BG.SURFACE.DEFAULT,
@@ -132,6 +131,7 @@
       <div
         :class="[
           'tide-input-textarea-label',
+          CSS.PADDING.X.ONE,
           hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
           !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
           CSS.POINTER_EVENTS.OFF,
@@ -142,7 +142,7 @@
       </div>
 
       <textarea
-        :class="[CSS.DISPLAY.BLOCK, CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
+        :class="[CSS.DISPLAY.BLOCK, CSS.FONT.ROLE.BODY_1, CSS.PADDING.X.ONE, CSS.WIDTH.FULL]"
         :maxlength="maxlength"
         :minlength="minlength"
         :name="name"

package/src/components/TideLink.vue

@@ -38,7 +38,8 @@
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"
+    :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
+    :is="element"
   >
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"

package/src/components/TideModal.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-  import { nextTick, onMounted, ref, watch } from 'vue';
+  import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import { BREAKPOINT } from '@/types/Breakpoint';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
-  import { setScrollLock } from '@/utilities/viewport';
+  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
 
   import type { Ref } from 'vue';
 
@@ -73,6 +73,10 @@
     }
   );
 
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
   onMounted(() => {
     if (props.isOpen) {
       triggerNativeDialogOpen();
@@ -81,97 +85,99 @@
 </script>
 
 <template>
-  <dialog
-    :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
-    ref="modalDialog"
-    :style="{ '--modal-width': props.width }"
-    @click.self="handleBackdropClick"
-    @close.prevent
-    @keydown.escape="handleEscapeKeydown"
-  >
-    <div
-      :class="[
-        'tide-modal-body',
-        CSS.BG.SURFACE.DEFAULT,
-        CSS.BORDER.RADIUS.ONE,
-        CSS.DISPLAY.FLEX,
-        CSS.FLEX.DIRECTION.COLUMN,
-        CSS.OVERFLOW.XY.HIDDEN,
-        CSS.POSITION.ABSOLUTE,
-        CSS.POSITIONING.BOTTOM,
-        CSS.SHADOW.TOP,
-        CSS.WIDTH.FULL,
-        CSS.WIDTH.MAX_FULL,
-        CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
-      ]"
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <dialog
+      :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
+      ref="modalDialog"
+      :style="{ '--modal-width': props.width }"
+      @click.self="handleBackdropClick"
+      @close.prevent
+      @keydown.escape="handleEscapeKeydown"
     >
-      <header
+      <div
         :class="[
-          'tide-modal-header',
-          CSS.AXIS2.CENTER,
-          CSS.BORDER.BOTTOM.ONE,
-          CSS.BORDER.COLOR.LOW,
+          'tide-modal-body',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.BORDER.RADIUS.ONE,
           CSS.DISPLAY.FLEX,
-          CSS.GAP.HALF,
-          CSS.ISOLATION.ISOLATE,
-          CSS.PADDING.Y.ONE,
-          CSS.POSITION.RELATIVE,
-          CSS.Z_INDEX.ONE,
+          CSS.FLEX.DIRECTION.COLUMN,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.POSITION.ABSOLUTE,
+          CSS.POSITIONING.BOTTOM,
+          CSS.SHADOW.TOP,
+          CSS.WIDTH.FULL,
+          CSS.WIDTH.MAX_FULL,
+          CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
         ]"
       >
-        <TideButtonIcon
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="emit('back')"
-          title="Back"
-          v-if="isBackButton"
-        />
+        <header
+          :class="[
+            'tide-modal-header',
+            CSS.AXIS2.CENTER,
+            CSS.BORDER.BOTTOM.ONE,
+            CSS.BORDER.COLOR.LOW,
+            CSS.DISPLAY.FLEX,
+            CSS.GAP.HALF,
+            CSS.ISOLATION.ISOLATE,
+            CSS.PADDING.Y.ONE,
+            CSS.POSITION.RELATIVE,
+            CSS.Z_INDEX.ONE,
+          ]"
+        >
+          <TideButtonIcon
+            :icon="ICON.CHEVRON_LEFT"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('back')"
+            title="Back"
+            v-if="isBackButton"
+          />
+
+          <div
+            :class="[CSS.FONT.ROLE.HEADLINE_2]"
+            v-text="title"
+          />
+
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
+            :icon="ICON.CLOSE"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('close')"
+            v-if="isDismissible"
+          />
+        </header>
 
         <div
-          :class="[CSS.FONT.ROLE.HEADLINE_2]"
-          v-text="title"
-        />
-
-        <TideButtonIcon
-          :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
-          :icon="ICON.CLOSE"
-          :priority="PRIORITY.QUATERNARY"
-          @click="emit('close')"
-          v-if="isDismissible"
-        />
-      </header>
-
-      <div
-        :class="[
-          'tide-modal-content',
-          CSS.DISPLAY.GRID,
-          CSS.ISOLATION.ISOLATE,
-          CSS.OVERFLOW.X.HIDDEN,
-          CSS.OVERFLOW.Y.AUTO,
-          CSS.PADDING.Y.TWO,
-          CSS.WIDTH.FULL,
-        ]"
-        ref="modalContent"
-      >
-        <slot />
+          :class="[
+            'tide-modal-content',
+            CSS.DISPLAY.GRID,
+            CSS.ISOLATION.ISOLATE,
+            CSS.OVERFLOW.X.HIDDEN,
+            CSS.OVERFLOW.Y.AUTO,
+            CSS.PADDING.Y.TWO,
+            CSS.WIDTH.FULL,
+          ]"
+          ref="modalContent"
+        >
+          <slot />
+        </div>
+
+        <footer
+          :class="[
+            'tide-modal-footer',
+            CSS.AXIS1.END,
+            CSS.DISPLAY.FLEX,
+            CSS.GAP.TWO,
+            CSS.ISOLATION.ISOLATE,
+            CSS.PADDING.Y.ONE,
+            CSS.SHADOW.TOP,
+          ]"
+          v-if="$slots.footer"
+        >
+          <slot name="footer" />
+        </footer>
       </div>
-
-      <footer
-        :class="[
-          'tide-modal-footer',
-          CSS.AXIS1.END,
-          CSS.DISPLAY.FLEX,
-          CSS.GAP.TWO,
-          CSS.ISOLATION.ISOLATE,
-          CSS.PADDING.Y.ONE,
-          CSS.SHADOW.TOP,
-        ]"
-        v-if="$slots.footer"
-      >
-        <slot name="footer" />
-      </footer>
-    </div>
-  </dialog>
+    </dialog>
+  </Teleport>
 </template>
 
 <style scoped>

package/src/components/TideSwitch.vue

@@ -39,6 +39,7 @@
     :disabled="props.disabled"
     @click="handleClick"
     aria-label="Switch"
+    type="button"
   >
     <div
       :class="[