docs: add consumer migration guides for S2 components by cdransf · Pull Request #6169 · adobe/spectrum-web-components

cdransf · 2026-04-10T17:37:53Z

Description

Adds migration.md files for 7 components in 2nd-gen/packages/swc/components/, following the pattern established
by the avatar migration guide:

asset — tag/package rename, CSS vars removed (token-based), shadow DOM class changes
badge — tag/package rename, CSS var rename, new subtle/outline attributes, 5 new color variants
divider — tag/package rename, CSS var rename, shadow DOM structure change
icon — tag/package rename, name/src attributes removed, xxs/xxl sizes removed, slot-only SVG
progress-circle — tag/package rename, CSS var rename, static-color="black" added, SVG rendering change
status-light — tag/package rename, disabled removed, accent variant removed, 5 new color variants
typography — class prefix .spectrum-* → .swc-*, light/uppercase/strong-emphasized removed, new Title variant
and prose container

Each guide includes: installation steps, quick reference table, per-change before/after examples, new features,
and accessibility notes. Follows the same per-component structure proposed in draft #6145.

Motivation and context

Application developers migrating from 1st-gen to 2nd-gen need practical, consumer-focused guidance that goes
beyond internal implementation analysis. These docs cover the day-to-day upgrade path: what to search for, what
to change, and how to validate the result.

Related issue(s)

SWC-1675
related: feat(.ai): add consumer migration skill #6145 (draft — consumer migration skill)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature, see: Aria
Practices
I have added automated tests to cover my changes.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Each migration guide is accurate and complete
a. Open any migration.md in 2nd-gen/packages/swc/components/[component]/
b. Follow the "Update your code" steps using a real sp-[component] usage as input
c. Expect the before/after examples to produce a working swc-[component] with no regressions
Breaking changes are clearly surfaced
a. Review the icon and status-light guides specifically — these have the most significant removals (name/src
on icon, disabled/accent on status-light)
b. Confirm the guidance is actionable and the "After" examples are valid 2nd-gen markup

changeset-bot · 2026-04-10T17:38:00Z

⚠️ No Changeset found

Latest commit: 22aad87

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-04-10T17:43:33Z

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6169

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

rubencarvalho · 2026-04-14T12:42:24Z

This is looking really good! Could we somehow add a "template" / or instructions to the migration guide, so all future components use this format too?

rubencarvalho · 2026-04-14T12:53:03Z

This is looking really good! Could we somehow add a "template" / or instructions to the migration guide, so all future components use this format too?
I wonder if we could surface these in the prod Storybook (customer facing). If we do, we can have a dedicated PR for it (doesn't need to be here). cc: @caseyisonit

cdransf · 2026-04-14T21:50:44Z

This is looking really good! Could we somehow add a "template" / or instructions to the migration guide, so all future components use this format too? I wonder if we could surface these in the prod Storybook (customer facing). If we do, we can have a dedicated PR for it (doesn't need to be here). cc: @caseyisonit

Added a skill and consumer docs for that here 40e15d1 ✨

rise-erpelding

This is wonderful! I don't have a whole lot that I think needs to change, but several questions about things that we might have missed in POC work so far.

rise-erpelding · 2026-04-21T21:00:39Z

+| CSS custom properties | `--mod-badge-*`                                          | `--swc-badge-*`                                                      |
+| Slots                 | `default` (label), `icon`                                | `default` (label), `icon` — unchanged                                |
+
+---


I came over here to say that maybe we should mention that the default variant for badge has been changed to "neutral"...

But that seems a bit misleading because that's not the variant that I see if I remove the variant attribute. (It's also in conflict with the variant that gets set in the base class).

Wondering if we should make a few changes to make the default to neutral actually work?

For this one:

Changed the default in Badge.base.ts to neutral

Removed the redundant @property declaration in Badge.ts and then cleaned up the imports

Added a Default variant row in the migration.md and a ### Default variant section with before/after examples

At runtime the subclass override won (which is why our test passed as well), but removing the attribute would set the property to null rather than the default and you'd get a mismatch. ✨

…ions

…track in forced colors

….mdx Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

* feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]>

@todo

