tide-design-system 2.5.8 → 2.5.9

package/dist/utilities/storybook.ts

@@ -24,7 +24,6 @@ export const tab = '  ';
 
 export const argTypeBoolean = {
   control: 'select',
-  description: 'Determines whether CSS utility is present',
   options: BOOLEAN,
   table: {
     defaultValue: { summary: 'False' },
@@ -34,7 +33,6 @@ export const argTypeBoolean = {
 
 export const argTypeBooleanUnrequired = {
   control: 'select',
-  description: 'True, False, or undefined<br />(for demonstration purposes)',
   options: BOOLEAN_UNREQUIRED,
   table: {
     defaultValue: { summary: 'None' },

package/docs/images.md

@@ -0,0 +1,50 @@
+# Responsive Images in TIDE
+
+The `<TideImage />` and `<TideImageBackground />` components provide built-in responsive loading and error handling.
+
+## Quick Start
+
+The `src` prop is the default image. Use the `:sources` prop to provide overrides for specific screen sizes using a mobile-first (min-width) pattern.
+
+**Minimal Responsive Example**
+
+``` vue
+<template>
+  <TideImage
+    src="image-mobile.png"
+    :sources="[
+      ...smaller screens
+      { media: BREAKPOINT.LG, srcset: "image-desktop.png" },
+      ...larger screens
+    ]"
+  />
+</template>
+```
+
+## Configuration
+
+The `:sources` array generates `<source>` elements within a `<picture>` tag. High-density descriptors (e.g., `2x`) are supported in the `srcset` string.
+
+### 1. Responsive Sources
+
+| Constant | Value | Resulting Media Query |
+| - | - | - |
+| `MEDIA.SM` | 768 | `(min-width: 768px)` |
+| `MEDIA.MD` | 992 | `(min-width: 992px)` |
+| `MEDIA.LG` | 1232 | `(min-width: 1232px)` |
+| `MEDIA.XL` | 1920 | `(min-width: 1920px)` |
+
+> **Note:** Order matters. The browser selects the first matching source from the top of the array down.
+
+### 2. Performance & Behavior
+
+- **Lazy Loading:** Enabled by default (`is-lazy: true`). For "above-the-fold" content (like Hero banners), set `:is-lazy="false"` to trigger high-priority fetching.
+- **Object Fit:** Controlled via the `object-fit` prop (defaults to `OBJECT_FIT.COVER`).
+
+## Error Handling
+
+If no valid source is loaded, the component automatically injects a placeholder fallback.
+
+**Placeholder Preview:**
+
+<img src="https://cdn-static.tilabs.io/marketplace/common/image-coming-soon.svg" width="400px" />

package/package.json

@@ -23,7 +23,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.9.0",
     "happy-dom": "^20.0.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^28.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "rollup-plugin-typescript2": "^0.36.0",
@@ -63,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/svg/icons/IconCalculate.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M8.14 18h1.5v-2h2v-1.5h-2v-2h-1.5v2h-2V16h2zm5-.75h5v-1.5h-5zm0-2.5h5v-1.5h-5zm1.1-3.8 1.4-1.4 1.4 1.4L18.1 9.9l-1.4-1.45 1.4-1.4L17.04 6l-1.4 1.4-1.4-1.4-1.05 1.05 1.4 1.4-1.4 1.45zM6.4 9.2h5V7.7h-5zM5.14 21q-.82 0-1.41-.59-.6-.59-.59-1.41V5q0-.82.59-1.41.6-.6 1.41-.59h14q.82 0 1.42.59.58.58.58 1.41v14q0 .83-.58 1.41-.6.6-1.42.59zm0-2h14V5h-14z"/>
+</svg>

package/src/components/TideAlert.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an alert component with customizable content and behavior.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidealert--docs) for TideAlert
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { Comment, computed, useSlots } from 'vue';
 
@@ -14,10 +23,19 @@
   import type { Alert } from '@/types/Alert';
 
   type Props = {
-    heading?: string;
+    /** Call To Action that renders as a TideLink; clicking emits a separate `click` event */
     ctaLabel?: string;
+
+    /** Heading text */
+    heading?: string;
+
+    /** Determines whether the Alert can be closed by the user */
     isDismissible?: boolean;
+
+    /** Determines whether the Alert is an overlay or displaces content */
     isToast?: boolean;
+
+    /** Alert type */
     type?: Alert;
   };
 

package/src/components/TideBadge.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a badge component with customizable content and behavior.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadge--docs) for TideBadge
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { BADGE_COLOR_DETAILS } from '@/types/Badge';
@@ -7,9 +16,16 @@
   import type { Icon } from '@/types/Icon';
 
   type Props = {
+    /** Determines which color option to adopt (if any) */
     color?: BadgeColor;
+
+    /** Icon to left of label */
     iconLeading?: Icon;
+
+    /** Determines whether to display the "Floating" variant styles */
     isFloating?: boolean;
+
+    /** Badge text */
     label: string;
   };
 

package/src/components/TideBadgeTrustedPartner.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a trusted partner badge component with preset years.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadgetrustedpartner--docs) for TideBadgeTrustedPartner
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { BADGE_TRUSTED } from '@/types/Badge';
@@ -7,6 +16,7 @@
   import type { BadgeTrustedYears } from '@/types/Badge';
 
   type Props = {
+    /** Number of years to display in the trusted partner badge */
     years?: BadgeTrustedYears;
   };
 

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a badge component for indicating a verified vehicle.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadgeverifiedvehicle--docs) for TideBadgeVerifiedVehicle
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';

package/src/components/TideBreadCrumbs.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a set of breadcrumbs for navigation purposes.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebreadcrumbs--docs) for TideBreadCrumbs
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
@@ -8,6 +17,7 @@
   import type { BreadCrumb } from '@/types/BreadCrumb';
 
   type Props = {
+    /** An array of labels and optional URLs to display for each bread crumb. */
     breadCrumbs: BreadCrumb[];
   };
 

