feat(color-loupe): implement Color Loupe component

[blunteshwar]

feat(color-loupe): migrate sp-color-loupe to swc-color-loupe (2nd gen)

Migrates the color-loupe component from 1st-gen (sp-color-loupe) to 2nd-gen
(swc-color-loupe) following the washing machine workflow. All 7 migration steps
are complete and the status table has been updated.

---

What was done

Core package (2nd-gen/packages/core/components/color-loupe/)

• ColorLoupe.types.ts — minimal types file with the default color constant
• ColorLoupe.base.ts — abstract base class extending SpectrumElement; holds
  the two public properties (open, color)
• index.ts — re-exports

SWC package (2nd-gen/packages/swc/components/color-loupe/)

• ColorLoupe.ts — concrete class with render() and styles
• color-loupe.css — token-based CSS following the S2 migration guide
• index.ts — defineElement('swc-color-loupe', ColorLoupe) registration
• stories/color-loupe.stories.ts — Playground, Overview, Anatomy, States,
  ColorDisplay (behaviors), and Accessibility stories
• test/color-loupe.test.ts — Storybook play-function tests (defaults, open
  reflection, color property)
• test/color-loupe.a11y.spec.ts — Playwright ARIA snapshot tests (empty tree;
  component is fully aria-hidden)

Migration docs

• 1st-gen/packages/color-loupe/MIGRATION_ANALYSIS.md — full API surface, DOM
  structure, factor assessment, and gen-2 delta notes
• CONTRIBUTOR-DOCS/.../01_status.md — all 7 columns marked for Color Loupe

---

Notable changes from 1st-gen

Area	Change
SVG path	Fixed double-close-command bug (61.575ZZ → 61.575Z)
SVG mask	Fixed broken mask reference (xlink:href="#path" → href="#loupe-path")
xlink:href	Migrated deprecated xlink:href to modern href throughout the SVG
Opacity checkerboard	Replaced @spectrum-web-components/opacity-checkerboard import with an inline repeating-conic-gradient using --swc-opacity-checkerboard-* tokens and light-dark() for theme support
Drop shadow	Migrated from S1 --spectrum-drop-shadow-x to S2 token("drop-shadow-elevated-*")
Token syntax	All --spectrum-color-loupe-* / --mod-colorloupe-* chains replaced with token() and --swc-color-loupe-* exposed overrides
Color display	Simplified render: separate div.swc-ColorLoupe-colorFill with background: ${this.color} instead of setting --spectrum-picked-color on the SVG inline style
Factor step	Intentionally skipped — component is pure-presentational (~40 lines of logic), no separable state

---

Accessibility

The loupe is a visual-only component with no keyboard interaction or focus
management. The SVG is aria-hidden="true" and the component has no tab stop —
semantics are owned by the parent color-field/picker. This aligns with the
existing a11y analysis and the known WCAG 1.4.11 limitation documented in
SWC-1193.

---

Test plan

• Load Storybook and verify the loupe renders with the teardrop shape,
  checkerboard, and color fill
• Toggle the open control — loupe should animate in/out
• Change the color control — fill should update including transparency
  over the checkerboard
• Verify RTL layout: loupe should remain centered under the color handle
• Run yarn test:a11y:2nd — ARIA snapshot tests should pass (empty tree)
• Run yarn lint:2nd-gen — no CSS/TS/Prettier errors

[changeset-bot]

⚠️ No Changeset found

Latest commit: 32a62b0

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