tide-design-system 2.2.4 → 2.2.6

package/src/assets/css/utilities.css

@@ -369,17 +369,10 @@
 .tide-text-transform-none  {text-transform: none;}
 .tide-text-transform-upper {text-transform: uppercase;}
 
-.tide-underline,
-.tide-underline:hover,
-.tide-underline-hover:hover {
-  text-decoration: underline;
-}
-
-.tide-underline-none,
-.tide-underline-none:hover,
-.tide-underline-hover {
-  text-decoration: none;
-}
+.tide-underline                  {text-decoration: underline;}
+.tide-underline-none             {text-decoration: none;}
+.tide-underline-hover:hover      {text-decoration: underline;}
+.tide-underline-hover-none:hover {text-decoration: none;}
 
 .tide-visible      {visibility: visible;}
 .tide-visible-none {visibility: hidden;}

package/src/components/TideAlert.vue

@@ -1,49 +1,33 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
-
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ALERT } from '@/types/Alert';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
+  import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
   import type { Alert } from '@/types/Alert';
-  import type { Icon } from '@/types/Icon';
 
   type Props = {
     heading?: string;
+    isDismissible?: boolean;
     isToast?: boolean;
     type?: Alert;
   };
 
+  type Emits = {
+    (event: 'close'): void;
+  };
+
   const props = withDefaults(defineProps<Props>(), {
     heading: undefined,
+    isDismissible: true,
     isToast: false,
     type: ALERT.INFO,
   });
 
-  const icon = computed(() => {
-    let icon: Icon = ICON.INFO;
-
-    switch (props.type) {
-      case ALERT.ERROR:
-        icon = ICON.ERROR;
-        break;
-      default:
-      case ALERT.INFO:
-        icon = ICON.INFO;
-        break;
-      case ALERT.SUCCESS:
-        icon = ICON.CHECK;
-        break;
-      case ALERT.WARNING:
-        icon = ICON.WARNING;
-        break;
-    }
-
-    return icon;
-  });
+  const emit = defineEmits<Emits>();
 </script>
 
 <template>
@@ -55,17 +39,21 @@
       CSS.AXIS2.CENTER,
       CSS.BORDER.RADIUS.HALF,
       CSS.PADDING.FULL.ONE,
-      props.type === ALERT.ERROR && CSS.BG.GLOBAL.SURFACE.ERROR,
-      props.type === ALERT.INFO && CSS.BG.GLOBAL.SURFACE.INFO,
-      props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.SURFACE.SUCCESS,
-      props.type === ALERT.WARNING && CSS.BG.GLOBAL.SURFACE.WARNING,
-      props.isToast ? CSS.SHADOW.BOTTOM : '',
+      !props.isToast && props.type === ALERT.ERROR ? [CSS.BG.GLOBAL.SURFACE.ERROR, CSS.BORDER.COLOR.GLOBAL.ERROR] : '',
+      !props.isToast && props.type === ALERT.INFO ? [CSS.BG.GLOBAL.SURFACE.INFO, CSS.BORDER.COLOR.GLOBAL.INFO] : '',
+      !props.isToast && props.type === ALERT.SUCCESS
+        ? [CSS.BG.GLOBAL.SURFACE.SUCCESS, CSS.BORDER.COLOR.GLOBAL.SUCCESS]
+        : '',
+      !props.isToast && props.type === ALERT.WARNING
+        ? [CSS.BG.GLOBAL.SURFACE.WARNING, CSS.BORDER.COLOR.GLOBAL.WARNING]
+        : '',
+      props.isToast ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY, CSS.SHADOW.BOTTOM] : CSS.BORDER.LEFT.TWO,
     ]"
   >
     <div
       :class="[
         'tide-alert-icon',
-        CSS.PADDING.FULL.HALF,
+        CSS.PADDING.FULL.QUARTER,
         CSS.BORDER.RADIUS.FULL,
         CSS.FONT.COLOR.SURFACE.INVERSE,
         props.type === ALERT.ERROR && CSS.BG.GLOBAL.PRIMARY.ERROR,
