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

2nd-gen/packages/core/components/color-loupe/ColorLoupe.base.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { property } from 'lit/decorators.js';
+
+import { SpectrumElement } from '@spectrum-web-components/core/element/index.js';
+
+/**
+ * A visual magnifier that shows the currently picked color, including
+ * transparency over an opacity checkerboard, inside a loupe shape.
+ *
+ * The loupe is not an interactive control — accessibility semantics are
+ * provided by the parent color picker / color field.
+ *
+ * @element swc-color-loupe
+ */
+export abstract class ColorLoupeBase extends SpectrumElement {
+  // ─────────────────
+  //     SHARED API
+  // ─────────────────
+
+  /**
+   * Whether the loupe is visible. When `false` the loupe is hidden via
+   * CSS opacity and transform transitions.
+   */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  /**
+   * The CSS color value to display inside the loupe.
+   * Supports any valid CSS color string, including those with alpha
+   * transparency (which reveals the checkerboard behind).
+   *
+   * Default is semi-transparent red so the opacity checkerboard is visible
+   * when the component is rendered without a `color` attribute.
+   *
+   * @todo Runtime validation is intentionally not performed here. The loupe
+   * always receives its color from a parent color-picker component, which
+   * validates upstream via `validateColorString` on `ColorController`. If
+   * the loupe ever needs standalone validation (e.g. consumed outside a
+   * parent color picker), reuse `ColorController.validateColorString`
+   * rather than adding a separate utility.
+   */
+  @property({ type: String })
+  public color = 'rgba(255, 0, 0, 0.5)';
+}

2nd-gen/packages/core/components/color-loupe/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export * from './ColorLoupe.base.js';

2nd-gen/packages/swc/.storybook/preview.ts

