tide-design-system 2.5.13 → 2.5.15

package/docs/integration-full.md

@@ -1,84 +0,0 @@
-# TIDE Full Integration
-1. Install dependency from NPM registry:
-
-   `npm install tide-design-system --save-exact`
-
-   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
-
-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';`
-
-      Note: See the [TypeScript CSS constant](../types/Styles.ts) for full details.
-
-   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](./docs/storybook.md#using-storybook) for details.

package/docs/integration-partial.md

@@ -1,39 +0,0 @@
-# TIDE Partial Integration
-1. Install dependency from NPM registry:
-
-   `npm install tide-design-system --save-exact`
-
-   Note: This will install TIDE **without a caret range**, which requires that the dependency be **upgraded manually**, as our [custom semantic versioning](./development.md#publication-tide-tech-lead-only) rules and distribution of QA resources dictate that consumer repositories must thoroughly test for breaking changes during the upgrade process.
-
-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/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/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" />`
-
-      Note: See the [CSS utilities](../assets/css/utilities.ts) for full details.
-
-   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](./docs/storybook.md#utilities) under [Using Storybook](./docs/storybook.md#using-storybook) for details.

package/docs/migration.md

@@ -1,74 +0,0 @@
-# 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
-
-## Status
-1. The [legacy code](https://github.com/traderinteractive/marketplace) at the top level of the `marketplace` repository uses a [partial integration](./integration-partial.md) of TIDE, making the CSS utilities available globally.
-   1. Dependency controlled by the top level config: [package.json](https://github.com/traderinteractive/marketplace/blob/qa/package.json). **Version must be upgraded manually.**
-   2. Integration controlled by the [Gulp build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Agulpfile.js&type=code).
-2. The [redesign code](https://github.com/traderinteractive/marketplace/tree/qa/frontend) within the `/frontend` subdirectory of the `marketplace` repository uses a [full integration](./integration-full.md) of TIDE, making both the CSS utilities and Vue 3 components available for import from any Vue 3 file.
-   1. Dependency controlled by the nested config: [/frontend/package.json](https://github.com/traderinteractive/marketplace/blob/qa/frontend/package.json). **Version must be upgraded manually.**
-   2. Integration controlled by the [Vite build](https://github.com/search?q=repo%3Atraderinteractive%2Fmarketplace%20tide%20path%3Afrontend%2Fvite.config.ts&type=code).
-
-## 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)
-9.  Run `npm run precommit` from the `/frontend` directory to identify (and potentially autofix) any ESLint, TypeScript, and/or Vitest issues, as the build server will reject any source branch that contains syntax violations or failing unit tests.

package/docs/storybook.md

@@ -1,44 +0,0 @@
-# TIDE Storybook
-[Storybook](https://tide-design-system.netlify.app) is a third-party frontend interface for providing dynamic, integrated documentation for custom UI components and styles in isolation.
-
-## Benefits
-The TIDE Storybook was implemented to facilitate collaboration between departments within the Trader Interactive development group:
-- **Product Managers** can reference TIDE utilities and components when writing requirements for new pages and features.
-- **Designers** can interact with TIDE utilities and components in real browser conditions independent from any specific business context.
-- **Developers** can dynamically leverage components without having to become reacquinted with formatting standards, styling structures, or complex prop implementations.
-- **QA Engineers** can compare changes under test to the intended design and behavior of TIDE structures absent the context of a consumer repository.
-
-## Hosting
-TIDE Storybook is currently publicly hosted via Netlify, a free, third-party platform connected to a fork of the TIDE repository. This is a temporary measure, to be replaced by a permanent solution that integrates the private server deployment process directly into the `traderinteractive` GitHub account for hosting to users within the Trader VPN.
-
-## Local Setup
-1. Install dependencies:
-
-   `npm install`
-
-2. Run demo:
-
-   `npm run storybook`
-
-## Storybook UI
-1. **Sidebar** serves as table of contents along the left edge of the screen.
-2. **Toolbar** offers project-level controls across the top of the screen.
-3. **Canvas** contains an interactive demo.
-4. **Code Snippet** displays live-updated markup implementation available to copy.
-5. **Controls** determine the options passed into demo and code snippet.
-6. **Stories** demonstrate all major features of a given structure.
-
-## Using Storybook
-### Utilities
-1. Visit the [Storybook](https://tide-design-system.netlify.app) site.
-2. Select the relevant utility from the Sidebar.
-3. Use the Controls table to modify the options to reflect Jira requirements and/or Figma mock.
-4. The Canvas panel is updated dynamically to reflect the options as implemented via the CSS utility classes.
-5. The Code Snippet panel (activated by clicking the "Show code" button) is updated dynamically to demonstrate the correct implementation of the CSS utilities.
-
-### Components
-1. Visit the [Storybook](https://tide-design-system.netlify.app) site.
-2. Select the relevant component from the Sidebar.
-3. Use the Controls table to modify the options to reflect Jira requirements and/or Figma mock.
-4. The Canvas panel is updated dynamically to demonstrate an interactive implementation of the correct component variant.
-5. The Code Snippet panel (activated by clicking the "Show code" button) is updated dynamically to demonstrate the correct implementation of the TIDE component.

package/docs/style-guide.md

@@ -1,22 +0,0 @@
-# TIDE Marketplace Style Guides
-Each redesign realm has an unlinked, yet publicly-accessible Style Guide page that demonstrates the styling and behavior of all major TIDE styles and components in a realm-specific production environment.
-
-## Benefits
-The TIDE Marketplace Style Guides were implemented to facilitate collaboration between departments within the Trader Interactive development group:
-- **Product Managers** can quickly review which TIDE structures are already integrated into the `marketplace` repository.
-- **Designers** can quickly verify that TIDE structures accurately reflect the designs.
-- **Developers** can quickly view the standard implementation of any given structure as both source code and distributed code.
-- **QA Engineers** can quickly verify that the design and behavior of TIDE structures have not been unintentionally altered by a dependency upgrade under test.
-
-## Links
-- Current redesign realms:
-  - [ATV](https://www.atvtrader.com/style-guide)
-  - [Boatmart](https://www.boatmart.com/style-guide)
-  - [RV](https://www.rvtrader.com/style-guide)
-- Forthcoming redesign realms:
-  - [Aero](https://www.aerotrader.com/style-guide)
-  - [Cycle](https://www.cycletrader.com/style-guide)
-  - [Equipment](https://www.equipmenttrader.com/style-guide)
-  - [PWC](https://www.pwctrader.com/style-guide)
-  - [Snow](https://www.snowmobiletrader.com/style-guide)
-  - [Truck](https://www.commercialtrucktrader.com/style-guide)

package/docs/toast.md

@@ -1,61 +0,0 @@
-# TIDE Toaster
-
-A global toast notification system for TIDE applications.
-
----
-
-## Setup
-
-Place the `<TideToaster />` component once at the top level of your app (for example, in `app.vue`).
-
-You must also initialize the toaster at the root so it is properly provided to the entire app tree.
-
-```vue
-<script setup lang="ts">
-import { useTideToaster } from 'tide-design-system';
-
-// Initialize and provide the toaster at the app root
-useTideToaster();
-</script>
-
-<template>
-  <NuxtRouteAnnouncer />
-  <NuxtPage />
-  <TideToaster />
-</template>
-```
-
----
-
-## Using the Composable
-
-You can trigger toasts from anywhere in your application using the `useTideToaster` composable.
-
-```ts
-import { useTideToaster } from 'tide-design-system';
-
-const { addToast, clearToasts } = useTideToaster();
-
-// Pop an informational toast
-addToast({
-  heading: 'Saved',
-  description: 'Your changes have been saved.',
-});
-
-// Pop an actionable toast
-addToast({
-  heading: 'Undo changes?',
-  description: 'You can revert this action.',
-  action: {
-    label: 'Undo',
-    callback: () => {
-      // handle undo
-    },
-  },
-});
-
-// Manually clear the current toast
-clearToasts();
-```
-
-> Note: Only one toast is displayed at a time. Calling `addToast` will clear any existing toast before showing the new one.

package/docs/token-cheatsheet.md

@@ -1,63 +0,0 @@
-# TIDE Figma Token Cheatsheet
-
-## Terminology
-- [**Figma Token**](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev): the name that appears in the "Layer properties" section of the right sidebar when inspecting an element of a Figma mock
-- [**JS Constant**](../src/types/Styles.ts): the standard JavaScript structure to use when implementing a TIDE Figma token from within a JS file and/or framework (`.vue`, `.ts`, `.js`)
-- [**CSS Utility**](../src/assets/css/utilities-base.css): the CSS class to use when implementing a TIDE Figma token from **legacy** frameworks (`.html`, `.php`, `.phtml`).
-
-## Typography
-|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)|
-|-|-|-|
-|Role/Display/Display 1|`CSS.FONT.ROLE.DISPLAY_1`|`tide-typography-display-1`|
-|Role/Headline/Headline 1|`CSS.FONT.ROLE.HEADLINE_1`|`tide-typography-headline-1`|
-|Role/Headline/Headline 2|`CSS.FONT.ROLE.HEADLINE_2`|`tide-typography-headline-2`|
-|Role/Headline/Headline 3|`CSS.FONT.ROLE.HEADLINE_3`|`tide-typography-headline-3`|
-|Role/Title/Title 1|`CSS.FONT.ROLE.TITLE_1`|`tide-typography-title-1`|
-|Role/Title/Title 2|`CSS.FONT.ROLE.TITLE_2`|`tide-typography-title-2`|
-|Role/Body/Body 1*|`CSS.FONT.ROLE.BODY_1`|`tide-typography-body-1`|
-|Role/Body/Body 2|`CSS.FONT.ROLE.BODY_2`|`tide-typography-body-2`|
-|Role/Label/Label 1|`CSS.FONT.ROLE.LABEL_1`|`tide-typography-label-1`|
-|Role/Label/Label 1 Semibold|`CSS.FONT.ROLE.LABEL_1_SEMIBOLD`|`tide-typography-label-1-semibold`|
-|Role/Label/Label 2|`CSS.FONT.ROLE.LABEL_2`|`tide-typography-label-2`|
-|Role/Label/Label 2 Semibold|`CSS.FONT.ROLE.LABEL_2_SEMIBOLD`|`tide-typography-label-2-semibold`|
-|Role/Label/Label 3|`CSS.FONT.ROLE.LABEL_3`|`tide-typography-label-3`|
-|Role/Link/Link 1|`CSS.FONT.ROLE.LINK_1`|`tide-typography-link-1`|
-|Role/Link/Link 2|`CSS.FONT.ROLE.LINK_2`|`tide-typography-link-2`|
-|Role/Button/Button 1|`CSS.FONT.ROLE.BUTTON_1`|`tide-typography-button-1`|
-|Role/Button/Button 2|`CSS.FONT.ROLE.BUTTON_2`|`tide-typography-button-2`|
-
-\* **Body/Body 1** is applied to all site text by default in the [CSS Reset](../src/assets/css/reset.css), so it doesn't need to be specified unless overriding an inherited font role.
-
-## Color
-
-### Background Color
-|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
-|-|-|-|
-|Colors/Primary/Primary|`CSS.BG.PRIMARY`|`tide-bg-primary`|
-|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-bg-secondary`|
-|Colors/Surface/Surface|`CSS.BG.SURFACE.DEFAULT`|`tide-bg-surface`|
-|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
-|Colors/Surface/Surface brand|`CSS.BG.SURFACE.BRAND`|`tide-bg-surface-brand`|
-|Colors/Surface/Surface accent|`CSS.BG.SURFACE.ACCENT`|`tide-bg-surface-accent`|
-|Colors/Surface/Surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-bg-surface-variant`|
-|Colors/Surface/Surface gradient|`CSS.BG.SURFACE.GRADIENT`|`tide-bg-surface-gradient`|
-|Colors/Surface/Surface floating|`CSS.BG.SURFACE.FLOATING`|`tide-bg-surface-floating`|
-
-### Border Color
-|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
-|-|-|-|
-|Colors/Border/Border|`CSS.BORDER.COLOR.DEFAULT`|`tide-border`|
-|Colors/Border/Border low|`CSS.BORDER.COLOR.LOW`|`tide-border-low`|
-|Colors/Border/Border high|`CSS.BORDER.COLOR.HGIH`|`tide-border-high`|
-|Colors/Border/Border floating|`CSS.BORDER.COLOR.FLOATING`|`tide-border-floating`|
-
-### Font Color
-|[Figma Token](https://www.figma.com/design/9oYSAyY2X9mPaUMiobZOPg/Design-System---TIDE-2.0?node-id=0-1&p=f&m=dev)|[JS Constant](../src/types/Styles.ts)|[CSS Utility](../src/assets/css/utilities-base.css)
-|-|-|-|
-|Colors/Primary/On primary|`CSS.BG.PRIMARY`|`tide-font-on-primary`|
-|Colors/Secondary/Secondary|`CSS.BG.SECONDARY`|`tide-font-on-secondary`|
-|Colors/Surface/On surface|`CSS.BG.SURFACE.DEFAULT`|`tide-font-on-surface`|
-|Colors/Surface/On surface brand|`CSS.BG.SURFACE.BRAND`|`tide-font-on-surface-brand`|
-|Colors/Surface/On surface inverse|`CSS.BG.SURFACE.INVERSE`|`tide-font-on-surface-inverse`|
-|Colors/Surface/On surface variant|`CSS.BG.SURFACE.VARIANT`|`tide-font-on-surface-variant`|
-|Colors/Surface/On surface variant inverse|`CSS.BG.SURFACE.VARIANT_INVERSE`|`tide-font-on-surface-variant-inverse`|

package/docs/upgrading.md

@@ -1,188 +0,0 @@
-# Upgrading Versions
-
-This document provides step-by-step instructions for upgrading from previous versions of the library.
-
----
-
-## Upgrading from 2.4 → 2.5
-
-### What changed?
-
-TIDE **2.5** updates several *stateful* components to use Vue’s `v-model` for two-way binding. This replaces each component’s old “value prop + change emit” pattern.
-
-Affected components:
-
-- `TideAccordionItem`
-- `TideButtonSegmented`
-- `TideChipFilter`
-- `TideModal`
-- `TideSheet`
-- `TideSwitch`
-
-### How to migrate
-
-#### 1. Replace old props with `v-model`
-
-| Component | v2.4 prop | v2.5+ |
-|---|---|---|
-| TideAccordionItem | `:is-expanded` | `v-model` |
-| TideButtonSegmented | `:active-tab` | `v-model` |
-| TideChipFilter | `:is-active` | `v-model` |
-| TideModal | `:is-open` | `v-model` |
-| TideSheet | `:is-open` | `v-model` |
-| TideSwitch | `:is-active` | `v-model` |
-
-##### 2.4 example
-
-```
-<TideButtonSegmented
-  :active-tab="active"
-  @change="active = $event"
-/>
-```
-
-##### 2.5+
-
-``` vue
-<TideButtonSegmented v-model="active" />
-```
-
-#### 2. Replace old emits with `@update:modelValue`
-
-| Component | Old emit | New emit |
-|---|---|---|
-| TideAccordionItem | `@toggle` | `@update:modelValue` |
-| TideButtonSegmented | `@change` | `@update:modelValue` |
-| TideChipFilter | `@click` | `@update:modelValue` |
-| TideModal | `@close` | `@update:modelValue` |
-| TideSheet | `@close` | `@update:modelValue` |
-| TideSwitch | `@change` | `@update:modelValue` |
-
-Use this only for **side effects**, not basic value updates.
-
-Or use Vue’s `watch()`:
-
-``` ts
-watch(active, doSomething);
-```
-
-### Handling cancellable modals (new API)
-
-**2.4** used `@close` + manual logic.
-
-**2.5+** introduces `:before-close`, which cancels dismissal if it returns `false`.
-
-```
-<TideModal
-  v-model="isOpen"
-  :before-close="() => {
-    if (!confirm('Close modal?')) return false;
-  }"
->
-```
-
-✅ After these changes your project should be compatible with **TIDE 2.5**.
-
-## Upgrading from 2.4.5 → 2.4.6
-
-### Summary
-
-Version **2.4.6** introduced a Nuxt SSR incompatibility. From **2.4.6**, TideModal uses Vue `<Teleport />` to place modal content in `#tide-top-layer`. This is not a problem in CSR apps, but [Nuxt SSR only provides support for one teleport target](https://nuxt.com/docs/4.x/api/components/teleports#:~:text=in%20the%20DOM.-,The,wrapper.,-Body%20Teleport). The default id on this teleport target is `#teleports`.
-
-### Migration steps
-
-Update the `teleportId` value within the Nuxt config to `tide-top-layer`.
-
-``` ts
-// nuxt.config.ts
-export defineNuxtConfig({
-  app: {
-    teleportId: 'tide-top-layer',
-  }
-});
-```
-
-Alternatively you can use the `teleportAttrs` config value.
-
-``` ts
-// nuxt.config.ts
-export defineNuxtConfig({
-  app: {
-    teleportAttrs: {
-      id: 'tide-top-layer',
-    },
-  }
-});
-```
-
-See [Nuxt Configuration docs](https://nuxt.com/docs/4.x/api/nuxt-config#teleportid).
-
-✅ After these changes your project should be compatible with TIDE 2.4.6.
-
-## Upgrading from 2.3 → 2.4
-
-### Summary
-
-Version **2.4** introduces a new suite of form components. It remains largely backward-compatible with the previous versions of components, but requires an update to a number of component names. It also removes a number of form-related TS exports.
-
-### Migration steps
-
-1. **Convert component names**
-
-These components have been changed, and must be renamed as follows:
-
-| Old name (2.3) | New name (2.4) |
-|---|---|
-| `<TideInputCheckbox />` | `<TideInputCheckboxDeprecated />` |
-| `<TideInputRadio />` | `<TideInputRadioDeprecated />` |
-| `<TideInputSelect />` | `<TideInputSelectDeprecated />` |
-| `<TideInputText />` | `<TideInputTextDeprecated />` |
-| `<TideInputTextarea />` | `<TideInputTextareaDeprecated />` |
-
-The components are otherwise identical.
-
-2. **Replace usage of removed types**
-
-The following types are no longer exported from the TIDE repository and must be replaced:
-- `BooleanInput`
-- `BooleanValue`
-- `CheckboxField`
-- `CheckboxInput`
-- `Field`
-- `GenericField`
-- `GenericInput`
-- `Input`
-- `SelectField`
-- `SelectInput`
-- `StringField`
-- `StringInput`
-- `StringValue`
-- `TextField`
-- `TextareaField`
-- `TextareaInput`
-
-✅ After these changes your project should be compatible with **TIDE 2.4**.
-
-## Upgrading from 2.2 → 2.3
-
-### Summary
-Version **2.3** consolidates certain CSS files. The same utilities can now be made globally available in a TIDE consumer repository leveraging [partial integration](./integration-partial.md) by cherry-picking a smaller set of `dist` files from the `node_modules` subdirectory.
-
-**Important:** Upgrading to **2.3** introduces breaking changes unless deprecated imports are removed.
-
-### Migration steps
-
-1. **Remove deprecated imports**  
-    Delete any imports that match:
-    ```css
-    node_modules/tide-design-system/dist/css/utilities-*.css
-    node_modules/tide-design-system/dist/css/dynamic-*.css
-    ```
-
-2. **Use the consolidated file**  
-    All utilities are now declared in:
-    ```css
-    node_modules/tide-design-system/dist/css/utilities.css
-    ```
-
-✅ After these changes your project should be compatible with **TIDE 2.3**.

package/docs/workflows.md

@@ -1,20 +0,0 @@
-# TIDE Collaborative Workflows
-
-## TIDE-first development
-
-1. Identify a ticket on your product team's Jira backlog that has a dependency on an approved TIDE structure not yet present in the TIDE repository.
-2. Contact the TIDE team via the [#ti-marketplaces-design-system-public](https://cargroup.enterprise.slack.com/archives/C08TEFUUE4X) Slack channel to discuss the dependency and to determine whether a TIDE ticket already exists in Jira or must be created, then mark the dependent ticket as `blocked by` the TIDE ticket via Jira's `Add > Linked work item` feature.
-3. The TIDE team will estimate and prioritize the ticket and pull it into a TIDE sprint accordingly.
-4. Once pulled into a sprint, the TIDE team will develop, peer review, test, and merge a new branch into the TIDE repository, then publish a new version of the `tide-design-system` package to the NPM registry.
-5. The TIDE team will notify the owners of the dependent ticket that the blockage has been removed.
-6. From the consumer repository, manually upgrade the dependency to the latest version of the `tide-design-system` package, then develop, peer review, test, and release the dependent ticket in the consumer repository as normal.
-
-## Consumer-first development
-
-1. Develop, peer review, test, and release the proposed TIDE structures in a consumer repository as with any other Jira task.
-2. Create a ticket in the [TIDE Jira backlog](https://traderinteractive.atlassian.net/jira/software/c/projects/TIDE/boards/1092/backlog) identifying the relevant structures and requesting that they be migrated/adapted into the TIDE repository.
-3. Post a message in the [#ti-marketplaces-design-system-public](https://cargroup.enterprise.slack.com/archives/C08TEFUUE4X) Slack channel to make the TIDE team aware of the proposal.
-4. The TIDE team will review the proposal.
-   1. If accepted, the TIDE team will prioritize the ticket for development and release.
-   2. If not accepted, the TIDE team will contact the reporter for additional discussion before closing the Jira ticket as `Won't Do`.
-5. Jira will automatically contact the Reporter of the ticket with relevant updates, including publication.

package/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>TIDE Sandbox</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 user-scalable=no"/>
-    <script src="src/contexts/sandbox/app-sandbox.ts" type="module"></script>
-  </head>
-
-  <body>
-    <div id="app-sandbox" />
-  </body>
-</html>