package/src/components/TideButton.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a button component with various styling options.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebutton--docs) for TideButton
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 

package/src/components/TideButtonIcon.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a icon button component with various styling options.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonicon--docs) for TideButtonIcon
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 

package/src/components/TideButtonPagination.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a button component for use in pagination purposes.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonpagination--docs) for TideButtonPagination
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 
@@ -8,9 +17,16 @@
   import type { ElementBroad } from '@/types/Element';
 
   type Props = {
+    /** Indicates whether Pagination Button is associated with the displayed page */
     disabled?: boolean;
+
+    /** HTML tag type */
     element?: ElementBroad;
+
+    /** URL to open<br />(Link only) */
     href?: string;
+
+    /** Button text */
     label: string | number;
   };
 

package/src/components/TideButtonSave.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a button component for use to save items.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonsave--docs) for TideButtonSave
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import { ref, watch } from 'vue';
 

package/src/components/TideButtonSegmented.vue

@@ -1,9 +1,19 @@
+<script lang="ts">
+  /**
+   * Renders a segmented button component for navigation purposes.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonsegmented--docs) for TideButtonSegmented
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { CSS } from '@/types/Styles';
 
   import type { Tab } from '@/types/Tab';
 
   type Props = {
+    /** Sets label and callback for each tab */
     tabs: Tab[] | readonly Tab[];
   };
 

package/src/components/TideCard.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a card component with a heading, description, and optional icon.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecard--docs) for TideCard
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 
@@ -13,11 +22,22 @@
   import type { Icon } from '@/types/Icon';
 
   type Props = {
+    /** Optional description text displayed below the heading */
     description?: string;
+
+    /** The main heading of the card. */
     heading: string;
+
+    /** Optional icon displayed on the card. */
     icon?: Icon;
+
+    /** Determines whether the Card is selected (for selectable cards). */
     selected?: boolean;
+
+    /** Type of the card */
     type?: CardType;
+
+    /** URL to navigate to on click. */
     href?: string;
   };
 
@@ -30,7 +50,7 @@
   });
 
   const rootElement = computed<ElementBroad | typeof InternalBaseLink>(() =>
-    props.href ? InternalBaseLink : props.type === TYPE_CARD.INFORMATIONAL ? ELEMENT_BROAD.DIV : ELEMENT_BROAD.DIV
+    props.href ? InternalBaseLink : props.type === TYPE_CARD.INFORMATIONAL ? ELEMENT_BROAD.DIV : ELEMENT_BROAD.BUTTON
   );
 </script>
 

package/src/components/TideCarousel.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a carousel component with navigation controls and slide indicators.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecarousel--docs) for TideCarousel
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed, onMounted, onUnmounted, ref } from 'vue';
 
@@ -7,13 +16,28 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */
     hasDots?: boolean;
+
+    /** Determines whether to display on-page or floating carousel */
     isFloating?: boolean;
+
+    /** Determines font role used for title display */
     isHeadline1?: boolean;
+
+    /** Determines whether on-page buttons should be hidden until hover */
     isHideawayButtons?: boolean;
+
+    /** Determines whether to scroll by page or by individual slide */
     isScrollByPage?: boolean;
+
+    /** Determines the max number of indicator dots to display at a given time */
     maxDots?: number;
+
+    /** Determines the text displayed to the right of the title */
     subtitle?: string;
+
+    /** Determines the title text displayed above the carousel */
     title?: string;
   };
 

package/src/components/TideChipAction.vue

@@ -56,6 +56,7 @@
       CSS.GAP.HALF,
       CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.FULL,
+      CSS.BORDER.COLOR.DEFAULT,
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
       CSS.BG.SURFACE.DEFAULT,

package/src/components/TideChipFilter.vue

