tide-design-system 2.0.50 → 2.0.52

package/src/components/TideInputSelect.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
   import { computed, ref, watch } from 'vue';
 
-  import type { SelectField } from '@/types/Field';
-  import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
   import { getErrorMessage, getFieldHasError } from '@/utilities/validation';
 
+  import type { SelectField } from '@/types/Field';
+  import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+
   interface Props extends SelectField {
     inputId?: string;
     supportingText?: string;

package/src/components/TideInputText.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
   import { computed, ref, watch } from 'vue';
 
-  import type { FormValueTransformer } from '@/types/Form';
-  import type { Icon } from '@/types/Icon';
-  import type { TextInputType } from '@/types/TextInput';
-  import type { ValidationError, Validator } from '@/types/Validation';
-
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
   import { TEXT_INPUT_TYPE } from '@/types/TextInput';
   import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation';
 
+  import type { FormValueTransformer } from '@/types/Form';
+  import type { Icon } from '@/types/Icon';
+  import type { TextInputType } from '@/types/TextInput';
+  import type { ValidationError, Validator } from '@/types/Validation';
+
   type Props = {
     autocomplete?: boolean;
     dataTrack?: string;

package/src/components/TideInputTextarea.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
   import { computed, ref, watch } from 'vue';
 
-  import type { ValidationError } from '@/types/Validation';
-
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
   import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation';
 
+  import type { ValidationError } from '@/types/Validation';
+
   type Props = {
     dataTrack?: string;
     error?: ValidationError;

package/src/components/TideLink.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-  import type { Element } from '@/types/Element';
-  import type { Icon } from '@/types/Icon';
-
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ELEMENT } from '@/types/Element';
+  import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+
   type Props = {
     element?: Element;
     href?: string;

package/src/components/TideModal.vue

@@ -2,8 +2,8 @@
   import { onMounted, ref, watch } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
+  import { CSS } from '@/types/Styles';
 
   type Props = {
     isOpen: boolean;

package/src/components/TidePagination.vue

@@ -3,9 +3,9 @@
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideButtonPagination from '@/components/TideButtonPagination.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
+  import { CSS } from '@/types/Styles';
 
   type Props = {
     pageCurrent?: number;

package/src/components/TideSeoLinks.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-  import type { Link } from '@/types/Link';
-
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
+  import type { Link } from '@/types/Link';
+
   type Props = {
     heading?: string;
     links: Link[];

package/src/components/TideTabs.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
 
-  import type { Tab } from '@/types/Tab';
-
   import { CSS } from '@/types/Styles';
 
+  import type { Tab } from '@/types/Tab';
+
   type Props = {
     activeTabInitial?: number;
     tabs: Tab[];

package/src/components/TideToggle.vue

@@ -2,9 +2,9 @@
   import { ref } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
-  import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
 
   const props = defineProps({
     disabled: {

package/src/docs/integration.md

@@ -18,7 +18,7 @@
 
       `import 'tide-design-system/css/realm/cycle';`
 
-      `import 'tide-design-system/css/realm/equip';`
+      `import 'tide-design-system/css/realm/equipment';`
 
       `import 'tide-design-system/css/realm/pwc';`
 

package/src/stories/DemoCssUtilities.stories.ts

@@ -1,15 +1,15 @@
 /* eslint vue/sort-keys: 0 */
 
-import type { StoryContext } from '@storybook/vue3';
-
-import * as STYLES from '@/types/Storybook';
 import Border from '@/stories/FoundationsBorder.stories';
 import Gap from '@/stories/FoundationsGap.stories';
 import Margin from '@/stories/FoundationsMargin.stories';
 import Padding from '@/stories/FoundationsPadding.stories';
 import Shadow from '@/stories/FoundationsShadow.stories';
+import * as STYLES from '@/types/Storybook';
 import { argTypeDimension, formatArgType, prependKeyValue, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
 const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);

package/src/stories/FoundationsBorder.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
 const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);

package/src/stories/FoundationsGap.stories.ts

@@ -1,5 +1,3 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import {
   argTypeBooleanUnrequired,
@@ -8,6 +6,8 @@ import {
   prependNoneAsEmpty,
 } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const FLEX_AXIS1 = prependNoneAsEmpty(STYLES.FLEX_AXIS1);
 const FLEX_AXIS2 = prependNoneAsEmpty(STYLES.FLEX_AXIS2);
 const FLEX_DIRECTION = prependNoneAsEmpty(STYLES.FLEX_DIRECTION);

package/src/stories/FoundationsGrid.stories.ts

@@ -1,5 +1,3 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import {
@@ -11,6 +9,8 @@ import {
   tab,
 } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const GRID_END = prependNoneAsEmpty(STYLES.GRID_END);
 const GRID_START = prependNoneAsEmpty(STYLES.GRID_START);
 

package/src/stories/FoundationsMargin.stories.ts

@@ -1,9 +1,9 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const MARGIN = prependNoneAsEmpty(STYLES.MARGIN);
 
 const formatArgs = (args: any) => {

package/src/stories/FoundationsPadding.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const PADDING = prependNoneAsEmpty(STYLES.PADDING);
 
 const formatArgs = (args: any) => {

package/src/stories/FoundationsShadow.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const SHADOW = prependNoneAsEmpty(STYLES.SHADOW);
 
 const formatArgs = (args: any) => {

package/src/stories/FoundationsTransparency.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const BG = prependNoneAsEmpty(STYLES.BG);
 const FONT_COLOR = prependNoneAsEmpty(STYLES.FONT_COLOR);
 const TRANSPARENT = prependNoneAsEmpty(STYLES.TRANSPARENT);

package/src/stories/FoundationsTypography.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import * as STYLES from '@/types/Storybook';
 import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
 
 const formatArgs = (args: any) => {

package/src/stories/TideAlert.stories.ts

@@ -1,5 +1,5 @@
-import * as STANDARD_ALERT from '@/types/Alert';
 import TideAlert from '@/components/TideAlert.vue';
+import * as STANDARD_ALERT from '@/types/Alert';
 import {
   argTypeBooleanUnrequired,
   dataTrack,

package/src/stories/TideBackgroundImage.stories.ts

@@ -1,11 +1,10 @@
-import type { StoryContext } from '@storybook/vue3';
-
-import type { Source } from '@/types/Source';
-
 import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
 import { MEDIA } from '@/types/Breakpoint';
 import { argTypeBooleanUnrequired } from '@/utilities/storybook';
 
+import type { Source } from '@/types/Source';
+import type { StoryContext } from '@storybook/vue3';
+
 const formatSnippet = (_code: string, context: StoryContext) => {
   const { args } = context;
   const argsWithValues: string[] = [`alt="${args.alt}"`];

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -1,5 +1,5 @@
-import * as STANDARD_BADGE from '@/types/Storybook';
 import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
+import * as STANDARD_BADGE from '@/types/Storybook';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
 const BADGE_TRUSTED = prependNoneAsUndefined(STANDARD_BADGE.BADGE_TRUSTED);

package/src/stories/TideBreadCrumbs.stories.ts

@@ -1,8 +1,8 @@
-import type { BreadCrumb } from '@/types/BreadCrumb';
-
 import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import { parameters } from '@/utilities/storybook';
 
+import type { BreadCrumb } from '@/types/BreadCrumb';
+
 const breadCrumbs: BreadCrumb[] = [
   {
     dataTrack: 'Home Bread Crumb Click',

package/src/stories/TideButton.stories.ts

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 
+import TideButton from '@/components/TideButton.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_PRIORITY from '@/types/Priority';
 import * as STANDARD_SIZE_BUTTON from '@/types/Size';
-import TideButton from '@/components/TideButton.vue';
 import {
   argTypeBooleanUnrequired,
   click,

package/src/stories/TideButtonIcon.stories.ts

@@ -1,9 +1,9 @@
 import { action } from '@storybook/addon-actions';
 
-import * as STANDARD_ELEMENT from '@/types/Element';
-import * as STANDARD_PRIORITY from '@/types/Priority';
 import TideButtonIcon from '@/components/TideButtonIcon.vue';
+import * as STANDARD_ELEMENT from '@/types/Element';
 import { ICON } from '@/types/Icon';
+import * as STANDARD_PRIORITY from '@/types/Priority';
 import {
   argTypeBooleanUnrequired,
   click,

package/src/stories/TideButtonPagination.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 
-import * as STANDARD_ELEMENT from '@/types/Element';
 import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import * as STANDARD_ELEMENT from '@/types/Element';
 import {
   argTypeBooleanUnrequired,
   click,

package/src/stories/TideCard.stories.ts

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
 
 import TideCard from '@/components/TideCard.vue';
-import { ICON } from '@/types/Icon';
 import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
+import { ICON } from '@/types/Icon';
 import {
   argTypeBooleanUnrequired,
   click,

package/src/stories/TideCarousel.stories.ts

@@ -1,11 +1,11 @@
 import { action } from '@storybook/addon-actions';
 
-import type { StoryContext } from '@storybook/vue3';
-
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
 import { argTypeBooleanUnrequired, change, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 

package/src/stories/TideColumns.stories.ts

@@ -1,8 +1,8 @@
-import type { StoryContext } from '@storybook/vue3';
-
 import TideColumns from '@/components/TideColumns.vue';
 import { lineBreak, tab } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 

package/src/stories/TideDivider.stories.ts

@@ -1,5 +1,5 @@
-import { ORIENTATION as STANDARD_ORIENTATION } from '@/types/Orientation';
 import TideDivider from '@/components/TideDivider.vue';
+import { ORIENTATION as STANDARD_ORIENTATION } from '@/types/Orientation';
 import { disabledArgType, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
 const formatArgs = (args: any) => {

package/src/stories/TideIcon.stories.ts

@@ -1,6 +1,6 @@
+import TideIcon from '@/components/TideIcon.vue';
 import { ICON as STANDARD_ICON, ICON_REALM as STANDARD_ICON_REALM } from '@/types/Icon';
 import * as STANDARD_SIZE from '@/types/Size';
-import TideIcon from '@/components/TideIcon.vue';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
 const ICON = prependNoneAsUndefined({ ...STANDARD_ICON, ...STANDARD_ICON_REALM.RV });

package/src/stories/TideImage.stories.ts

@@ -1,11 +1,10 @@
-import type { StoryContext } from '@storybook/vue3';
-
-import type { Source } from '@/types/Source';
-
 import TideImage from '@/components/TideImage.vue';
 import { MEDIA } from '@/types/Breakpoint';
 import { argTypeBooleanUnrequired } from '@/utilities/storybook';
 
+import type { Source } from '@/types/Source';
+import type { StoryContext } from '@storybook/vue3';
+
 const sources: Source[] = [
   {
     media: MEDIA.XL,

package/src/stories/TideInputSelect.stories.ts

@@ -1,7 +1,5 @@
 import { action } from '@storybook/addon-actions';
 
-import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-
 import TideInputSelect from '@/components/TideInputSelect.vue';
 import {
   argTypeBooleanUnrequired,
@@ -13,6 +11,8 @@ import {
   parameters,
 } from '@/utilities/storybook';
 
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+
 const options = {
   'Any': '',
   'Option 1': 1,

package/src/stories/TideInputText.stories.ts

@@ -1,9 +1,9 @@
 import { action } from '@storybook/addon-actions';
 
+import TideInputText from '@/components/TideInputText.vue';
 import * as STANDARD_FORMAT from '@/types/Formatted';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_TEXT_INPUT_TYPE from '@/types/TextInput';
-import TideInputText from '@/components/TideInputText.vue';
 import { VALIDATOR } from '@/types/Validation';
 import {
   argTypeBooleanUnrequired,

package/src/stories/TideLink.stories.ts

@@ -1,11 +1,9 @@
 import { action } from '@storybook/addon-actions';
 
-import type { StoryContext } from '@storybook/vue3';
-
+import TideLink from '@/components/TideLink.vue';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_LINK_SIZE from '@/types/Storybook';
-import TideLink from '@/components/TideLink.vue';
 import {
   argTypeBooleanUnrequired,
   click,
@@ -15,6 +13,8 @@ import {
   prependNoneAsUndefined,
 } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 const LINK_SIZE = prependNoneAsUndefined(STANDARD_LINK_SIZE.LINK_SIZE);

package/src/stories/TideModal.stories.ts

@@ -1,11 +1,11 @@
 import { action } from '@storybook/addon-actions';
 
-import type { StoryContext } from '@storybook/vue3';
-
 import TideButton from '@/components/TideButton.vue';
 import TideModal from '@/components/TideModal.vue';
 import { disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
 
+import type { StoryContext } from '@storybook/vue3';
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 

package/src/stories/TidePagination.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 
-import * as STANDARD_ELEMENT from '@/types/Element';
 import TidePagination from '@/components/TidePagination.vue';
+import * as STANDARD_ELEMENT from '@/types/Element';
 import {
   argTypeBooleanUnrequired,
   change,

package/src/stories/TideSeoLinks.stories.ts

@@ -1,8 +1,7 @@
-import type { StoryContext } from '@storybook/vue3';
+import TideSeoLinks from '@/components/TideSeoLinks.vue';
 
 import type { Link } from '@/types/Link';
-
-import TideSeoLinks from '@/components/TideSeoLinks.vue';
+import type { StoryContext } from '@storybook/vue3';
 
 const links: Link[] = new Array(12).fill({}).map((link, index) => {
   return {

package/src/stories/TideTabs.stories.ts

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 
-import type { Tab } from '@/types/Tab';
-
 import TideTabs from '@/components/TideTabs.vue';
 import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
 
+import type { Tab } from '@/types/Tab';
+
 /* eslint-disable */
 // ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
 const options = {

package/src/types/Realm.ts

@@ -3,7 +3,7 @@ export const REALM = {
   ATV: 'atv',
   BOATMART: 'boatmart',
   CYCLE: 'cycle',
-  EQUIP: 'equip',
+  EQUIPMENT: 'equipment',
   PWC: 'pwc',
   RV: 'rv',
   SNOW: 'snow',

package/src/utilities/storybook.ts

@@ -1,8 +1,9 @@
-import type { ArgTypes, StoryContext } from '@storybook/vue3';
-
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { formatKebabCase } from '@/utilities/format';
+
+import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
 // Extensible object of key/value pairs
 type KeyValue = { [key: string]: any };
@@ -12,8 +13,6 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
-import { formatKebabCase } from '@/utilities/format';
-
 export const lineBreak = '\r';
 export const tab = '  ';
 

package/src/utilities/validation.ts

@@ -1,11 +1,10 @@
-import type { Ref } from 'vue';
+import { priceToNumber } from '@/utilities/format';
 
 import type { RangeData } from '@/types/FacetRange';
-import type { SelectOption } from '@/types/Select';
 import type { StringInput } from '@/types/Form';
+import type { SelectOption } from '@/types/Select';
 import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
-
-import { priceToNumber } from '@/utilities/format';
+import type { Ref } from 'vue';
 
 export const errorMessageDefault = 'Please enter a valid value.';
 

package/vite.config.ts

@@ -1,9 +1,9 @@
 import vue from '@vitejs/plugin-vue';
-import svgLoader from 'vite-svg-loader';
-import ViteDts from 'vite-plugin-dts';
-import { defineConfig } from 'vite';
-import { fileURLToPath, URL } from 'node:url';
+import { URL, fileURLToPath } from 'node:url';
 import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import ViteDts from 'vite-plugin-dts';
+import svgLoader from 'vite-svg-loader';
 
 // https://vitejs.dev/config/
 export default defineConfig({