chore: apply code review feedback

Author: castastrophe

migration-roadmap/avatar.md

@@ -7,9 +7,21 @@
 <details>
 <summary>CSS selectors</summary>
 
-- `.spectrum-Avatar`
+**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`
@@ -27,9 +39,6 @@
 - `.spectrum-Avatar--size1300`
 - `.spectrum-Avatar--size1400`
 - `.spectrum-Avatar--size1500`
-- `.spectrum-Avatar.is-disabled`
-- `.spectrum-Avatar.is-focused:not(.is-disabled):after`
-- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`
 
 </details>
 
@@ -41,7 +50,7 @@ None found for this component.
 </details>
 
 <details>
-<summary>Modifiers</summary>
+<summary>Modifiers *deprecated*</summary>
 
 - `--mod-avatar-block-size`
 - `--mod-avatar-border-radius`
@@ -159,38 +168,37 @@ No significant structural changes.
 
 ### 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     |
-| `.spectrum-Avatar.is-disabled` | `disabled` attribute | Missing from WC |
-| `.spectrum-Avatar.is-focused`  | Focus state          | Missing from WC |
-| `.spectrum-Avatar--size800`    | `size="800"`         | Missing from WC |
-| `.spectrum-Avatar--size900`    | `size="900"`         | Missing from WC |
-| `.spectrum-Avatar--size1000`   | `size="1000"`        | Missing from WC |
-| `.spectrum-Avatar--size1100`   | `size="1100"`        | Missing from WC |
-| `.spectrum-Avatar--size1200`   | `size="1200"`        | Missing from WC |
-| `.spectrum-Avatar--size1300`   | `size="1300"`        | Missing from WC |
-| `.spectrum-Avatar--size1400`   | `size="1400"`        | Missing from WC |
-| `.spectrum-Avatar--size1500`   | `size="1500"`        | Missing from WC |
+| 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 | Missing from WC                          |
+| `.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:**
 
-- Disabled state support (`.spectrum-Avatar.is-disabled`)
-- Focus state support (`.spectrum-Avatar.is-focused`)
+- Disabled state support (`.is-disabled`)
 - Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
 
 **Web Component features missing from CSS:**

migration-roadmap/opacity-checkerboard.md

@@ -7,7 +7,10 @@
 <details>
 <summary>CSS selectors</summary>
 
-- `.spectrum-OpacityCheckerboard`
+**Root class**: `.spectrum-OpacityCheckerboard`
+
+**Variants**:
+
 - `.spectrum-OpacityCheckerboard--sizeS`
 
 </details>
@@ -20,7 +23,7 @@ None found for this component.
 </details>
 
 <details>
-<summary>Modifiers</summary>
+<summary>Modifiers *deprecated*</summary>
 
 - `--mod-opacity-checkerboard-dark`
 - `--mod-opacity-checkerboard-light`

migration-roadmap/swatch-group.md

@@ -7,7 +7,10 @@
 <details>
 <summary>CSS selectors</summary>
 
-- `.spectrum-SwatchGroup`
+**Root class**: `.spectrum-SwatchGroup`
+
+**Variants**:
+
 - `.spectrum-SwatchGroup--compact`
 - `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)`
 - `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)`
@@ -22,7 +25,7 @@
 </details>
 
 <details>
-<summary>Modifiers</summary>
+<summary>Modifiers *deprecated*</summary>
 
 - `--mod-swatchgroup-spacing`
 

migration-roadmap/swatch.md

@@ -7,9 +7,23 @@
 <details>
 <summary>CSS selectors</summary>
 
-- `.spectrum-Swatch`
-- `.spectrum-Swatch .spectrum-Swatch-disabledIcon`
-- `.spectrum-Swatch .spectrum-Swatch-fill`
+**Root class**: `.spectrum-Swatch`
+
+**Elements**:
+
+- `.spectrum-Swatch:before`
+- `.spectrum-Swatch-disabledIcon`
+- `.spectrum-Swatch-fill`
+- `.spectrum-Swatch-icon`
+- `.spectrum-Swatch-image`
+- `.spectrum-Swatch-disabledIcon`
+- `.spectrum-Swatch-fill`
+    - `.spectrum-Swatch-fill:before`
+- `.spectrum-Swatch-icon`
+- `.spectrum-Swatch-image`
+
+**Variants**:
+
 - `.spectrum-Swatch--rectangle`
 - `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`
 - `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before`
@@ -25,16 +39,11 @@
 - `.spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before`
 - `.spectrum-Swatch--roundingNone:after`
 - `.spectrum-Swatch--roundingNone:before`
-- `.spectrum-Swatch--sizeL`
-- `.spectrum-Swatch--sizeS`
 - `.spectrum-Swatch--sizeXS`
-- `.spectrum-Swatch-disabledIcon`
+- `.spectrum-Swatch--sizeS`
+- `.spectrum-Swatch--sizeL`
 - `.spectrum-Swatch-disabledIcon path:first-child`
 - `.spectrum-Swatch-disabledIcon path:last-child`
-- `.spectrum-Swatch-fill`
-- `.spectrum-Swatch-fill:before`
-- `.spectrum-Swatch-icon`
-- `.spectrum-Swatch-image`
 - `.spectrum-Swatch.is-addSwatch`
 - `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill`
 - `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon`
@@ -56,7 +65,6 @@
 - `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`
 - `.spectrum-Swatch.is-selected .spectrum-Swatch-fill:before`
 - `.spectrum-Swatch.is-selected:before`
-- `.spectrum-Swatch:before`
 - `.spectrum-Swatch:focus-visible`
 - `.spectrum-Swatch[disabled]`
 - `.spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon`
@@ -71,7 +79,7 @@ None found for this component.
 </details>
 
 <details>
-<summary>Modifiers</summary>
+<summary>Modifiers *deprecated*</summary>
 
 - `--mod-add-button-background`
 - `--mod-add-button-background-down`

migration-roadmap/thumbnail.md

@@ -7,8 +7,28 @@
 <details>
 <summary>CSS selectors</summary>
 
-- `.spectrum-Thumbnail`
-- `.spectrum-Thumbnail--cover .spectrum-Thumbnail-image`
+**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**:
+
+- `.spectrum-Thumbnail.is-disabled`
+- `.spectrum-Thumbnail.is-focused`
+    - `.spectrum-Thumbnail.is-focused:after`
+    - `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper`
+- `.spectrum-Thumbnail-layer.is-selected`
+
+**Variants**:
+
 - `.spectrum-Thumbnail--size50`
 - `.spectrum-Thumbnail--size75`
 - `.spectrum-Thumbnail--size100`
@@ -21,18 +41,8 @@
 - `.spectrum-Thumbnail--size800`
 - `.spectrum-Thumbnail--size900`
 - `.spectrum-Thumbnail--size1000`
-- `.spectrum-Thumbnail-background`
-- `.spectrum-Thumbnail-image`
-- `.spectrum-Thumbnail-image-wrapper`
-- `.spectrum-Thumbnail-layer`
-- `.spectrum-Thumbnail-layer-inner`
-- `.spectrum-Thumbnail-layer.is-selected`
-- `.spectrum-Thumbnail-layer:before`
-- `.spectrum-Thumbnail.is-disabled`
-- `.spectrum-Thumbnail.is-focused`
-- `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper`
-- `.spectrum-Thumbnail.is-focused:after`
-- `.spectrum-Thumbnail:before`
+
+- `.spectrum-Thumbnail--cover .spectrum-Thumbnail-image`
 
 </details>
 
@@ -44,7 +54,7 @@
 </details>
 
 <details>
-<summary>Modifiers</summary>
+<summary>Modifiers *deprecated*</summary>
 
 - `--mod-thumbnail-border-color`
 - `--mod-thumbnail-border-color-selected`