feat(color-loupe): implement Color Loupe component

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

@@ -0,0 +1,47 @@
+/**
+ * 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';
+
+import { COLOR_LOUPE_DEFAULT_COLOR } from './ColorLoupe.types.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).
+   */
+  @property({ type: String })
+  public color = COLOR_LOUPE_DEFAULT_COLOR;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+/**
+ * Default color value for a newly created color loupe.
+ * Semi-transparent red allows the opacity checkerboard to show through.
+ */
+export const COLOR_LOUPE_DEFAULT_COLOR = 'rgba(255, 0, 0, 0.5)';

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

@@ -0,0 +1,13 @@
+/**
+ * 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';
+export * from './ColorLoupe.types.js';

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

@@ -0,0 +1,77 @@
+/**
+ * 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 { 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
+  // ──────────────────────────────
+
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="swc-ColorLoupe-checkerboard swc-ColorLoupe--clipped"></div>
+      <div
+        class="swc-ColorLoupe-colorFill swc-ColorLoupe--clipped"
+        style="background: ${this.color}"
+      ></div>
+      <svg aria-hidden="true" class="swc-ColorLoupe-svg" overflow="visible">
+        <defs>
+          <path
+            id="loupe-path"
+            d="M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575Z"
+            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)"
+            transform="translate(2, 2)"
+            class="swc-ColorLoupe-innerBorder"
+          />
+          <use
+            href="#loupe-path"
+            mask="url(#loupe-mask)"
+            class="swc-ColorLoupe-outerBorder"
+          />
+        </g>
+      </svg>
+    `;
+  }
+}

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

@@ -0,0 +1,96 @@
+/**
+ * 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 {
+  display: block;
+  position: absolute;
+  inset-block-end: calc((token("color-handle-size") - token("color-handle-outer-border-width")) + var(--swc-color-loupe-offset, token("color-loupe-bottom-to-color-handle")));
+  inset-inline-end: calc(50% - (token("color-loupe-width") / 2));
+  inline-size: token("color-loupe-width");
+  block-size: token("color-loupe-height");
+  pointer-events: none;
+  opacity: 0;
+  filter: drop-shadow(var(--swc-color-loupe-drop-shadow-x, token("drop-shadow-elevated-x")) var(--swc-color-loupe-drop-shadow-y, token("drop-shadow-elevated-y")) var(--swc-color-loupe-drop-shadow-blur, token("drop-shadow-elevated-blur")) var(--swc-color-loupe-drop-shadow-color, token("drop-shadow-elevated-color")));
+  transform: translateY(var(--swc-color-loupe-animation-distance, 8px));
+  transform-origin: bottom center;
+  transition:
+    transform 100ms ease-in-out,
+    opacity 125ms ease-in-out;
+}
+
+:host(:dir(rtl)) {
+  inset-inline-end: calc(50% - (token("color-loupe-width") / 2) - 1px);
+}
+
+:host([open]) {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* 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 */
+.swc-ColorLoupe-colorFill {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Clip to the loupe teardrop shape */
+.swc-ColorLoupe--clipped {
+  clip-path: path(
+    "M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575Z"
+  );
+}
+
+/* SVG overlay — inherits host dimensions */
+.swc-ColorLoupe-svg {
+  position: absolute;
+  inline-size: inherit;
+  block-size: inherit;
+}
+
+/* Inner border: filled with the picked color + thin stroke */
+.swc-ColorLoupe-innerBorder {
+  fill: none;
+  stroke: var(--swc-color-loupe-inner-border-color, token("color-loupe-inner-border"));
+  stroke-width: var(--swc-color-loupe-inner-border-width, token("color-loupe-inner-border-width"));
+}
+
+/* Outer border: unfilled with wider stroke */
+.swc-ColorLoupe-outerBorder {
+  fill: none;
+  stroke: var(--highcontrast-color-loupe-outer-border-color, var(--swc-color-loupe-outer-border-color, token("color-loupe-outer-border")));
+  stroke-width: calc(var(--swc-color-loupe-outer-border-width, token("color-loupe-outer-border-width")) + 2px);
+}
+
+@media (forced-colors: active) {
+  :host {
+    --highcontrast-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);