@@ -360,6 +360,12 @@ const preview = {
                 ['Rendering and styling migration analysis'],
                 'Color field',
                 ['Rendering and styling migration analysis'],
+                'Color loupe',
+                [
+                  'Accessibility migration analysis',
+                  'Migration checklist',
+                  'Rendering and styling migration analysis',
+                ],
                 'Divider',
                 [
                   'Accessibility migration analysis',

2nd-gen/packages/swc/components/color-loupe/ColorLoupe.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CSSResultArray, html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { ColorLoupeBase } from '@spectrum-web-components/core/components/color-loupe';
+
+import styles from './color-loupe.css';
+
+/**
+ * A visual magnifier that displays the currently picked color inside a
+ * loupe-shaped container with an opacity checkerboard behind transparent
+ * colors. The loupe is a non-interactive, visual-only companion to
+ * color selection controls such as `<swc-color-field>`.
+ *
+ * @element swc-color-loupe
+ * @status preview
+ * @since 0.0.1
+ *
+ * @example
+ * <swc-color-loupe open color="rgba(0, 128, 255, 0.7)"></swc-color-loupe>
+ */
+export class ColorLoupe extends ColorLoupeBase {
+  // ──────────────────────────────
+  //     RENDERING & STYLING
+  // ──────────────────────────────
+
+  /**
+   * @todo SWC-2029 - Migrate opacity-checkerboard to 2nd gen and consume it
+   * here; checkerboard styling is currently hardcoded in color-loupe.css.
+   */
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          ['swc-ColorLoupe']: true,
+        })}
+      >
+        <div class="swc-ColorLoupe-checkerboard swc-ColorLoupe--clipped"></div>
+        <div
+          class="swc-ColorLoupe-colorFill swc-ColorLoupe--clipped"
+          style=${styleMap({
+            '--swc-color-loupe-picked-color': this.color,
+          })}
+        ></div>
+        <svg aria-hidden="true" class="swc-ColorLoupe-svg" overflow="visible">
+          <defs>
+            <path
+              id="loupe-path"
+              d="M 22 60 C 18.2 56 14.6 51.7 11.3 47.2 C 8.3 43.3 5.7 39.1 3.5 34.7 C 1.2 30 0 25.9 0 22.4 C 0 17.2 1.8 12.2 5 8.2 C 8.2 4.2 12.7 1.5 17.6 0.4 C 22.6 -0.6 27.8 0.2 32.3 2.6 C 36.8 5 40.3 8.9 42.3 13.7 C 43.4 16.4 44 19.4 44 22.4 C 44 25.9 42.8 30 40.5 34.7 C 38.3 39.1 35.7 43.3 32.7 47.3 C 29.4 51.7 25.8 56 22 60 Z"
+              transform="translate(2, 2)"
+            />
+            <mask id="loupe-mask">
+              <rect x="0" y="0" height="100" width="100" fill="white" />
+              <use href="#loupe-path" fill="black" />
+            </mask>
+          </defs>
+
+          <g class="swc-ColorLoupe-loupe">
+            <use
+              href="#loupe-path"
+              mask="url(#loupe-mask)"
+              class="swc-ColorLoupe-innerBorder"
+            />
+            <use
+              href="#loupe-path"
+              mask="url(#loupe-mask)"
+              class="swc-ColorLoupe-outerBorder"
+            />
+          </g>
+        </svg>
+      </div>
+    `;
+  }
+}

2nd-gen/packages/swc/components/color-loupe/color-loupe.css

@@ -0,0 +1,116 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+:host {
+  --_swc-color-loupe-width: token("color-loupe-width");
+
+  display: block;
+  position: absolute;
+  inset-block-end: calc((token("color-handle-size") - token("color-handle-outer-border-width")) + token("color-loupe-bottom-to-color-handle"));
+  inset-inline-end: calc(50% - (var(--_swc-color-loupe-width) / 2));
+  inline-size: var(--_swc-color-loupe-width);
+  block-size: token("color-loupe-height");
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.swc-ColorLoupe {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  opacity: 0;
+  filter: drop-shadow(token("drop-shadow-elevated-x") token("drop-shadow-elevated-y") token("drop-shadow-elevated-blur") token("drop-shadow-elevated-color"));
+
+  /* TODO: replace 8px with a forthcoming animation-distance token (matches Spectrum CSS S2). */
+  transform: translateY(8px);
+  transform-origin: bottom center;
+  transition:
+    transform 100ms ease-in-out,
+    opacity 125ms ease-in-out;
+}
+
+/* Opacity checkerboard shown behind transparent picked colors.
+   The dark-square token has separate light/dark theme values, so
+   we use light-dark() with the explicit theme variants. */
+.swc-ColorLoupe-checkerboard {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  inline-size: 100%;
+  block-size: 100%;
+  background: repeating-conic-gradient(light-dark(var(--swc-opacity-checkerboard-square-dark-light), var(--swc-opacity-checkerboard-square-dark-dark)) 0% 25%, token("opacity-checkerboard-square-light") 0% 50%) 0 0 / token("opacity-checkerboard-square-size-medium") token("opacity-checkerboard-square-size-medium");
+}
+
+/* Color fill layer — displays the picked color set by the component via
+   the --swc-color-loupe-picked-color custom property. */
+.swc-ColorLoupe-colorFill {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  inline-size: 100%;
+  block-size: 100%;
+  background: var(--swc-color-loupe-picked-color);
+}
+
+/* SVG overlay — inherits host dimensions */
+.swc-ColorLoupe-svg {
+  position: absolute;
+  inline-size: inherit;
+  block-size: inherit;
+}
+
+/* Inner border: thin stroke separating color fill from the loupe edge */
+.swc-ColorLoupe-innerBorder {
+  fill: none;
+  stroke: token("color-loupe-inner-border");
+  stroke-width: token("color-loupe-inner-border-width");
+}
+
+/* Outer border: wider stroke forming the loupe outline */
+.swc-ColorLoupe-outerBorder {
+  --_swc-color-loupe-outer-border-color: token("color-loupe-outer-border");
+
+  fill: none;
+  stroke: var(--_swc-color-loupe-outer-border-color);
+  stroke-width: calc(token("color-loupe-outer-border-width") + 2px);
+}
+
+/* Clip utility — applied to the checkerboard and color-fill layers to
+   constrain them to the loupe teardrop silhouette. Modifier class is placed
+   after all subcomponent rules per the documented rule order. */
+.swc-ColorLoupe--clipped {
+  clip-path: path("M 22 60 C 18.2 56 14.6 51.7 11.3 47.2 C 8.3 43.3 5.7 39.1 3.5 34.7 C 1.2 30 0 25.9 0 22.4 C 0 17.2 1.8 12.2 5 8.2 C 8.2 4.2 12.7 1.5 17.6 0.4 C 22.6 -0.6 27.8 0.2 32.3 2.6 C 36.8 5 40.3 8.9 42.3 13.7 C 43.4 16.4 44 19.4 44 22.4 C 44 25.9 42.8 30 40.5 34.7 C 38.3 39.1 35.7 43.3 32.7 47.3 C 29.4 51.7 25.8 56 22 60 Z");
+}
+
+/* Compensates for sub-pixel rounding in RTL that shifts the loupe */
+:host(:dir(rtl)) {
+  inset-inline-end: calc(50% - (var(--_swc-color-loupe-width) / 2) - 1px);
+}
+
+:host([open]) .swc-ColorLoupe {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+@media (forced-colors: active) {
+  .swc-ColorLoupe-colorFill,
+  .swc-ColorLoupe-checkerboard {
+    forced-color-adjust: none;
+  }
+
+  .swc-ColorLoupe-outerBorder {
+    --_swc-color-loupe-outer-border-color: CanvasText;
+  }
+}

2nd-gen/packages/swc/components/color-loupe/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { defineElement } from '@spectrum-web-components/core/element/index.js';
+
+import { ColorLoupe } from './ColorLoupe.js';
+
+export * from './ColorLoupe.js';
+declare global {
+  interface HTMLElementTagNameMap {
+    'swc-color-loupe': ColorLoupe;
+  }
+}
+defineElement('swc-color-loupe', ColorLoupe);