@@ -73,12 +61,16 @@
         props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.PRIMARY.SUCCESS,
         props.type === ALERT.WARNING && CSS.BG.GLOBAL.PRIMARY.WARNING,
       ]"
+      v-if="!props.isToast"
     >
-      <TideIcon :icon="icon" />
+      <TideIcon
+        :icon="ICON.INFORMATION"
+        :size="SIZE.SMALL"
+      />
     </div>
 
     <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER]">
-      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+      <h2 :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
         {{ props.heading }}
       </h2>
     </div>
@@ -87,10 +79,12 @@
       :class="['tide-alert-close', CSS.AXIS2.CENTER, CSS.FONT.COLOR.SURFACE.DEFAULT]"
       :icon="ICON.CLOSE"
       :priority="PRIORITY.QUATERNARY"
+      @click="emit('close')"
       aria-label="Close alert"
+      v-if="isDismissible"
     />
 
-    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, CSS.FONT.COLOR.SURFACE.VARIANT]">
+    <div :class="['tide-alert-body', CSS.FONT.ROLE.LABEL_1, !props.isToast && CSS.FONT.COLOR.SURFACE.VARIANT]">
       <slot />
     </div>
   </div>

package/src/components/TideButton.vue

@@ -42,7 +42,7 @@
       'tide-button',
       props.priority && `tide-button-${props.priority}`,
       props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
-      props.element === ELEMENT.LINK ? CSS.UNDERLINE.OFF : '',
+      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],
       CSS.AXIS1.CENTER,

package/src/components/TideButtonIcon.vue

@@ -36,7 +36,7 @@
       props.element === ELEMENT.LINK ? 'tide-link-as-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.OFF] : '',
+      props.element === ELEMENT.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
     :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"

package/src/components/TideButtonPagination.vue

@@ -24,7 +24,7 @@
     :class="[
       props.element === ELEMENT_TEXT_AS_ICON.LINK ? 'tide-link-as-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.OFF] : '',
+      props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
       props.element === ELEMENT_TEXT_AS_ICON.DIV ? [CSS.CURSOR.POINTER] : '',
       [CSS.FONT.ROLE.HEADLINE_3],
     ]"

package/src/components/TideChipAction.vue

@@ -29,7 +29,7 @@
       CSS.BG.SURFACE.DEFAULT,
       CSS.FONT.ROLE.LINK_2,
       CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.UNDERLINE.OFF,
+      CSS.UNDERLINE.REST.OFF,
     ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"

package/src/components/TideLink.vue

@@ -14,6 +14,7 @@
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
+    subtle?: boolean;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -23,12 +24,20 @@
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
+    subtle: false,
   });
 </script>
 
 <template>
   <component
-    :class="['tide-link', CSS.DISPLAY.INLINE, CSS.UNDERLINE.ON, CSS.ALIGN.X.LEFT]"
+    :class="[
+      'tide-link',
+      CSS.DISPLAY.INLINE,
+      CSS.ALIGN.X.LEFT,
+      subtle
+        ? [CSS.FONT.WEIGHT.FOUR_HUNDRED, CSS.UNDERLINE.REST.OFF, CSS.UNDERLINE.HOVER.ON]
+        : [CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.UNDERLINE.REST.ON, CSS.UNDERLINE.HOVER.OFF],
+    ]"
     :href="props.href"
     :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
     :is="props.element === ELEMENT.LINK ? ELEMENT.LINK : ELEMENT.BUTTON"

package/src/components/TideModal.vue

@@ -76,7 +76,7 @@
     :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
     ref="modalDialog"
     :style="{ '--modal-width': props.width }"
-    @click.self="emit('close')"
+    @click.self="triggerNativeDialogClose"
     @close="emit('close')"
   >
     <div

package/src/components/TideSeoLinks.vue

