tide-design-system 2.4.4 → 2.4.6

package/src/components/TideAlert.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { Comment, computed, useSlots } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideIcon from '@/components/TideIcon.vue';
+  import TideLink from '@/components/TideLink.vue';
   import { ALERT } from '@/types/Alert';
+  import { ELEMENT } from '@/types/Element';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { SIZE } from '@/types/Size';
@@ -13,6 +15,7 @@
 
   type Props = {
     heading?: string;
+    ctaLabel?: string;
     isDismissible?: boolean;
     isToast?: boolean;
     type?: Alert;
@@ -20,9 +23,11 @@
 
   type Emits = {
     (event: 'close'): void;
+    (event: 'ctaClick'): void;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    ctaLabel: undefined,
     heading: undefined,
     isDismissible: true,
     isToast: false,
@@ -30,6 +35,15 @@
   });
 
   const emit = defineEmits<Emits>();
+  const slots = useSlots();
+  const hasBody = computed(() => {
+    const nodes = slots.default?.();
+    if (!nodes) return false;
+
+    return nodes.some(
+      (node) => node.type !== Comment && (typeof node.children !== 'string' || node.children.trim().length > 0)
+    );
+  });
 
   const iconType = computed(() => {
     if (props.type === ALERT.ERROR) return ICON.PRIORITY_HIGH;
@@ -78,8 +92,24 @@
       />
     </div>
 
-    <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
-      {{ props.heading }}
+    <div
+      :class="[
+        'tide-alert-heading',
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS2.CENTER,
+        CSS.FLEX.DIRECTION.ROW,
+        !hasBody ? [CSS.AXIS1.BETWEEN, CSS.MARGIN.RIGHT.HALF] : '',
+      ]"
+    >
+      <span :class="CSS.FONT.ROLE.LABEL_2_SEMIBOLD">{{ props.heading }}</span>
+
+      <TideLink
+        :class="[CSS.FONT.ROLE.LINK_2]"
+        :element="ELEMENT.BUTTON"
+        :label="props.ctaLabel"
+        @click="emit('ctaClick')"
+        v-if="props.ctaLabel && !hasBody"
+      />
     </div>
 
     <TideButtonIcon
@@ -93,6 +123,19 @@
 
     <div :class="['tide-alert-body', CSS.FONT.ROLE.BODY_2, !props.isToast && CSS.FONT.COLOR.SURFACE.DEFAULT]">
       <slot />
+
+      <div
+        :class="[CSS.MARGIN.TOP.HALF]"
+        v-if="props.ctaLabel && hasBody"
+      >
+        <TideLink
+          :class="[CSS.FONT.ROLE.LINK_2]"
+          :element="ELEMENT.BUTTON"
+          :label="props.ctaLabel"
+          @click="emit('ctaClick')"
+          v-if="props.ctaLabel"
+        />
+      </div>
     </div>
   </div>
 </template>

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]"