@@ -1,7 +1,17 @@
+<script lang="ts">
+  /**
+   * Renders a chip filter component for use in navigation.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipfilter--docs) for TideChipFilter
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Chip text. */
     label: string;
   };
 

package/src/components/TideChipInput.vue

@@ -1,9 +1,19 @@
+<script lang="ts">
+  /**
+   * Renders a input chip component for use in navigation.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipinput--docs) for TideChipInput
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Chip text */
     label: string;
   };
 

package/src/components/TideColumns.vue

@@ -1,7 +1,17 @@
+<script lang="ts">
+  /**
+   * Renders a columns component for use in navigation.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecolumns--docs) for TideColumns
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Determines label for the columns section. */
     heading?: string;
   };
 

package/src/components/TideDivider.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a divider component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidedivider--docs) for TideDivider
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { ORIENTATION } from '@/types/Orientation';
   import { CSS } from '@/types/Styles';
@@ -5,6 +14,7 @@
   import type { Orientation } from '@/types/Orientation';
 
   type Props = {
+    /** Determines whether Divider is horizontal or vertical */
     orientation?: Orientation;
   };
 

package/src/components/TideForm.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a form component to be used to wrap form elements and handle form submission.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideform--docs) for TideForm
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import { useTideForm } from '@/composables/useTideForm';
 

package/src/components/TideIcon.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an icon component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideicon--docs) for TideIcon
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
 
@@ -11,7 +20,10 @@
   import type { Component } from 'vue';
 
   type Props = {
+    /** Icon */
     icon: Icon;
+
+    /** Determines icon dimensions */
     size?: Size;
   };
 

package/src/components/TideImage.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an image component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideimage--docs) for TideImage
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed, ref } from 'vue';
 
@@ -8,12 +17,25 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
+    /** Text display when image can't be loaded. */
     alt?: string;
+
+    /** Apply a "height" attribute to the internal image tag (including unit). */
     height?: string;
+
+    /** Determines whether to delay loading until image is in viewport. */
     isLazy?: boolean;
+
+    /** Controls how the image scales within its box, effective only when image size differs from its intrinsic dimensions. */
     objectFit?: ObjectFit;
+
+    /** Determines image sources by breakpoint. */
     sources?: Source[];
+
+    /** Image URL. */
     src?: string;
+
+    /** Apply a "width" attribute to the internal image tag (including unit). */
     width?: string;
   };
 
@@ -47,11 +69,19 @@
 
   const setImageFromDefault = () => {
     const currentSrc = img.value?.currentSrc;
-    const pictureSource = picture.value?.querySelector(`source[srcset="${currentSrc}"]`);
+    const sources = picture.value?.querySelectorAll('source') ?? [];
+
+    if (!currentSrc) return;
 
-    if (currentSrc && pictureSource) {
-      pictureSource.srcset = imageDefault;
-    } else if (img.value) {
+    for (const source of sources) {
+      const resolved = new URL(source.srcset, window.location.href).href;
+
+      if (resolved === currentSrc) {
+        source.remove();
+        return;
+      }
+    }
+    if (img.value?.getAttribute('src') !== imageDefault) {
       img.value.src = imageDefault;
     }
   };

package/src/components/TideImageBackground.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an image background component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideimagebackground--docs) for TideImageBackground
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideImage from '@/components/TideImage.vue';
   import { OBJECT_FIT } from '@/types/Image';
@@ -6,9 +15,16 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
+    /** Text display when image can't be loaded. */
     alt?: string;
+
+    /** Determines whether to delay loading until image is in viewport. */
     isLazy?: boolean;
+
+    /** Determines image sources by breakpoint. */
     sources?: Source[];
+
+    /** Image URL. */
     src?: string;
   };
 

package/src/components/TideIndicator.vue

@@ -1,7 +1,17 @@
+<script lang="ts">
+  /**
+   * Renders an indicator component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideindicator--docs) for TideIndicator
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Indicator text */
     label?: string | number;
   };
 

package/src/components/TideInputCheckbox.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an input checkbox component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputcheckbox--docs) for TideInputCheckbox
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed, ref, watch, watchEffect } from 'vue';
 
@@ -13,13 +22,28 @@
   import type { ValidationResult } from '@/types/Validation';
 
   type Props = {
+    /** Determines whether Checkbox state is interactable */
     disabled?: boolean;
+
+    /** Overrides the default error message and valid state */
     error?: string;
+
+    /** Determines whether Checkbox is indeterminate */
     indeterminate?: boolean;
+
+    /** Unique ID attribute (to bind Checkbox label to input) */
     inputId?: string;
+
+    /** Label content */
     label: string;
+
+    /** Name attribute */
     name?: string;
+
+    /** Parenthetical response count */
     number?: number;
+
+    /** Determines whether input is required */
     required?: boolean;
   };