@@ -27,7 +27,7 @@
         v-for="link in props.links"
       >
         <a
-          :class="[CSS.UNDERLINE.OFF]"
+          :class="[CSS.UNDERLINE.REST.OFF]"
           :href="link.url"
           :target="link.isNewTab ? TARGET.BLANK : TARGET.SELF"
         >

package/src/docs/development.md

@@ -1,7 +1,6 @@
 # TIDE Development
 
-## Local Integration
-Run a local instance of `tide-design-system` in parallel with a local consumer project to preview changes prior to publishing a revision to the NPM Registrty.
+## Setup
 
 1. Clone repository:
 
@@ -17,35 +16,143 @@ Run a local instance of `tide-design-system` in parallel with a local consumer p
 
     `npm build`
 
-4. From TIDE directory, create local package alias:
-
-    `npm link`
-
-5. From consumer directory. leverage local package alias:
-
-   `npm link tide-design-system`
-
 ## Scripts
 -  `npm run build`: Generate package.
 -  `npm run build-storybook`: Generate Storybook UI.
 -  `npm run coverage`: Display unit test statistics.
--  `npm run lint`: Display ESLint issues.
+-  `npm run lint`: Detect ESLint issues.
 -  `npm run lint:fix`: Autofix ESLint issues where available.
+-  `npm run precommit`: Run all linting, type-checking, and testing commands.
 -  `npm run preview`: Serve Storybook UI in production mode.
 -  `npm run storybook`: Serve Storybook UI in development mode.
 -  `npm run test`: Run unit test suite.
 -  `npm run type-check`: Detect TypeScript errors.
 
-## Publication (TIDE Task Force devs only)
-1. Test via local integration (see above)
-2. Increment version
+## Workflow
+
+1. Develop the indicated TIDE structures in the TIDE repository as normal.
+    - `src/components/TideSample.vue`
+    - `src/types/Sample.ts`
+    - `src/utilities/sample.ts`
+2. Thoroughly test the solution:
+   1. Via Storybook (Required):
+      1. Develop the relevant Storybook story:
+
+           - `src/stories/TideSample.stories.ts`
+      2. Serve the Storybook interface locally:
+
+            `npm run storybook`
+
+      3. Thoroughly test all arg selections both in isolation and in combination and verify that both the Canvas and the Code Snippet accurately reflect the correct implementation.
+   2. Via Sandbox App
+
+        Apart from locally serving the TIDE Storybook interface, you can also develop a local, temporary proof-of-concept that instantiates the structure under development, then serve the project locally to verify.
+
+      1. Open the top-level Sandbox App component:
+
+            `src/contexts/sandbox/AppSandbox.vue`
+      2. Explicitly import the local structures (unlike importing from external dependency):
+
+            `import TideSample from '@/components/TideSample.vue';`
+      3. Instantiate the structures:
+
+            `<TideSample />`
+      4. Serve the Sandbox App locally:
+
+            `npm run dev`
+   3. Via NPM Link
+      1. From the local instance of TIDE repository, create local package alias:
+
+            `npm link`
+      2. From the local instance of the consumer repository, leverage local package alias:
+
+        `npm link tide-design-system`
+      3. Run the local instance of `tide-design-system`.
+      4. Run the local instance of the consumer repository.
+      5. Visit the local instance of the consumer repository in the browser as normal. All structures imported from the `tide-design-system` dependency will now reflect the local instance.
+   4. Via Unit Tests (Strongly encouraged).
+      1. Develop relevant unit tests:
+        - `tests/tide-sample.spec.ts`
+        - `tests/utilities-sample.spec.ts`
+      2. Run all unit tests:
+
+            `npm run test`
+
+         1. Verify that all tests passed.
+         2. Verify that no tests were skipped.
+         3. Verify that there were no errors.
+      3. Check test coverage:
+
+            `npm run coverage`
+3. Open a GitHub pull request from the ticket branch to the `main` branch of the TIDE repository.
+   1. All TIDE repository pull requests require one approval from a TIDE repository admin.
+   2. Once approved, a TIDE repository admin will merge the pull request, assign it a milestone, and update the status of the relevant Jira ticket to `Merged`, then reassign it to themselves pending publication.
+
+## Publication (TIDE Tech Lead only)
+1. Test via local integration (see above).
+2. Determine new version via custom semantic versioning rules:
+
+   1. `#` Redesign/rebranding release (RESTRICTED)
+   2. `#.#` Non-backward compatible bugfix or feature
+   3. `#.#.#` Backward compatible bugfix or feature
+
+   - Numerical pattern will be used for configuration: `#.#.#`
+   - Alphanumeric pattern will be used for naming: `v#.#.#`
+3. Check out the current commit from the trunk:
 
