tide-design-system 2.4.5 → 2.5.0

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

@@ -4,18 +4,15 @@
   import type { Tab } from '@/types/Tab';
 
   type Props = {
-    activeTab: number;
-    tabs: Tab[];
+    tabs: Tab[] | readonly Tab[];
   };
 
-  const props = withDefaults(defineProps<Props>(), {
-    activeTab: 0,
-  });
+  defineProps<Props>();
 
-  const emit = defineEmits(['change']);
+  const currentIndex = defineModel<number>({ required: true });
 
   const handleClick = (index: number) => {
-    emit('change', index);
+    currentIndex.value = index;
   };
 </script>
 
@@ -24,32 +21,34 @@
     :class="[
       'tide-button-segmented',
       CSS.BG.SURFACE.VARIANT,
+      CSS.BORDER.RADIUS.FULL,
       CSS.DISPLAY.FLEX,
+      CSS.FLEX.SHRINK.OFF,
       CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.FULL,
+      CSS.OVERFLOW.XY.AUTO,
       CSS.PADDING.FULL.QUARTER,
-      CSS.OVERFLOW.XY.HIDDEN,
-      CSS.WIDTH.FULL,
     ]"
   >
     <button
       :class="[
         'tide-button-segmented-tab',
-        index === activeTab
+        index === currentIndex
           ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
           : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
-        CSS.FLEX.GROW.ON,
         CSS.BORDER.FULL.TWO,
         CSS.BORDER.RADIUS.FULL,
-        CSS.PADDING.Y.QUARTER,
-        CSS.WIDTH.FULL,
+        CSS.FLEX.GROW.ON,
         CSS.FONT.ROLE.BUTTON_1,
+        CSS.PADDING.X.HALF,
+        CSS.PADDING.Y.QUARTER,
         CSS.WHITESPACE_WRAP.OFF,
+        CSS.WIDTH.FULL,
       ]"
       :data-track="tab.dataTrack || undefined"
       :key="tab.label"
       @click="handleClick(index)"
-      v-for="(tab, index) in props.tabs"
+      type="button"
+      v-for="(tab, index) in tabs"
     >
       <span :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]">
         {{ tab.label }}
@@ -68,6 +67,7 @@
 <style scoped>
   .tide-button-segmented {
     max-width: 23.3rem;
+    align-self: stretch;
   }
 
   .tide-button-segmented-tab {

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

@@ -2,19 +2,24 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
-    isActive: boolean;
     label: string;
   };
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
+
+  const isActive = defineModel<boolean>({ required: true });
+
+  const handleClick = () => {
+    isActive.value = !isActive.value;
+  };
 </script>
 
 <template>
   <button
     :class="[
       'tide-chip-filter',
-      props.isActive
-        ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
+      isActive
+        ? ['active', CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
         : [CSS.BG.SURFACE.VARIANT, CSS.FONT.COLOR.SURFACE.DEFAULT],
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
@@ -24,13 +29,15 @@
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
       CSS.FONT.ROLE.LABEL_2,
-      props.isActive ? 'active' : '',
     ]"
+    @click="handleClick"
+    type="button"
   >
     <slot />
+
     <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">
-      <span :class="[props.isActive ? '' : 'icon-spacing', CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
-        {{ props.label }}
+      <span :class="[CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
+        {{ label }}
       </span>
     </div>
   </button>

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/TideInputCheckbox.vue

@@ -107,7 +107,6 @@
         showError ? CSS.FONT.COLOR.GLOBAL.ERROR : CSS.FONT.COLOR.SURFACE.DEFAULT,
         disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],
       ]"
-      :for="inputId"
     >
       <input
         :checked="isChecked"

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