chore(migration-guides): add @cssprop to doc blocks

Author: cdransf

2nd-gen/packages/swc/components/avatar/Avatar.ts

@@ -34,6 +34,11 @@ import styles from './avatar.css';
  *
  * @example
  * <swc-avatar src="/path/to/image.jpg" alt="Jane Doe" outline></swc-avatar>
+ *
+ * @cssprop --swc-avatar-size - Size (inline and block) of the avatar.
+ * @cssprop --swc-avatar-outline-color - Color of the avatar outline.
+ * @cssprop --swc-avatar-outline-width - Width of the avatar outline.
+ * @cssprop --swc-avatar-opacity-disabled - Opacity when the avatar is disabled.
  */
 export class Avatar extends AvatarBase {
   public static override get styles(): CSSResultArray {

2nd-gen/packages/swc/components/badge/Badge.ts

@@ -41,6 +41,24 @@ import styles from './badge.css';
  *   <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
  *   Verified
  * </swc-badge>
+ *
+ * @cssprop --swc-badge-height - Minimum block size of the badge.
+ * @cssprop --swc-badge-corner-radius - Corner radius of the badge.
+ * @cssprop --swc-badge-gap - Gap between the icon and label.
+ * @cssprop --swc-badge-padding-block - Block padding.
+ * @cssprop --swc-badge-padding-inline - Inline padding.
+ * @cssprop --swc-badge-padding-inline-start - Inline-start padding; overrides the start side of `--swc-badge-padding-inline`.
+ * @cssprop --swc-badge-font-size - Font size of the label.
+ * @cssprop --swc-badge-line-height - Line height of the label.
+ * @cssprop --swc-badge-icon-size - Size of the icon in the icon slot.
+ * @cssprop --swc-badge-label-icon-color - Color of the label text and icon.
+ * @cssprop --swc-badge-background-color - Background color of the badge.
+ * @cssprop --swc-badge-border-color - Border color; visible on the outline variant.
+ * @cssprop --swc-badge-with-icon-padding-inline - Inline padding when the badge has both an icon and a label.
+ * @cssprop --swc-badge-with-icon-only-padding-inline - Inline padding for icon-only badges.
+ * @cssprop --swc-badge-with-icon-only-padding-block - Block padding for icon-only badges.
+ * @cssprop --swc-badge-outline-background-color - Background color override for the outline variant.
+ * @cssprop --swc-badge-outline-label-icon-color - Label and icon color override for the outline variant.
  */
 export class Badge extends BadgeBase {
   // ────────────────────

2nd-gen/packages/swc/components/divider/Divider.ts

@@ -22,6 +22,9 @@ import styles from './divider.css';
  * @element swc-divider
  * @status preview
  * @since 0.0.1
+ *
+ * @cssprop --swc-divider-background-color - Background color of the divider.
+ * @cssprop --swc-divider-thickness - Thickness of the divider.
  */
 export class Divider extends DividerBase {
   // ──────────────────────────────

2nd-gen/packages/swc/components/icon/Icon.ts

@@ -33,6 +33,10 @@ import styles from './icon.css';
  * import { Chevron100Icon } from './elements/Chevron100Icon.js';
  *
  * html`<swc-icon label="Expand">${Chevron100Icon()}</swc-icon>`;
+ *
+ * @cssprop --swc-icon-color - Color of the icon.
+ * @cssprop --swc-icon-inline-size - Inline size of the icon.
+ * @cssprop --swc-icon-block-size - Block size of the icon.
  */
 export class Icon extends IconBase {
   // ──────────────────────────────

2nd-gen/packages/swc/components/progress-circle/ProgressCircle.ts

@@ -44,6 +44,11 @@ import styles from './progress-circle.css';
  * <swc-progress-circle indeterminate label="Loading..."></swc-progress-circle>
  *
  * Light DOM children are not projected into the shadow tree. Use the `label` attribute or property, or `aria-label` / `aria-labelledby` on the host, for an accessible name.
+ *
+ * @cssprop --swc-progress-circle-size - Inline and block size of the circle.
+ * @cssprop --swc-progress-circle-track-border-color - Color of the track (background ring).
+ * @cssprop --swc-progress-circle-fill-border-color - Color of the fill (progress indicator).
+ * @cssprop --swc-progress-circle-thickness - Stroke width of the circle rings.
  */
 export class ProgressCircle extends ProgressCircleBase {
   // ────────────────────

2nd-gen/packages/swc/components/progress-circle/progress-circle.css

@@ -103,7 +103,7 @@
 @media (forced-colors: active) {
   .swc-ProgressCircle {
     --swc-progress-circle-fill-border-color: Highlight;
-    --swc-progress-circle-track-color: Canvas;
+    --swc-progress-circle-track-border-color: Canvas;
 
     @media (prefers-color-scheme: dark) {
       --swc-progress-circle-track-border-color: token("static-white-track-color");

2nd-gen/packages/swc/components/status-light/StatusLight.ts

@@ -38,6 +38,16 @@ import styles from './status-light.css';
  *
  * @example
  * <swc-status-light variant="silver">Supported in Edge</swc-status-light>
+ *
+ * @cssprop --swc-statuslight-height - Minimum block size of the status light.
+ * @cssprop --swc-statuslight-dot-size - Size of the indicator dot.
+ * @cssprop --swc-statuslight-dot-color - Color of the indicator dot.
+ * @cssprop --swc-statuslight-font-size - Font size of the label.
+ * @cssprop --swc-statuslight-line-height - Line height of the label.
+ * @cssprop --swc-statuslight-padding-block - Block padding.
+ * @cssprop --swc-statuslight-top-to-dot - Distance from the block-start edge to the center of the dot.
+ * @cssprop --swc-statuslight-text-to-visual - Gap between the dot and the label.
+ * @cssprop --swc-statuslight-content-color - Color of the label text.
  */
 export class StatusLight extends StatusLightBase {
   // ────────────────────

eslint.config.js

@@ -278,6 +278,7 @@ export default defineConfig([
             'element', // Custom element tag name
             'slot', // Slot documentation
             'csspart', // CSS part documentation
+            'cssprop', // CSS custom property documentation (shorthand)
             'cssproperty', // CSS custom property documentation
             'fires', // Event documentation
             'attr', // Attribute shorthand