tide-design-system 2.2.3 → 2.2.5

package/src/components/TideCarousel.vue

@@ -7,7 +7,9 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    bleed?: number;
     isFloating?: boolean;
+    isHeadline1?: boolean;
     isHideawayButtons?: boolean;
     isTouchscreen?: boolean;
     subtitle?: string;
@@ -15,7 +17,9 @@
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    bleed: undefined,
     isFloating: false,
+    isHeadline1: false,
     isHideawayButtons: true,
     isTouchscreen: undefined,
     subtitle: undefined,
@@ -24,18 +28,32 @@
 
   const emit = defineEmits(['change']);
 
-  const contentRef = ref();
-  const frameRef = ref();
+  const containerRef = ref();
 
   const contentRightEdge = ref();
   const contentWidth = ref();
   const currentSlide = ref(0);
   const frameWidth = ref();
   const hasOverflow = ref();
+  const isFirstSlide = ref();
   const isLastSlide = ref();
   const lastPosition = ref();
   const showButtons = ref();
 
+  const updateContainerBleed = () => {
+    if (props.bleed == undefined) return;
+
+    if (isLastSlide.value && showButtons.value) {
+      // Prevent gradient from bleeding off left edge in last position.
+      containerRef.value.style.margin = `-${props.bleed}px -${props.bleed}px -${props.bleed}px 0`;
+      containerRef.value.style.padding = `${props.bleed}px ${props.bleed}px ${props.bleed}px 0`;
+    } else {
+      // Prevent gradient from bleeding off right edge in first position.
+      containerRef.value.style.margin = `-${props.bleed}px 0 -${props.bleed}px -${props.bleed}px`;
+      containerRef.value.style.padding = `${props.bleed}px 0 ${props.bleed}px ${props.bleed}px`;
+    }
+  };
+
   /**
    * Measure the current slide based on the scroll
    * position of the frame. The current slide is
@@ -44,25 +62,30 @@
    */
   const measureCurrentSlide = () => {
     // Get left offset of each slide.
-    const slideOffsets = Array.from(contentRef.value.children).map((slide: any) => slide.offsetLeft);
+    const slideOffsets = Array.from(containerRef.value.children).map((slide: any) => slide.offsetLeft);
 
     if (slideOffsets.length === 0) return;
 
     // Get closest offset to current scroll position.
     const closestSlideOffset = slideOffsets.reduce((prev, curr) => {
-      return Math.abs(curr - frameRef.value.scrollLeft) < Math.abs(prev - frameRef.value.scrollLeft) ? curr : prev;
+      return Math.abs(curr - containerRef.value.scrollLeft) < Math.abs(prev - containerRef.value.scrollLeft)
+        ? curr
+        : prev;
     });
 
     currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
+
+    updateContainerBleed();
   };
 
   const measureDom = () => {
-    contentRightEdge.value = frameRef.value.scrollLeft + frameRef.value.clientWidth;
-    contentWidth.value = contentRef.value.scrollWidth;
-    frameWidth.value = frameRef.value.clientWidth;
+    contentRightEdge.value = containerRef.value.scrollLeft + containerRef.value.clientWidth;
+    contentWidth.value = containerRef.value.scrollWidth;
+    frameWidth.value = containerRef.value.clientWidth;
     hasOverflow.value = contentWidth.value > frameWidth.value;
+    isFirstSlide.value = currentSlide.value === 0;
     isLastSlide.value = contentRightEdge.value === contentWidth.value;
-    lastPosition.value = frameRef.value.scrollWidth - frameRef.value.clientWidth;
+    lastPosition.value = containerRef.value.scrollWidth - containerRef.value.clientWidth;
     showButtons.value = hasOverflow.value && !props.isTouchscreen;
 
     measureCurrentSlide();
@@ -74,15 +97,15 @@
   };
 
   const scrollToSlide = (slideIndex: number) => {
-    frameRef.value.scrollTo({
+    containerRef.value.scrollTo({
       behavior: 'smooth',
-      left: contentRef.value.children[slideIndex].offsetLeft,
+      left: containerRef.value.children[slideIndex].offsetLeft,
     });
   };
 
   const showNextSlide = () => {
     if (contentRightEdge.value > contentWidth.value) {
-      frameRef.value.scrollTo({
+      containerRef.value.scrollTo({
         behavior: 'smooth',
         left: contentWidth,
       });
@@ -92,9 +115,7 @@
   };
 
   const showPreviousSlide = () => {
-    const isFirstSlide = currentSlide.value === 0;
-
-    if (!isFirstSlide) {
+    if (!isFirstSlide.value) {
       scrollToSlide(currentSlide.value - 1);
     }
   };
@@ -119,7 +140,14 @@
 
 <template>
   <section
-    :class="['tide-carousel', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.TWO, CSS.WIDTH.MAX_FULL]"
+    :class="[
+      'tide-carousel',
+      CSS.POSITION.RELATIVE,
+      CSS.DISPLAY.FLEX,
+      CSS.FLEX.DIRECTION.COLUMN,
+      CSS.GAP.TWO,
+      CSS.WIDTH.MAX_FULL,
+    ]"
     ref="carouselRef"
   >
     <section
@@ -131,7 +159,7 @@
         v-if="props.title || props.subtitle"
       >
         <div
-          :class="[CSS.FONT.ROLE.DISPLAY_1]"
+          :class="[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
           v-if="props.title"
         >
           {{ props.title }}
@@ -168,55 +196,62 @@
     <slot name="misc" />
 
     <div :class="[CSS.POSITION.RELATIVE]">
-      <div
-        :class="[CSS.SCROLLBAR.OFF, CSS.SNAP.ON, CSS.OVERFLOW.X.SCROLL, CSS.WIDTH.FULL]"
-        ref="frameRef"
-        @scroll="handleScroll"
-      >
-        <ul
-          :class="[CSS.DISPLAY.FLEX, CSS.GAP.ONE, CSS.LIST_BULLETS.OFF]"
-          ref="contentRef"
-        >
-          <slot />
-        </ul>
-      </div>
-
-      <div
+      <ul
         :class="[
-          'tide-carousel-button-overlay',
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.TOP,
+          'tide-carousel-container',
           CSS.DISPLAY.FLEX,
-          CSS.AXIS1.BETWEEN,
-          CSS.AXIS2.CENTER,
-          CSS.WIDTH.FULL,
-          CSS.HEIGHT.FULL,
-          CSS.POINTER_EVENTS.OFF,
-          props.isHideawayButtons ? 'hideaway' : '',
+          CSS.GAP.ONE,
+          CSS.LIST_BULLETS.OFF,
+          CSS.OVERFLOW.X.SCROLL,
+          CSS.SCROLLBAR.OFF,
+          CSS.SNAP.ON,
         ]"
-        v-if="isFloating && showButtons"
+        ref="containerRef"
+        @scroll="handleScroll"
       >
-        <TideButtonIcon
-          :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="currentSlide === 0"
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="showPreviousSlide"
-        />
+        <slot />
+      </ul>
+    </div>
 
-        <TideButtonIcon
-          :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="isLastSlide"
-          :icon="ICON.CHEVRON_RIGHT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="showNextSlide"
-        />
-      </div>
+    <div
+      :class="[
+        'tide-carousel-button-overlay',
+        CSS.POSITION.ABSOLUTE,
+        CSS.POSITIONING.TOP,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.BETWEEN,
+        CSS.AXIS2.CENTER,
+        CSS.WIDTH.FULL,
+        CSS.HEIGHT.FULL,
+        CSS.POINTER_EVENTS.OFF,
+        props.isHideawayButtons ? 'hideaway' : '',
+      ]"
+      v-if="isFloating && showButtons"
+    >
+      <TideButtonIcon
+        :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
+        :disabled="currentSlide === 0"
+        :icon="ICON.CHEVRON_LEFT"
+        :priority="PRIORITY.QUATERNARY"
+        @click="showPreviousSlide"
+      />
+
+      <TideButtonIcon
+        :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
+        :disabled="isLastSlide"
+        :icon="ICON.CHEVRON_RIGHT"
+        :priority="PRIORITY.QUATERNARY"
+        @click="showNextSlide"
+      />
     </div>
   </section>
 </template>
 
 <style scoped>
+  .tide-carousel-container {
+    transition: margin var(--tide-animate), padding var(--tide-animate);
+  }
+
   .tide-carousel-button-overlay.hideaway {
     opacity: 0;
   }

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.