…6122) * chore(full-fidelity): revise @status property in docblocks * style(badge): clean up code styles (#6125) * docs(divider): follows a11y rec for real content in stories (#6123) * docs(divider): follows a11y rec for real content in stories * docs(divider): define default size and add todo for chromatic - adds a todo comment to capture vrts for WHCM and more sizes in the static color dividers - adds medium as the default in the control table * docs(divider): update content with realistic text * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * style(divider): clean up code styles (#6135) * fix(badge): use correct line-height tokens (#6153) * feat(statuslight): ensure visual fidelity for status light (#6133) * feat(statuslight): export status light type for sizes * feat(statuslight): map through status light sizes in story * fix(statuslight): padding block uses padding-vertical tokens * docs(status-light): add argType defaults and clean up story args - Declare defaultValue summaries in argTypes for variant and size so Storybook's controls table shows the defaults - Remove redundant hardcoded args from Playground, Overview, and Anatomy now that defaults are reflected through argTypes - Add semantic variant usage note to SemanticVariants story * docs(statuslight): extra a11y explanations * style(statuslight): fixes according to style guides * docs: update status light contributor examples * docs: update more status light examples in guides * fix(statuslight): use new line-height tokens * docs(statuslight): clarify where to see i18n status light story * docs(statuslight): remove tags from i18n story * fix(statuslight): remove exposed color prop and redundant properties * style(progress-circle): clean up code styles (#6146) * style(status-light): clean up code styles (#6157) * refactor: rename STATUSLIGHT to STATUS_LIGHT type * refactor: reorg types file * refactor: standardized debug warnings * refactor: update jsdoc comments --------- Co-authored-by: Casey Eickhoff <[email protected]> * chore(core): remove 1st-gen type references from 2nd-gen core (#6168) * chore(core): remove 1st-gen type references from 2nd-gen core * chore(badge): move properties to badge base * chore(badge): update badge todo * chore(status-light): restore removed comments * chore(status-light): remove doc block line in status light * chore: turn off asset from SB prod build (#6175) * feat(progresscircle): ensure s2 visual fidelity (#6151) * feat(progresscircle): ensure s2 visual fidelity - Exports `ProgressCircleSize` type from core - Adds `prefers-reduced-motion` CSS media query - Adds `dashOffset` variable to ensure contrast at 0% progress - Replaces hardcoded size templates with `PROGRESS_CIRCLE_VALID_SIZES.map()` - Removes sizing antipattern in render - Removes canvas WHCM track color - Implements a11y improvements per migration analysis Also includes minor cross-component cleanup: - Renames `STATUSLIGHT_*` constants to `STATUS_LIGHT_*` convention - Adds `{ type: String }` to `@property()` decorators in Asset and Icon base classes - Fixes `customElements` path in swc package.json - Tags icon internal stories as migrated - Updates Storybook source type from auto to dynamic - Minor avatar stories and status-light stories updates fixes swc-1670 * chore(testing): review and complete test suites (#6178) * chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <[email protected]> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <[email protected]> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <[email protected]> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <[email protected]> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <[email protected]> * chore(storybook): review and complete storybook docs (#6180) * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * style(progress-circle): clean up code styles (#6146) * chore(storybook): review and complete storybook docs * fix(storybook): revert icon test change to debug test failures * fix(storybook): changes to align w/progress circle being set to indeterminate by default * fix(storybook): correct test failure caused by string mismatch * fix(storybook): correct test failures * fix(testing): correct failing tests in 2nd gen * fix(storybook): correct test failures * chore(storybook): address feedback * chore(storybook): address feedback --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]> * chore(full-fidelity): remove duplicate story * fix(full-fidelity): asset lint violations * chore(full-fidelity): update todo comment in progress circle based on feedback * chore(full-fidelity): update private property names * chore(full-fidelity): update progress circle design to align w/pending button * chore(full-fidelity): update progress circle todo ticket number * chore(full-fidelity): consistently rename status light css properties * docs: add consumer migration guides for S2 components (#6169) * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <[email protected]> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: rise-erpelding <[email protected]> * fix(badge): style default color as neutral, not accent * fix(statuslight): style default dot color as neutral * fix(statuslight): style neutral text * docs: align style guide with updated css * fix(badge,divider): default sizing (swc-1847) * fix(statuslight): default variant changed to neutral * fix(statuslight): text color is same for all variants * fix(statuslight): lint fixes * chore: changeset * chore(full-fidelity): revise changese to include updated components * chore(full-fidelity): status-light deprecation warns * chore(full-fidelity): progress-circle deprecation warns * chore(full-fidelity): icon deprecation warns * fix(full-fidelity): status-light test failure * chore(full-fidelity): avatar deprecation warns * chore(full-fidelity): add non-interactive section to avatar docs * chore(full-fidelity): add note explaining visual fill w/progress set to 0 in progress circle * chore(full-fidelity): add a11y tests for badge + avatar * chore(full-fidelity): add a11y tests for divider * chore(full-fidelity): add a11y tests for progress circle * fix: lintfix & preview.ts updates * fix: remove text-box: cap alphabetic; * fix: remove status for POC components + avatar * chore(full-fidelity): improvide divider examples * chore(full-fidelity): improvide divider docs * chore(full-fidelity): note on separator focus interactions * chore(full-fidelity): remove unnecessary progress-circle story * fix(full-fidelity): update styles based on feedback + remove duplicate header * chore(full-fidelity): move todo out of docblock * fix(divider): needs inline or block size to render * fix(full-fidelity): correct lint violation in divider stories --------- Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: Casey Eickhoff <[email protected]> Co-authored-by: cdransf <[email protected]>

cdransf self-assigned this Apr 10, 2026

cdransf added the Status:WIP PR is a work in progress or draft label Apr 10, 2026

cdransf force-pushed the cdransf/migration-guides branch 4 times, most recently from 461b6f8 to d4220ba Compare April 10, 2026 23:14

rubencarvalho reviewed Apr 14, 2026

View reviewed changes

Comment thread 2nd-gen/packages/swc/components/badge/migration.md Outdated

cdransf force-pushed the cdransf/migration-guides branch 2 times, most recently from 74024f7 to f7b8252 Compare April 14, 2026 18:53

cdransf added Status:Ready for review PR ready for review or re-review. Spectrum 2 Issues related to Spectrum 2 and removed Status:WIP PR is a work in progress or draft labels Apr 14, 2026

cdransf requested a review from caseyisonit April 14, 2026 18:53

cdransf marked this pull request as ready for review April 14, 2026 18:53

cdransf requested a review from a team as a code owner April 14, 2026 18:53

cdransf changed the base branch from main to swc-1668/poc-components April 14, 2026 20:41

cdransf force-pushed the cdransf/migration-guides branch from 45cca69 to 40e15d1 Compare April 14, 2026 20:43

cdransf force-pushed the cdransf/migration-guides branch from 1202c75 to 8dff857 Compare April 14, 2026 21:50

cdransf requested a review from rubencarvalho April 14, 2026 21:50

cdransf force-pushed the cdransf/migration-guides branch 2 times, most recently from ccd3f17 to 68f80d5 Compare April 17, 2026 23:35

rise-erpelding mentioned this pull request Apr 21, 2026

[SWC-1668] feat: migrate poc components to full-fidelity production #6122

Merged

42 tasks

rise-erpelding reviewed Apr 21, 2026

View reviewed changes

cdransf force-pushed the cdransf/migration-guides branch from 249610b to df883d4 Compare April 21, 2026 23:13

cdransf requested a review from rise-erpelding April 21, 2026 23:30

cdransf and others added 14 commits April 27, 2026 08:15

chore(migration-guides): add ai skill and contributor docs for migrat…

6fa90cf

…ions

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

c2f0474

chore(migration-guides): address pr feedback

e206b3b

chore(migration-guides): fix badge tests

6df7d86

chore(migration-guides): refactor using migration skill

5fdbd05

fix(migration-docs): remove deprecated files

143d1a9

fix(migration-docs): remove deprecated ai skill reference

6efb94a

fix(migration-docs): address pr feedback

3f29cfc

chore(storybook): update preview nav for new accessibility analysis docs

6866979

fix(migration-docs): update progress circle docs

3530830

fix(migration-docs): address missing properties to badge table

ca6095d

fix(migration-docs): revert application of Canvas to progress circle …

9212379

…track in forced colors

fix(migration-docs): consistently rename status light properties

5db247f

Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide…

c591740

….mdx Co-authored-by: rise-erpelding <[email protected]>

cdransf force-pushed the cdransf/migration-guides branch from 3f7fcc2 to c591740 Compare April 27, 2026 15:15

cdransf added 2 commits April 27, 2026 08:36

fix(migration-docs): badge fallbacks and consistency

189f90e

chore(migration-docs): add missing mods

22aad87

cdransf merged commit 16eab6f into swc-1668/poc-components Apr 27, 2026
26 checks passed

cdransf deleted the cdransf/migration-guides branch April 27, 2026 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add consumer migration guides for S2 components#6169

docs: add consumer migration guides for S2 components#6169
cdransf merged 21 commits into
swc-1668/poc-componentsfrom
cdransf/migration-guides

cdransf commented Apr 10, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

rubencarvalho commented Apr 14, 2026

Uh oh!

Uh oh!

rubencarvalho commented Apr 14, 2026

Uh oh!

cdransf commented Apr 14, 2026

Uh oh!

rise-erpelding left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding Apr 21, 2026

Uh oh!

cdransf Apr 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

cdransf commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and context

Related issue(s)

Author's checklist

Reviewer's checklist

Manual review test cases

Uh oh!

changeset-bot Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

Uh oh!

rubencarvalho commented Apr 14, 2026

Uh oh!

Uh oh!

rubencarvalho commented Apr 14, 2026

Uh oh!

cdransf commented Apr 14, 2026

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rise-erpelding Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

cdransf Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

cdransf commented Apr 10, 2026 •

edited

Loading

changeset-bot Bot commented Apr 10, 2026 •

edited

Loading

github-actions Bot commented Apr 10, 2026 •

edited

Loading

cdransf Apr 21, 2026 •

edited

Loading