diff --git a/migration-roadmap/avatar.md b/migration-roadmap/avatar.md
new file mode 100644
index 0000000000..e39fe2dc90
--- /dev/null
+++ b/migration-roadmap/avatar.md
@@ -0,0 +1,217 @@
+# Avatar migration roadmap
+
+## Component specifications
+
+### CSS
+
+<details>
+<summary>CSS selectors</summary>
+
+**Root class**: `.spectrum-Avatar`
+
+**Elements**:
+
+- `.spectrum-Avatar-image`
+- `.spectrum-Avatar-link`
+
+**States**:
+
+- `.spectrum-Avatar.is-disabled`
+- `.spectrum-Avatar.is-focused:not(.is-disabled):after`
+- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`
+
+**Variants**:
+
+- `.spectrum-Avatar--size50`
+- `.spectrum-Avatar--size75`
+- `.spectrum-Avatar--size100`
+- `.spectrum-Avatar--size200`
+- `.spectrum-Avatar--size300`
+- `.spectrum-Avatar--size400`
+- `.spectrum-Avatar--size500`
+- `.spectrum-Avatar--size600`
+- `.spectrum-Avatar--size700`
+- `.spectrum-Avatar--size800`
+- `.spectrum-Avatar--size900`
+- `.spectrum-Avatar--size1000`
+- `.spectrum-Avatar--size1100`
+- `.spectrum-Avatar--size1200`
+- `.spectrum-Avatar--size1300`
+- `.spectrum-Avatar--size1400`
+- `.spectrum-Avatar--size1500`
+
+</details>
+
+<details>
+<summary>Passthroughs</summary>
+
+None found for this component.
+
+</details>
+
+<details>
+<summary>Modifiers *deprecated*</summary>
+
+- `--mod-avatar-block-size`
+- `--mod-avatar-border-radius`
+- `--mod-avatar-color-opacity`
+- `--mod-avatar-color-opacity-disabled`
+- `--mod-avatar-focus-indicator-color`
+- `--mod-avatar-focus-indicator-gap`
+- `--mod-avatar-focus-indicator-thickness`
+- `--mod-avatar-inline-size`
+
+</details>
+
+### SWC
+
+<details>
+<summary>Attributes</summary>
+
+- `src` (string) - Source URL for the avatar image
+- `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700)
+- `href` (string) - Link URL when avatar is clickable
+- `label` (string) - Alt text for the avatar image
+- `disabled` (boolean) - Whether the avatar is disabled
+
+Note that other link-related attributes are available on the base `LikeAnchor` class, such as `download`, `href`, `referrerpolicy`, `rel`, `target`, and `type` but are not necessarily applicable to the avatar component and so not listed out explicitly here.
+
+</details>
+
+<details>
+<summary>Slots</summary>
+
+None found for this component.
+
+</details>
+
+## Comparison
+
+### DOM Structure changes
+
+<details>
+<summary>Spectrum Web Components</summary>
+
+```html
+<!-- With link -->
+<a id="link" class="link" href="[href]">
+    <img class="image" alt="[label]" src="[src]" />
+</a>
+
+<!-- Without link -->
+<img class="image" alt="[label]" src="[src]" />
+```
+
+</details>
+
+<details>
+<summary>Legacy (CSS main branch)</summary>
+
+```html
+<!-- With link -->
+<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
+    <a class="spectrum-Avatar-link" href="#">
+        <img
+            class="spectrum-Avatar-image"
+            data-chromatic="ignore"
+            src="[image]"
+            alt="[altText]"
+        />
+    </a>
+</div>
+
+<!-- Without link -->
+<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
+    <img
+        class="spectrum-Avatar-image"
+        data-chromatic="ignore"
+        src="[image]"
+        alt="[altText]"
+    />
+</div>
+```
+
+</details>
+
+<details>
+<summary>Spectrum 2 (CSS spectrum-two branch)</summary>
+
+```html
+<!-- With link -->
+<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
+    <a class="spectrum-Avatar-link" href="#">
+        <img
+            class="spectrum-Avatar-image"
+            data-chromatic="ignore"
+            src="[image]"
+            alt="[altText]"
+        />
+    </a>
+</div>
+
+<!-- Without link -->
+<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled is-focused">
+    <img
+        class="spectrum-Avatar-image"
+        data-chromatic="ignore"
+        src="[image]"
+        alt="[altText]"
+    />
+</div>
+```
+
+</details>
+
+<details>
+<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
+
+No significant structural changes.
+
+</details>
+
+### CSS => SWC mapping
+
+| CSS selector                 | Attribute or slot    | Status                                   |
+| ---------------------------- | -------------------- | ---------------------------------------- |
+| `.spectrum-Avatar--size50`   | `size="50"`          | Implemented                              |
+| `.spectrum-Avatar--size75`   | `size="75"`          | Implemented                              |
+| `.spectrum-Avatar--size100`  | `size="100"`         | Implemented                              |
+| `.spectrum-Avatar--size200`  | `size="200"`         | Implemented                              |
+| `.spectrum-Avatar--size300`  | `size="300"`         | Implemented                              |
+| `.spectrum-Avatar--size400`  | `size="400"`         | Implemented                              |
+| `.spectrum-Avatar--size500`  | `size="500"`         | Implemented                              |
+| `.spectrum-Avatar--size600`  | `size="600"`         | Implemented                              |
+| `.spectrum-Avatar--size700`  | `size="700"`         | Implemented                              |
+| `.spectrum-Avatar-image`     | `src` attribute      | Implemented                              |
+| `.spectrum-Avatar-link`      | `href` attribute     | Implemented                              |
+| `.is-focused`                | Focus state          | Implemented                              |
+| `.is-disabled`               | `disabled` attribute | Implemented                              |
+| `.spectrum-Avatar--size800`  | `size="800"`         | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size900`  | `size="900"`         | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1000` | `size="1000"`        | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1100` | `size="1100"`        | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1200` | `size="1200"`        | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1300` | `size="1300"`        | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1400` | `size="1400"`        | Missing from WC (new size in Spectrum 2) |
+| `.spectrum-Avatar--size1500` | `size="1500"`        | Missing from WC (new size in Spectrum 2) |
+
+## Summary of changes
+
+### CSS => SWC implementation gaps
+
+**CSS features missing from Web Component:**
+
+- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
+
+**Web Component features missing from CSS:**
+None found for this component.
+
+### CSS Spectrum 2 changes
+
+No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the avatar component structure remains consistent across Spectrum 2 migration.
+
+## Resources
+
+- [CSS migration](https://github.com/adobe/spectrum-css/pull/3355)
+- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-avatar--docs)
+- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/avatar--docs)
diff --git a/migration-roadmap/opacity-checkerboard.md b/migration-roadmap/opacity-checkerboard.md
new file mode 100644
index 0000000000..761e1af8e3
--- /dev/null
+++ b/migration-roadmap/opacity-checkerboard.md
@@ -0,0 +1,135 @@
+# Opacity Checkerboard migration roadmap
+
+## Component specifications
+
+### CSS
+
+<details>
+<summary>CSS selectors</summary>
+
+**Root class**: `.spectrum-OpacityCheckerboard`
+
+**Variants**:
+
+- `.spectrum-OpacityCheckerboard--sizeS`
+
+</details>
+
+<details>
+<summary>Passthroughs</summary>
+
+None found for this component.
+
+</details>
+
+<details>
+<summary>Modifiers *deprecated*</summary>
+
+- `--mod-opacity-checkerboard-dark`
+- `--mod-opacity-checkerboard-light`
+- `--mod-opacity-checkerboard-position`
+- `--mod-opacity-checkerboard-size`
+
+</details>
+
+### SWC
+
+<details>
+<summary>Attributes</summary>
+
+None found for this component. This is a utility component used by other components.
+
+</details>
+
+<details>
+<summary>Slots</summary>
+
+None found for this component. This is a utility component used by other components.
+
+</details>
+
+## Comparison
+
+### DOM Structure changes
+
+<details>
+<summary>Spectrum Web Components</summary>
+
+```html
+<!-- Used as a utility class in other components -->
+<div class="opacity-checkerboard">
+    <!-- Content -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Legacy (CSS main branch)</summary>
+
+```html
+<div
+    class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
+    style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
+    role="[role]"
+    id="[id]"
+>
+    <!-- Content -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Spectrum 2 (CSS spectrum-two branch)</summary>
+
+```html
+<div
+    class="spectrum-OpacityCheckerboard spectrum-OpacityCheckerboard--sizeS"
+    style="--mod-opacity-checkerboard-position: [backgroundPosition]; [customStyles]"
+    role="[role]"
+    id="[id]"
+>
+    <!-- Content -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
+
+No significant structural changes.
+
+</details>
+
+### CSS => SWC mapping
+
+| CSS selector                           | Attribute or slot | Status                 |
+| -------------------------------------- | ----------------- | ---------------------- |
+| `.spectrum-OpacityCheckerboard`        | Utility class     | Implemented as utility |
+| `.spectrum-OpacityCheckerboard--sizeS` | Size variant      | Implemented as utility |
+
+## Summary of changes
+
+### CSS => SWC implementation gaps
+
+**CSS features missing from Web Component:**
+None found for this component. The opacity checkerboard is implemented as a utility class in the Web Components.
+
+**Web Component features missing from CSS:**
+None found for this component.
+
+### CSS Spectrum 2 changes
+
+No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the opacity checkerboard component structure remains consistent across Spectrum 2 migration.
+
+## Notes
+
+The opacity checkerboard is a utility component that provides a checkerboard pattern background to highlight transparency in other components. It's not a standalone component but rather a utility class that's used by components like thumbnail, swatch, and others to provide visual indication of transparency.
+
+## Resources
+
+- [CSS migration](https://github.com/adobe/spectrum-css/pull/3394)
+- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-opacity-checkerboard--docs)
+- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorslider--docs) (not a standalone component, but styles are used by the color slider)
diff --git a/migration-roadmap/swatch-group.md b/migration-roadmap/swatch-group.md
new file mode 100644
index 0000000000..34b2b8e4b4
--- /dev/null
+++ b/migration-roadmap/swatch-group.md
@@ -0,0 +1,143 @@
+# Swatch Group migration roadmap
+
+## Component specifications
+
+### CSS
+
+<details>
+<summary>CSS selectors</summary>
+
+**Root class**: `.spectrum-SwatchGroup`
+
+**Variants**:
+
+- **Density**:
+- `.spectrum-SwatchGroup--compact`
+- `.spectrum-SwatchGroup--spacious`
+
+</details>
+
+<details>
+<summary>Passthroughs</summary>
+
+- `--mod-swatch-border-opacity`
+
+</details>
+
+<details>
+<summary>Modifiers *deprecated*</summary>
+
+- `--mod-swatchgroup-spacing`
+
+</details>
+
+### SWC
+
+<details>
+<summary>Attributes</summary>
+
+- `border` (string) - Border style: 'light', 'none' **deprecated** (from Swatch component)
+- `density` (string) - Density: 'compact', 'spacious'
+- `rounding` (string) - Corner rounding: 'none', 'full'
+- `shape` (string) - Shape variant: 'rectangle' **note**: should this be combined with rounding?
+- `selected` (array) - Array of selected swatch values
+- `selects` (string) - Selection mode: 'single', 'multiple' **note**: does this need any unique styles designed for single or multi-select swatch groups?
+- `size` (string) - Size: 'xs', 's', 'm' (default), 'l'
+
+</details>
+
+<details>
+<summary>Slots</summary>
+
+- Default slot - Swatch elements to manage as a group
+
+</details>
+
+## Comparison
+
+### DOM Structure changes
+
+<details>
+<summary>Spectrum Web Components</summary>
+
+```html
+<slot @change="[handleChange]" @slotchange="[manageChange]">
+    <!-- Swatch elements -->
+</slot>
+```
+
+</details>
+
+<details>
+<summary>Legacy (CSS main branch)</summary>
+
+```html
+<div
+    class="spectrum-SwatchGroup spectrum-SwatchGroup--compact"
+    style="max-inline-size: [containerWidth]; size: calc([items.length] / 10 * 32px);"
+    id="[id]"
+>
+    <!-- Swatch elements -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Spectrum 2 (CSS spectrum-two branch)</summary>
+
+```html
+<div
+    class="spectrum-SwatchGroup spectrum-SwatchGroup--compact"
+    style="max-inline-size: [containerWidth]; size: calc([items.length] / 10 * 32px);"
+    id="[id]"
+>
+    <!-- Swatch elements -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
+
+No significant structural changes.
+
+</details>
+
+### CSS => SWC mapping
+
+| CSS selector                      | Attribute or slot    | Status                                                             |
+| --------------------------------- | -------------------- | ------------------------------------------------------------------ |
+| `.spectrum-SwatchGroup--compact`  | `density="compact"`  | Implemented                                                        |
+| `.spectrum-SwatchGroup--spacious` | `density="spacious"` | Implemented                                                        |
+| `.spectrum-SwatchGroup`           | Base component       | Implemented                                                        |
+| -                                 | `border` attribute   | **deprecated** (from Swatch component)                             |
+| -                                 | `rounding` attribute | See Swatch component                                               |
+| -                                 | `selected` state     | See Swatch component                                               |
+| -                                 | `selects` attribute  | No unique styles designed for single or multi-select swatch groups |
+| -                                 | `shape` attribute    | See Swatch component                                               |
+| -                                 | `size` attribute     | See Swatch component                                               |
+
+## Summary of changes
+
+### CSS => SWC implementation gaps
+
+**CSS features missing from Web Component:**
+None found for this component.
+
+**Web Component features missing from CSS:**
+
+None identified for this component.
+
+### CSS Spectrum 2 changes
+
+No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the swatch group component structure remains consistent across Spectrum 2 migration. Swatch group includes a setting for single or multiple selection and it might be worth connecting with design to see if there should be any unique styles designed that differentiates single or multi-select swatch groups.
+
+The border attribute is being removed from the group component as the border property is no longer customizable. The design direction is more opinionated for Spectrum 2 than it was for S1.
+
+## Resources
+
+- [CSS migration](https://github.com/adobe/spectrum-css/pull/3677)
+- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-swatch-group--docs)
+- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorswatchpicker--docs)
diff --git a/migration-roadmap/swatch.md b/migration-roadmap/swatch.md
new file mode 100644
index 0000000000..994a190844
--- /dev/null
+++ b/migration-roadmap/swatch.md
@@ -0,0 +1,246 @@
+# Swatch migration roadmap
+
+## Component specifications
+
+### CSS
+
+<details>
+<summary>CSS selectors</summary>
+
+**Root class**: `.spectrum-Swatch`
+
+**Elements**:
+
+- `.spectrum-Swatch:before`
+- `.spectrum-Swatch:after`
+- `.spectrum-Swatch-icon`
+- `.spectrum-Swatch-image`
+- `.spectrum-Swatch-disabledIcon` - visible only when the swatch is disabled
+    - `.spectrum-Swatch-disabledIcon path:first-child`
+    - `.spectrum-Swatch-disabledIcon path:last-child`
+- `.spectrum-Swatch-fill`
+    - `.spectrum-Swatch-fill:before`
+
+**Variants**:
+
+- **Rounding**:
+    - `.spectrum-Swatch--rectangle`
+    - `.spectrum-Swatch--roundingFull`
+    - `.spectrum-Swatch--roundingNone`
+- **Size**:
+    - `.spectrum-Swatch--sizeXS`
+    - `.spectrum-Swatch--sizeS`
+    - (medium is the default)
+    - `.spectrum-Swatch--sizeL`
+- `.is-addSwatch`
+- `.is-image`
+- `.is-mixedValue`
+- `.is-nothing`
+
+**States**:
+
+- `.is-disabled`, `[disabled]`
+- `.is-focused`, `:focus-visible`
+- `.is-keyboardFocused`
+- `.is-selected`
+- `.is-hover`, `:hover`
+- `.is-active`, `:active`
+
+</details>
+
+<details>
+<summary>Passthroughs</summary>
+
+None found for this component.
+
+</details>
+
+<details>
+<summary>Modifiers *deprecated*</summary>
+
+- `--mod-add-button-background`
+- `--mod-add-button-background-down`
+- `--mod-add-button-background-hover`
+- `--mod-add-button-background-keyboard-focus`
+- `--mod-animation-duration-100`
+- `--mod-corner-radius-full`
+- `--mod-mixed-button-background`
+- `--mod-swatch-border`
+- `--mod-swatch-border-color`
+- `--mod-swatch-border-color-selected`
+- `--mod-swatch-border-opacity`
+- `--mod-swatch-border-radius`
+- `--mod-swatch-border-thickness`
+- `--mod-swatch-border-thickness-selected`
+- `--mod-swatch-disabled-icon-color`
+- `--mod-swatch-disabled-icon-size`
+- `--mod-swatch-focus-indicator-color`
+- `--mod-swatch-focus-indicator-gap`
+- `--mod-swatch-focus-indicator-thickness`
+- `--mod-swatch-icon-border-color`
+- `--mod-swatch-icon-color`
+- `--mod-swatch-inner-border-color-selected`
+- `--mod-swatch-size`
+- `--mod-swatch-slash-icon-color`
+- `--mod-swatch-slash-thickness`
+
+</details>
+
+### SWC
+
+<details>
+<summary>Attributes</summary>
+
+- `border` (string) - Border style: 'light', 'none'
+- `color` (string) - Color value for the swatch
+- `label` (string) - Label for the swatch
+- `mixed-value` (boolean) - Whether the swatch represents a mixed value
+- `nothing` (boolean) - Whether the swatch represents no value
+- `role` (string) - ARIA role, defaults to 'button'
+- `rounding` (string) - Corner rounding: 'none', 'full'
+- `selected` (boolean) - Whether the swatch is selected
+- `shape` (string) - Shape variant: 'rectangle'
+- `size` (string) - Size: 'xs', 's', 'm', 'l'
+- `disabled` (boolean) - Whether the swatch is disabled
+- `value` (string) - Value of the swatch (computed from color or label)
+
+</details>
+
+<details>
+<summary>Slots</summary>
+
+- `image` slot - Image element for the swatch
+
+</details>
+
+## Comparison
+
+### DOM Structure changes
+
+<details>
+<summary>Spectrum Web Components</summary>
+
+```html
+<div class="opacity-checkerboard fill" style="--spectrum-picked-color: [color]">
+    <slot name="image"></slot>
+    <!-- Disabled icon SVG when disabled -->
+    <!-- Mixed value icon when mixed-value -->
+</div>
+```
+
+</details>
+
+<details>
+<summary>Legacy (CSS main branch)</summary>
+
+```html
+<div
+    class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingRegular is-selected is-disabled is-hover is-active is-keyboardFocused is-image is-mixedValue is-addSwatch spectrum-Swatch--rectangle is-nothing"
+    disabled
+    id="[id]"
+    style="--spectrum-picked-color: [swatchColor]"
+    tabindex="0"
+>
+    <!-- With image -->
+    <div class="spectrum-Swatch-fill">
+        <img src="[imageUrl]" alt="" class="spectrum-Swatch-image" />
+    </div>
+
+    <!-- Without image -->
+    <div class="spectrum-Swatch-fill">
+        <!-- Disabled icon SVG -->
+        <!-- Mixed value icon -->
+        <!-- Add swatch icon -->
+    </div>
+</div>
+```
+
+</details>
+
+<details>
+<summary>Spectrum 2 (CSS spectrum-two branch)</summary>
+
+```html
+<div
+    class="spectrum-Swatch spectrum-Swatch--sizeM spectrum-Swatch--roundingRegular is-selected is-disabled is-hover is-active is-keyboardFocused is-image is-mixedValue is-addSwatch spectrum-Swatch--rectangle is-nothing"
+    disabled
+    id="[id]"
+    style="--spectrum-picked-color: [swatchColor]"
+    tabindex="0"
+>
+    <!-- With image -->
+    <div class="spectrum-Swatch-fill">
+        <img src="[imageUrl]" alt="" class="spectrum-Swatch-image" />
+    </div>
+
+    <!-- Without image -->
+    <div class="spectrum-Swatch-fill">
+        <!-- Disabled icon SVG -->
+        <!-- Mixed value icon -->
+        <!-- Add swatch icon -->
+    </div>
+</div>
+```
+
+</details>
+
+<details>
+<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
+
+No significant structural changes.
+
+</details>
+
+### CSS => SWC mapping
+
+| CSS selector                     | Attribute or slot        | Status                                     |
+| -------------------------------- | ------------------------ | ------------------------------------------ |
+| `.spectrum-Swatch--sizeXS`       | `size="xs"`              | Implemented                                |
+| `.spectrum-Swatch--sizeS`        | `size="s"`               | Implemented                                |
+| `.spectrum-Swatch--sizeM`        | `size="m"`               | Implemented                                |
+| `.spectrum-Swatch--sizeL`        | `size="l"`               | Implemented                                |
+| `.spectrum-Swatch--roundingNone` | `rounding="none"`        | Implemented                                |
+| `.spectrum-Swatch--roundingFull` | `rounding="full"`        | Implemented                                |
+| `.spectrum-Swatch--rectangle`    | `shape="rectangle"`      | Implemented                                |
+| `.is-selected`                   | `selected` attribute     | Implemented                                |
+| `.is-disabled`                   | `disabled` attribute     | Implemented                                |
+| `.is-mixedValue`                 | `mixed-value` attribute  | Implemented                                |
+| `.spectrum-Swatch--lightBorder`  | `border` attribute       | **Deprecated**                             |
+| `.is-addSwatch`                  | Add swatch functionality | Missing from WC (new for S2)               |
+| `.is-nothing`                    | `nothing` attribute      | Implemented                                |
+| `.is-keyboardFocused`            | Focus state              | Implemented                                |
+| `.is-hover`, `:hover`            | Hover state              | Implemented                                |
+| `.is-active`, `:active`          | Active state             | Implemented                                |
+| `:focus-visible`                 | Focus styling            | Implemented                                |
+| `.is-image`                      | `image` slot not empty   | Might need additional hooks or logic in WC |
+| `.spectrum-Swatch-image`         | `image` slot             | Implemented                                |
+| `.spectrum-Swatch-fill`          | Internal wrapper         | Implemented                                |
+| `.spectrum-Swatch-icon`          | Icon elements            | Implemented                                |
+| `.spectrum-Swatch-disabledIcon`  | Disabled icon            | Implemented                                |
+| `.spectrum-Swatch:before`        | Pseudo-element styling   | Implemented                                |
+| `.spectrum-Swatch:after`         | Pseudo-element styling   | Implemented                                |
+
+## Summary of changes
+
+### CSS => SWC implementation gaps
+
+**CSS features missing from Web Component:**
+
+- Add swatch functionality (`.is-addSwatch`)
+- Image functionality (SWC has an image slot, but this may need additional updates to work properly)
+
+**Web Component features missing from CSS:**
+
+None found for this component.
+
+### CSS Spectrum 2 changes
+
+There is a new **add swatch** functionality in the `spectrum-two` branch and supplemental state and pseudo-element styling selectors in the `spectrum-two` branch which will automatically be applied when consumed by the web component for Spectrum 2.
+
+The light and no border variants have been removed. Individual swatches have a border set to `--spectrum-gray-1000` at 42% opacity, while the border opacity is set to 20% in swatch groups.
+
+## Resources
+
+- [CSS migration](https://github.com/adobe/spectrum-css/pull/3677)
+- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-swatch--docs)
+- [React](https://react-spectrum.adobe.com/s2/index.html?path=/docs/colorswatch--docs)
diff --git a/migration-roadmap/thumbnail.md b/migration-roadmap/thumbnail.md
new file mode 100644
index 0000000000..17e36916cb
--- /dev/null
+++ b/migration-roadmap/thumbnail.md
@@ -0,0 +1,280 @@
+# Thumbnail migration roadmap
+
+## Component specifications
+
+### CSS
+
+<details>
+<summary>CSS selectors</summary>
+
+**Root class**: `.spectrum-Thumbnail`
+
+**Elements**:
+
+- `.spectrum-Thumbnail:before`
+- `.spectrum-Thumbnail-image`
+- `.spectrum-Thumbnail-image-wrapper`
+- `.spectrum-Thumbnail-layer`
+- `.spectrum-Thumbnail-layer:before`
+- `.spectrum-Thumbnail-layer-inner`
+- `.spectrum-Thumbnail-background`
+
+**States**:
+
+- `.is-disabled`, `:disabled`
+- `.is-focused`, `:focus-visible`
+- `.is-selected` (attached to `.spectrum-Thumbnail-layer`, not to the root element)
+
+**Variants**:
+
+- **Size**:
+    - `.spectrum-Thumbnail--size50`
+    - `.spectrum-Thumbnail--size75`
+    - `.spectrum-Thumbnail--size100`
+    - `.spectrum-Thumbnail--size200`
+    - `.spectrum-Thumbnail--size300`
+    - `.spectrum-Thumbnail--size400`
+    - `.spectrum-Thumbnail--size500`
+    - `.spectrum-Thumbnail--size600`
+    - `.spectrum-Thumbnail--size700`
+    - `.spectrum-Thumbnail--size800`
+    - `.spectrum-Thumbnail--size900`
+    - `.spectrum-Thumbnail--size1000`
+
+- **Image cover**:
+    - `.spectrum-Thumbnail--cover`
+
+</details>
+
+<details>
+<summary>Passthroughs</summary>
+
+- `--mod-opacity-checkerboard-size`
+
+</details>
+
+<details>
+<summary>Modifiers *deprecated*</summary>
+
+- `--mod-thumbnail-border-color`
+- `--mod-thumbnail-border-color-selected`
+- `--mod-thumbnail-border-radius`
+- `--mod-thumbnail-border-width`
+- `--mod-thumbnail-border-width-selected`
+- `--mod-thumbnail-color-opacity-disabled`
+- `--mod-thumbnail-focus-indicator-color`
+- `--mod-thumbnail-focus-indicator-gap`
+- `--mod-thumbnail-focus-indicator-thickness`
+- `--mod-thumbnail-layer-border-color-inner`
+- `--mod-thumbnail-layer-border-color-outer`
+- `--mod-thumbnail-layer-border-width-inner`
+- `--mod-thumbnail-layer-border-width-outer`
+- `--mod-thumbnail-size`
+
+</details>
+
+### SWC
+
+<details>
+<summary>Attributes</summary>
+
+- `background` (string) - Background color or gradient for the thumbnail
+- `cover` (boolean) - Whether the image should cover the entire thumbnail
+- `layer` (boolean) - Whether the thumbnail is in layer mode
+- `size` (string) - Size of the thumbnail (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000)
+- `disabled` (boolean) - Whether the thumbnail is disabled
+- `selected` (boolean) - Whether the thumbnail is selected (used for layer variant)
+
+</details>
+
+<details>
+<summary>Slots</summary>
+
+- Default slot - Image element to present in the thumbnail
+
+</details>
+
+## Comparison
+
+### DOM Structure changes
+
+<details>
+<summary>Spectrum Web Components</summary>
+
+```html
+<!-- With background -->
+<div class="opacity-checkerboard background" style="background: [background]">
+    <div class="image-wrapper">
+        <slot></slot>
+    </div>
+</div>
+
+<!-- With layer -->
+<div class="opacity-checkerboard layer-inner">
+    <slot></slot>
+</div>
+
+<!-- Default -->
+<div class="opacity-checkerboard image-wrapper">
+    <slot></slot>
+</div>
+```
+
+</details>
+
+<details>
+<summary>Legacy (CSS main branch):</summary>
+
+```html
+<!-- Layer variant -->
+<div
+    class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div class="spectrum-Thumbnail-layer-inner">
+        <div class="spectrum-Thumbnail-image-wrapper">
+            <img
+                class="spectrum-Thumbnail-image"
+                src="[imageURL]"
+                alt="[altText]"
+            />
+        </div>
+    </div>
+</div>
+
+<!-- With background -->
+<div
+    class="spectrum-Thumbnail is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div
+        class="spectrum-Thumbnail-background"
+        style="background-color: [backgroundColor]"
+    ></div>
+    <div class="spectrum-Thumbnail-image-wrapper">
+        <img
+            class="spectrum-Thumbnail-image"
+            src="[imageURL]"
+            alt="[altText]"
+        />
+    </div>
+</div>
+
+<!-- Default -->
+<div
+    class="spectrum-Thumbnail spectrum-Thumbnail--cover is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div class="spectrum-Thumbnail-image-wrapper spectrum-OpacityCheckerboard">
+        <img
+            class="spectrum-Thumbnail-image"
+            src="[imageURL]"
+            alt="[altText]"
+        />
+    </div>
+</div>
+```
+
+</details>
+
+<details>
+<summary>Spectrum 2 (CSS spectrum-two branch):</summary>
+
+```html
+<!-- Layer variant -->
+<div
+    class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail-layer is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div class="spectrum-Thumbnail-layer-inner spectrum-OpacityCheckerboard">
+        <div class="spectrum-Thumbnail-image-wrapper">
+            <img
+                class="spectrum-Thumbnail-image"
+                src="[imageURL]"
+                alt="[altText]"
+            />
+        </div>
+    </div>
+</div>
+
+<!-- With background -->
+<div
+    class="spectrum-Thumbnail is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div
+        class="spectrum-Thumbnail-background"
+        style="background-color: [backgroundColor]"
+    ></div>
+    <div class="spectrum-Thumbnail-image-wrapper">
+        <img
+            class="spectrum-Thumbnail-image"
+            src="[imageURL]"
+            alt="[altText]"
+        />
+    </div>
+</div>
+
+<!-- Default -->
+<div
+    class="spectrum-Thumbnail spectrum-Thumbnail--cover is-selected is-disabled is-focused spectrum-Thumbnail--size500"
+>
+    <div class="spectrum-Thumbnail-image-wrapper spectrum-OpacityCheckerboard">
+        <img
+            class="spectrum-Thumbnail-image"
+            src="[imageURL]"
+            alt="[altText]"
+        />
+    </div>
+</div>
+```
+
+</details>
+
+<details>
+<summary>Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)</summary>
+
+No significant structural changes.
+
+</details>
+
+### CSS => SWC mapping
+
+| CSS selector                        | Attribute or slot      | Status      |
+| ----------------------------------- | ---------------------- | ----------- |
+| `.spectrum-Thumbnail--size50`       | `size="50"`            | Implemented |
+| `.spectrum-Thumbnail--size75`       | `size="75"`            | Implemented |
+| `.spectrum-Thumbnail--size100`      | `size="100"`           | Implemented |
+| `.spectrum-Thumbnail--size200`      | `size="200"`           | Implemented |
+| `.spectrum-Thumbnail--size300`      | `size="300"`           | Implemented |
+| `.spectrum-Thumbnail--size400`      | `size="400"`           | Implemented |
+| `.spectrum-Thumbnail--size500`      | `size="500"`           | Implemented |
+| `.spectrum-Thumbnail--size600`      | `size="600"`           | Implemented |
+| `.spectrum-Thumbnail--size700`      | `size="700"`           | Implemented |
+| `.spectrum-Thumbnail--size800`      | `size="800"`           | Implemented |
+| `.spectrum-Thumbnail--size900`      | `size="900"`           | Implemented |
+| `.spectrum-Thumbnail--size1000`     | `size="1000"`          | Implemented |
+| `.spectrum-Thumbnail--cover`        | `cover` attribute      | Implemented |
+| `.spectrum-Thumbnail-layer`         | `layer` attribute      | Implemented |
+| `.spectrum-Thumbnail-background`    | `background` attribute | Implemented |
+| `.spectrum-Thumbnail-image`         | Default slot           | Implemented |
+| `.spectrum-Thumbnail-image-wrapper` | Internal wrapper       | Implemented |
+| `.spectrum-Thumbnail-layer-inner`   | Internal wrapper       | Implemented |
+| `.is-disabled`                      | `disabled` attribute   | Implemented |
+| `.is-focused`                       | Focus state            | Implemented |
+| `.is-selected`                      | `selected` attribute   | Implemented |
+
+## Summary of changes
+
+### CSS => SWC implementation gaps
+
+**CSS features missing from Web Component:**
+None found for this component.
+
+**Web Component features missing from CSS:**
+None found for this component.
+
+### CSS Spectrum 2 changes
+
+No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the thumbnail component structure remains consistent across Spectrum 2 migration.
+
+## Resources
+
+- [CSS migration](https://github.com/adobe/spectrum-css/pull/3367)
+- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-thumbnail--docs)
+- React (no thumbnail component in React Spectrum)