-   \# Non-backward compatible release
+    `git checkout upstream/main`
 
-   #.# Backward compatible feature
+4. Create a new local branch based on the alphanumeric version:
 
-   #.#.# Backward compatible bugfix
+    `git checkout -b v#.#.#`
+
+5. Manually update the `version` property in `package.json` to reflect the numeric version.
+6. Update `package-lock.json` in parallel:
+
+   `npm install`
+
+7. Verify that only the 2 files mentioned above have been modified:
+
+    `git status`
+
+8. Verify that the diffset is correct:
+
+   `git diff`
+
+9. Verify that all linting, type-checks, and unit tests pass:
+
+    `npm run precommit`
+
+10. Stage all local changes for commit:
+
+   `git add .`
+
+11. Commit the staged changes with a message matching the standard release message format:
+
+    `npm commit -m 'Release v#.#.#'`
+
+12. Push the branch to the `traderinteractive/tide-design-system` repository:
+
+   `git push upstream v#.#.#`
+
+13. Open a [pull request](https://github.com/traderinteractive/tide-design-system/compare) in GitHub from the release branch to the `main` branch.
+14. Create a [milestone](https://github.com/traderinteractive/tide-design-system/milestones) in GitHub based on the alphanumeric version.
+   1. Assign milestone to the pull request for the release.
+   2. Assign milestone to all merged pull requests since previous release.
+15. Merge the pull request.
+    1.  Source branch will be removed from Github automatically.
+16. From local TIDE clone, check out the new commit from the trunk:
+
+    `npm checkout upstream/main`
+
+17. Deploy to Netlify:
+
+    `git push origin main`
+
+18. Generate distribution files:
+
+    `npm build`
 
-3. Publish (RESTRICTED)
+19. Publish (RESTRICTED)
 
     `npm publish`

package/src/docs/figma.md

@@ -0,0 +1,43 @@
+# TIDE Figma
+
+## Workflow
+
+All Jira tickets with frontend changes should adhere to the following process:
+
+1. The designer should make a branch from the current state of the Figma project and make the necessary modifications leveraging the existing tokens and components wherever possible.
+2. Prior to development, the Figma branch should be reviewed, approved, and merged by the TIDE team in conjunction with the Director of Product Design.
+3. The "Designer" field of the Jira ticket should indicate the design resource assigned to the task. The designer is an equal contributor to the product triad and should be involved in all conversations about evolving frontend requirements.
+4. The URL for the relevant portion(s) of the Figma mock should be provided in the Jira ticket description.
+
+## How to read the Figma
+
+1. If correctly implemented, Figma designs should reflect standard tokens and components that correspond to code structures that can be leveraged to implement the design quickly and easily in code.
+   1. [Foundations](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=3-3118&p=f&m=dev) should correspond to CSS utilities in the TIDE repository.
+   2. [Basic Components](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=4-3140&p=f&m=dev) should correspond to Vue 3 components in the TIDE repository.
+   3. [Complex Components](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=8-14&p=f&m=dev) should correspond to Vue 3 components that leverage TIDE components to build custom features within a consumer repository.
+2. If designs deviate from the documented TIDE standards, the developer should consult with the leadership triad of their product team to maximize consistency and resuability, then resubmit for TIDE review.
+
+## Links
+- [TIDE 1.0](https://www.figma.com/design/PFLodBQswv35AvYNEK0rv1/TIDE-1.0?node-id=401-3973&p=f&m=dev) (deprecated)
+- [TIDE 2.0](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)
+- [Interactions](https://www.figma.com/design/O0HapROvypnCHahGDMyoJq/Interactions---TIDE-2.0?node-id=0-1&p=f&m=dev)
+- Realm Libraries (color palette, etc.)
+  - [Aero](https://www.figma.com/design/UHmUU8P3FCfREv4SdOWt8L/Aero-Trader-Library---Web?node-id=1-216&p=f&m=dev)
+  - [ATV](https://www.figma.com/design/J5uusYhIq1GKrKpaUh4uGC/ATV-Trader-Library---Web?node-id=91-22&m=dev)
+  - [Boatmart](https://www.figma.com/design/hZ6xlyXOSJQdUmZ1WOdjUa/Boatmart-Library---Web?node-id=2-9&p=f&m=dev)
+  - [Cycle](https://www.figma.com/design/tPHRaoCkP3MS0C6q4K0XuQ/Equipment-Trader-Library---Web?node-id=0-1&p=f&m=dev)
+  - [Equipment](https://www.figma.com/design/tPHRaoCkP3MS0C6q4K0XuQ/Equipment-Trader-Library---Web?node-id=0-1&p=f&m=dev)
+  - [PWC](https://www.figma.com/design/4BoMdEBqLTAVx0IOWDCpBT/PWC-Trader-Library---Web?node-id=0-1&p=f&m=dev)
+  - [RV](https://www.figma.com/design/LSJpTgYLwsXW96ZmUGDVHB/RV-Trader-Library---Web?node-id=2-9&p=f&m=dev)
+  - [Snow](https://www.figma.com/design/SxVJ74VAErFuBRHc6e7iTm/Snowmobile-Trader-Library---Web)
+  - [Truck](https://www.figma.com/design/kcmuhXLGfFelG7gj3ebQoT/Commercial-Truck-Trader-Library---Web?node-id=0-1&p=f&m=dev)
+- Realm mocks
+  - [Aero](https://www.figma.com/files/1343962252732090517/project/251440029/Aero-Trader?fuid=1208507152973260209)
+  - [ATV](https://www.figma.com/design/rt84qhxyzEMvLGovmNTZQK/ATV-Trader?node-id=0-1&p=f&m=dev)
+  - [Boatmart](https://www.figma.com/design/zwzKQtnJwfQAeUllHAn5jx/Boatmart-Redesign---TIDE-2.0?node-id=0-1&p=f&m=dev)
+  - [Cycle](https://www.figma.com/design/x7mySD8gH42Go6hASy2ul9/Cycle-Trader?node-id=0-1&p=f&m=dev)
+  - [Equipment](https://www.figma.com/design/McrrkfAtqY1BxKLcAsjBGa/Equipment-Trader?node-id=0-1&p=f&m=dev)
+  - [PWC](https://www.figma.com/design/KTxisNAv9E6UbkFXxP8gNx/PWC-PAA?node-id=29-929&p=f&m=dev)
+  - [RV](https://www.figma.com/design/MBAdyd0UBIRL75bxvgOBF8/RV-Trader?node-id=0-1&p=f&m=dev)
+  - [Snow](https://www.figma.com/design/l6xlDEnyREuK9uCBonwDVY/Snowmobile-Trader-PAA?node-id=25-944&p=f&m=dev)
+  - [Truck](https://www.figma.com/design/1daIdHURI0GkMjbEEjdurO/Commercial-Truck-Trader?node-id=0-1&p=f&m=dev)

package/src/docs/integration-full.md

@@ -0,0 +1,80 @@
+# TIDE Full Integration
+1. Install dependency from NPM registry:
+
+   `npm install tide-design-system`
+
+2. Use CSS utilities:
+   1. Import global utilities:
+
+      `import 'tide-design-system/css';`
+
+   2. Import realm-specific utilities (where applicable):
+      - `import 'tide-design-system/css/realm/aero';`
+      - `import 'tide-design-system/css/realm/atv';`
+      - `import 'tide-design-system/css/realm/boatmart';`
+      - `import 'tide-design-system/css/realm/cycle';`
+      - `import 'tide-design-system/css/realm/equipment';`
+      - `import 'tide-design-system/css/realm/pwc';`
+      - `import 'tide-design-system/css/realm/snow';`
+      - `import 'tide-design-system/css/realm/truck';`
+
+   3. Import TypeScript CSS constant:
+
+      `import { CSS } from 'tide-design-system';`
+
+   4. Leverage CSS utilities via TypeScript CSS constant:
+
+      `<div :class="[CSS.POSITION.ABSOLUTE]" />`
+
+   5. Leverage *responsive* CSS utilities via TypeScript constant:
+      ```
+      <div
+        :class=[
+            CSS.MARGIN.FULL.QUARTER,
+            CSS.withBreakpoint([CSS.MARGIN.FULL.HALF], BREAKPOINT.SM),
+            CSS.withBreakpoint([CSS.MARGIN.FULL.ONE], BREAKPOINT.MD),
+            CSS.withBreakpoint([CSS.MARGIN.FULL.TWO], BREAKPOINT.LG),
+            CSS.withBreakpoint([CSS.MARGIN.FULL.FOUR], BREAKPOINT.XL),
+         ]
+      />
+      ```
+
+3. Use TypeScript types:
+   1. Import:
+
+      `import type { Priority } from 'tide-design-system';`
+
+   2. Leverage:
+
+      ```
+      type Sample = {
+         ...
+         priority: Priority;
+      };
+      ```
+
+      ```
+      const setPriority = (priority: Priority) => {...};
+      ```
+
+4. Use TypeScript constants:
+   1. Import:
+
+      `import { PRIORITY } from 'tide-design-system';`
+
+   2. Leverage:
+
+      `<div :priority="PRIORITY.QUATERNARY">Sample</div>`
+
+5. Use Vue 3 components:
+   1. Import:
+
+      `import { TideButton } from 'tide-design-system';`
+
+   2. Leverage:
+
+      `<TideButton label="Sample" />`
+
+6. Storybook
+
+   Working implementations of TIDE utilities and components can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Using Storybook](./src/docs/storybook.md#using-storybook) for details.

package/src/docs/integration-partial.md

@@ -0,0 +1,42 @@
+# TIDE Partial Integration
+1. Install dependency from NPM registry:
+
+   `npm install tide-design-system`
+
+2. Use CSS utilities:
+   1. Import global utilities one of two ways:
+      1. All inclusive:
+
+          `import 'node_modules/tide-design-system/dist/css/main.css';`
+
+      2. Cherry-picked:
+          - `import 'node_modules/tide-design-system/dist/css/main.css';`
+          - `import 'node_modules/tide-design-system/dist/css/fonts.css';`
+          - `import 'node_modules/tide-design-system/dist/css/reset.css';`
+          - `import 'node_modules/tide-design-system/dist/css/variables.css';`
+          - `import 'node_modules/tide-design-system/dist/css/utilities.css';`
+          - `import 'node_modules/tide-design-system/dist/css/utilities-sm.css';`
+          - `import 'node_modules/tide-design-system/dist/css/utilities-md.css';`
+          - `import 'node_modules/tide-design-system/dist/css/utilities-lg.css';`
+          - `import 'node_modules/tide-design-system/dist/css/utilities-xl.css';`
+          - `import 'node_modules/tide-design-system/dist/css/dynamic-buttons.css';`
+          - `import 'node_modules/tide-design-system/dist/css/dynamic-utilities.css';`
+          - `import 'node_modules/tide-design-system/dist/css/grid-layout.css';`
+   2. Import realm-specific utilities (where applicable):
+      - `import 'node_modules/tide-design-system/dist/css/realm/aero.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/atv.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/boatmart.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/cycle.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/equipment.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/pwc.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/snow.css';`
+      - `import 'node_modules/tide-design-system/dist/css/realm/truck.css';`
+
+   3. Leverage CSS utiities:
+
+         `<div class="tide-position-absolute" />`
+
+   4. Leverage responsive CSS utilities:
+
+         `<div class="tide-position-relative md-tide-position-absolute" />`
+3. Working implementations of TIDE utilities can be dynamically-generated from the publicly-served [Storybook](https://tide-design-system.netlify.app) interface layer of the TIDE repository. See [Utilities](./src/docs/storybook.md#utilities) under [Using Storybook](./src/docs/storybook.md#using-storybook) for details.

package/src/docs/migration.md

@@ -0,0 +1,65 @@
+# TIDE Migration
+The first implementation of the TIDE Design System was developed directly within the `marketplace` repository in parallel with a comprehensive redesign/rebuild of the entire frontend of the 3-page core site (Homepage, Search Results Page, Vehicle Detail Page). When TIDE matured into TIDE 2.0 and was reinvisioned as an NPM package many months later, it was decided that development would continue on redesign/rebuild without a specific effort to replace the initial implementation to the modernized approach. As such, these migrations are being undertaken piecemeal as developer availability permits.
+
+## Goals
+1. All frontend structures within the `marketplace` repository that implement TIDE utilities, components, or supporting structures will, over time, be moved, adapted, or recreated in the TIDE repository.
+2. Structures to be migrated:
+   1. Vue 3 components
+   2. TypeScript types
+   3. JavaScript/TypeScript utilities
+   4. CSS utilities
+   5. Unit tests
+
+## Workflow
+As TIDE structures become available in the TIDE repository, the TIDE team will work to identify redundant structures within the `marketplace` repository, create tickets detailing the work to reimplement these structures, and work with the relevant product teams to determine priority and ownership of these tasks.
+
+1. Update imports:
+
+    ❌ TIDE 1.0
+    ```
+    import BasicSample from '@/components-core/BasicSample.vue';
+    import { SAMPLE } from '@/types/Sample';
+    import { getSample } from '@/utilities/sample';
+
+    import type { Sample } from '@/types/Sample';
+    ```
+
+    ✅ TIDE 2.0
+    ```
+    import {
+      BasicSample,
+      SAMPLE,
+      getSample,
+    } from 'tide-design-system';
+
+    import type { Sample } from 'tide-design-system';
+    ```
+2. Update all instances of component(s) under migration:
+
+    **Note**: TIDE 2.0 props, slots, emits, and other structures may not correspond 1:1 with their TIDE 1.0 counterparts. See [Storybook](https://tide-design-system.netlify.app/) for the proper implementation of a TIDE 2.0 utility or component.
+
+
+    ❌ TIDE 1.0
+    `<BasicSample />`
+
+    ✅ TIDE 2.0
+    `<TideSample />`
+3. Delete orphaned components:
+
+    `git rm frontend/src/components-core/BasicSample.vue`
+
+4.  Delete orphaned types:
+
+    `git rm frontend/src/types/Sample.ts`
+
+5.  Delete orphaned utilities:
+
+    `git rm frontend/src/utilities/sample.ts`
+
+6.  Delete orphaned unit tests:
+    - `git rm frontend/tests/components/BasicSample.spec.ts`
+    - `git rm frontend/tests/BasicSample.spec.ts`
+    - `git rm frontend/tests/utilities-sample.spec.ts`
+
+7.  Delete unused [JS constants](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/types/Styles.ts) (CSS_OLD)
+8.  Delete unused [CSS utilities](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/assets/css/utilities.css)