[blunteshwar]

Description

Phase 5 (styling) of the swc-menu-separator migration. Stacked on #6888 (Phase 4) and targets the menu-separator-migration feature branch, so the diff includes earlier phases until they merge.

• Ports the .spectrum-Menu-divider rule from Spectrum CSS (spectrum-two) to menu-separator.css: block margin centering the line in the 12px menu-item-section-divider-height container, inline margin from base-padding-horizontal-medium, gray-200 fill, and forced-colors support (CanvasText).
• The separator does not set its own thickness. It reads the inherited --swc-menu-separator-thickness, which swc-menu sets to divider-thickness-medium (2px) on ::slotted(swc-menu-separator), along with padding: 0. A separator outside a menu renders a 0px line.
• No public --swc-* custom properties are exposed (B4), so no @cssprop JSDoc.
• Adds a minimal stories file (Playground, Overview, Anatomy; no autodocs tag, since Phase 7 adds an MDX page) for visual verification. Accessibility story and docs prose are deferred to Phase 7.
• Ticks the Styling checklist in the migration plan.

Open items

• Q3: the container height depends on a spacing token update (5px to 7px) that no published @adobe/spectrum-tokens version has. It uses 12px until then.
• Contrast (1.4.11) of gray-200 against the menu surface is not yet verified and stays unticked.
• VRT is deferred to the testing phase.

Validation

• npx stylelint on menu-separator.css: passed
• npx eslint gen2/packages/swc/components/menu-separator: passed
• npx prettier --check on the component and plan docs: passed
• yarn workspace @spectrum-web-components/gen2 build: passed
• Storybook was not run locally.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 047dc10

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.

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]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 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:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6889

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.

[blunteshwar]

Two questions on the CSS. (1) Spectrum CSS uses menu-item-label-inline-edge-to-content for margin-inline. That token doesn't exist in tokens.css, so I substituted base-padding-horizontal-medium. Please confirm with design that this gives the same inset as the menu item label edge, or record it as an intentional divergence in the plan. (2) The 12px container height is a placeholder for Q3 (spacing token update pending). The block margin is computed from it, so the line position will change when the token changes. The plan's Styling section should list it as a known drift risk. (Update: thickness is now supplied by swc-menu, so the earlier thickness concern no longer applies.)

[blunteshwar]

Combined into #6893.