chore(storybook): review and complete storybook docs by cdransf · Pull Request #6180 · adobe/spectrum-web-components

cdransf · 2026-04-15T17:50:54Z

Description

Adds missing Behaviors stories to three POC components based on 1st-gen patterns, and excludes docs-only stories
from automated test runs.

Stories added:

badge: Inline — demonstrates <swc-badge> flowing naturally within paragraph text as inline-flex
divider: Vertical layout — demonstrates vertical dividers in a flex row with a fixed container height
(required for block-size: 100% to resolve)
progress-circle: Progress circle in a button — ports the 1st-gen inButton pattern using native
<button> elements (no swc-button in 2nd-gen yet)

Test exclusions:

status-light WithLocaleWrapper: tagged ['!test'] — docs-only locale demo, not a functional test target
icon AvailableIcons: tagged ['!test'] — dynamic full-catalog render is not suitable for CI snapshot
testing

Test updates:

progress-circle.test.ts: added descriptive second arguments to all expect() calls to satisfy the testing
styleguide

Motivation and context

SWC-1673 — as part of the POC component work, all components should have complete Storybook documentation that captures valid 1st-gen content, conforms to authoring and code style guidelines, and accurately reflects the
2nd-gen API.

Related issue(s)

SWC-1673

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 Jira ticket number without a link
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

Verify Behaviors section renders correctly in Badge docs

Open the local Storybook and navigate to Badge → Docs
Scroll to the Behaviors section
Confirm the Inline story shows badges flowing within paragraph text (not as a flex row)

Verify Behaviors section renders correctly in Divider docs

Navigate to Divider → Docs
Scroll to the Behaviors section
Confirm the Vertical layout story shows visible (non-collapsed) vertical dividers within fixed-height
rows

Verify Behaviors section renders correctly in Progress circle docs

Navigate to Progress circle → Docs
Scroll to the Behaviors section
Confirm the Progress circle in a button story shows both a filled and an outline button with a spinning
progress circle inside

Accessibility testing checklist

Keyboard — No focusable parts in any of the new stories (badge, divider, progress-circle are
non-interactive). Confirm no regressions in focus behavior on surrounding Storybook page controls.
Screen reader — Open each new story canvas directly and confirm with VoiceOver or NVDA:

Navigate to Badge → Docs → Inline story; confirm each badge is announced with its label text
Navigate to Divider → Docs → Vertical layout; confirm dividers are announced as separator
Navigate to Progress circle → Docs → Progress circle in a button; confirm the progress circle is
announced as progressbar with the label ("Saving" / "Processing") and that the disabled button state is
communicated

changeset-bot · 2026-04-15T17:51:12Z

⚠️ No Changeset found

Latest commit: 894b6ef

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-15T17:56:34Z

📚 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-6180

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.

caseyisonit

Solid work! Left a few questions and comments but marking changes requested to ensure that progress circle API is correctly documented.

Progress circle should have indeterminate already refactored to be the default and shouldnt be present in the API. Confirm and update the docs accordingly.

Holler if you have any issues!

caseyisonit · 2026-04-21T23:23:36Z

-      progress="50"
-      label="Downloading (50%)"
-    ></swc-progress-circle>
+export const InButton: Story = {


nit: maybe this story can be named LoadingButton since thats the pattern we are documenting. im also wondering if this more of a pattern vs a behavior regarding sections but this is out of scope for now. absolutely not blocking on the name.

Is this a pattern we should show? Looking back at the design specs, the pending/loading button/progress circle in a button (whatever you want to call it) in Figma show the infield progress circle component (which is new for S2) within the button rather than this progress circle component.

caseyisonit

LGTM tiny nit but totally something i can come back to later when looking at docs IA. in fact dont even worry about ti, merge this bad boy

@todo

* 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

…erminate by default

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

@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 <48574582+caseyisonit@users.noreply.github.com> * 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 <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * 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 <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * 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 <54716846+rise-erpelding@users.noreply.github.com> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * 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 <cdransfeldt@adobe.com> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> Co-authored-by: cdransf <445732+cdransf@users.noreply.github.com>

cdransf self-assigned this Apr 15, 2026

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

cdransf force-pushed the cdransf/poc-storybook-docs branch from 5943b2f to 15e2b13 Compare April 15, 2026 22:47

cdransf marked this pull request as ready for review April 16, 2026 18:32

cdransf requested a review from a team as a code owner April 16, 2026 18:32

cdransf requested review from Rajdeepc, caseyisonit, nikkimk and rubencarvalho April 16, 2026 18:32

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 16, 2026

cdransf force-pushed the cdransf/poc-storybook-docs branch 2 times, most recently from 010762b to fccb76c Compare April 20, 2026 17:01

aramos-adobe approved these changes Apr 20, 2026

View reviewed changes