tide-design-system 2.4.5 → 2.4.7

package/src/components/InternalBaseLink.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  import { useTideConfig } from '@/composables/useTideConfig';
+
+  const { linkComponent } = useTideConfig();
+</script>
+
+<template>
+  <component :is="linkComponent">
+    <slot />
+  </component>
+</template>

package/src/components/TideBreadCrumbs.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
@@ -22,14 +23,14 @@
       v-for="(crumb, index) in props.breadCrumbs"
     >
       <li :class="[CSS.FONT.ROLE.BODY_2]">
-        <a
+        <InternalBaseLink
           :class="[CSS.FONT.ROLE.LINK_2, CSS.FONT.COLOR.SURFACE.DEFAULT]"
           :data-track="crumb.dataTrack || undefined"
           :href="crumb.url"
           v-if="crumb.url"
         >
           {{ crumb.label }}
-        </a>
+        </InternalBaseLink>
 
         <span
           :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"

package/src/components/TideButton.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
@@ -10,6 +13,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 +25,7 @@
     label: string;
     priority?: Priority;
     size?: SizeButton;
+    type?: ButtonType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +38,14 @@
     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
+  );
+
+  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
 </script>
 
 <template>
@@ -43,18 +55,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="rootElement"
   >
     <TideIcon
       :icon="props.iconLeading"

package/src/components/TideButtonIcon.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
@@ -9,6 +12,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 +21,7 @@
     icon: Icon;
     isNewTab?: boolean;
     priority?: Priority;
+    type?: ButtonType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -26,14 +31,21 @@
     icon: undefined,
     isNewTab: false,
     priority: PRIORITY.PRIMARY,
+    type: undefined,
   });
+
+  const typeAttribute = computed<string | undefined>(() =>
+    props.element === ELEMENT.BUTTON ? props.type ?? ELEMENT.BUTTON : undefined
+  );
+
+  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
 </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 +53,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="rootElement"
   >
     <TideIcon
       :icon="props.icon"

package/src/components/TideButtonPagination.vue

@@ -1,42 +1,42 @@
 <script lang="ts" setup>
-  import { ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
+  import { ELEMENT, 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,
   });
+
+  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
 </script>
 
 <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="rootElement"
   >
     <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,15 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.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 +21,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 | typeof InternalBaseLink>(() =>
+    props.href ? InternalBaseLink : props.type === TYPE_CARD.INFORMATIONAL ? ELEMENT_BROAD.DIV : ELEMENT_BROAD.DIV
+  );
 </script>
 
 <template>
@@ -42,7 +51,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 }}
@@ -273,7 +272,7 @@
 
     <slot name="misc" />
 
-    <div :class="[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER]">
+    <div :class="[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX]">
       <ul
         :class="[
           'tide-carousel-container',
@@ -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

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { ICON } from '@/types/Icon';
@@ -19,6 +22,8 @@
     href: undefined,
     isNewTab: false,
   });
+
+  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
 </script>
 
 <template>
@@ -39,7 +44,8 @@
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :is="element"
+    :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
+    :is="rootElement"
   >
     <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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
+  import { markRaw, ref, watch } from 'vue';
 
   import { REALM } from '@/types/Realm';
   import { SIZE } from '@/types/Size';
@@ -28,22 +28,21 @@
       const name = formatPascalCase(id);
       const [prefix] = id.split('-');
       const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
-      const component = defineAsyncComponent(() => {
-        if (realmFolder) {
-          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
-        }
 
-        return import(`../assets/svg/icons/Icon${name}.svg?component`);
-      });
+      const loader = realmFolder
+        ? () => import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`)
+        : () => import(`../assets/svg/icons/Icon${name}.svg?component`);
 
-      innerSVG.value = markRaw(component);
+      const mod = await loader();
+
+      innerSVG.value = markRaw(mod.default);
     },
     { immediate: true }
   );
 </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

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
   import { CSS } from '@/types/Styles';
@@ -26,6 +29,8 @@
     label: undefined,
     subtle: false,
   });
+
+  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
 </script>
 
 <template>
@@ -38,7 +43,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="rootElement"
   >
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"

package/src/components/TideMenuItem.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+  /**
+   * Renders a generic menu item intended to be used in navigation menus or dropdowns.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemenuitem--docs) for TideMenuItem
+   */
+  export default {};
+</script>
+
+<script setup lang="ts">
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ELEMENT } from '@/types/Element';
+  import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
+  import { TARGET } from '@/types/Target';
+
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+
+  type Props = {
+    /** The element to render the root element as. */
+    element?: Element;
+
+    /** The href attribute to apply when the element is a link. */
+    href?: string;
+
+    /** Whether to open link in a new tab. */
+    isNewTab?: boolean;
+
+    /** Icon to show after the label. */
+    iconTrailing?: Icon;
+
+    /** The label to be displayed. */
+    label: string;
+  };
+
+  withDefaults(defineProps<Props>(), {
+    element: ELEMENT.LINK,
+    href: undefined,
+    iconTrailing: undefined,
+    isNewTab: false,
+  });
+</script>
+
+<template>
+  <component
+    :class="[
+      'tide-menu-item',
+      CSS.AXIS2.CENTER,
+      CSS.BORDER.RADIUS.ZERO,
+      CSS.DISPLAY.FLEX,
+      CSS.ELLIPSIS,
+      CSS.FONT.ROLE.LABEL_2,
+      CSS.GAP.QUARTER,
+      CSS.PADDING.X.ONE,
+      CSS.PADDING.Y.HALF,
+      CSS.UNDERLINE.REST.OFF,
+      CSS.WIDTH.FULL,
+    ]"
+    :href="href"
+    :target="isNewTab ? TARGET.BLANK : undefined"
+    :is="element"
+  >
+    <span>{{ label }}</span>
+
+    <TideIcon
+      :class="[CSS.MARGIN.LEFT.AUTO]"
+      :icon="iconTrailing"
+      :size="SIZE.LARGE"
+      v-if="iconTrailing"
+    />
+  </component>
+</template>
+
+<style scoped>
+  .tide-menu-item {
+    height: 40px;
+  }
+
+  .tide-menu-item:hover {
+    background-color: var(--tide-surface-variant);
+  }
+</style>