@adobe/spectrum-wc-core 0.0.0-snapshot.20260922095923

package/dist/components/card/Card.base.js

@@ -0,0 +1,123 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { SlotAttributePropagationController as t } from "../../controllers/slot-attribute-propagation-controller/src/slot-attribute-propagation-controller.js";
+import { SlotTextController as n } from "../../controllers/slot-text-controller/src/slot-text-controller.js";
+import { CARD_DENSITIES as r, CARD_VALID_SIZES as i, CARD_VARIANTS as a, SWC_CARD_CLICK_EVENT as o } from "./Card.types.js";
+import { property as s } from "lit/decorators.js";
+import { SpectrumElement as c } from "@adobe/spectrum-wc-core/element/index.js";
+import { SizedMixin as l } from "@adobe/spectrum-wc-core/mixins/index.js";
+import { isDebug as u, validateEnum as d, warnIf as f } from "@adobe/spectrum-wc-core/utils/index.js";
+//#region components/card/Card.base.ts
+var p, m = class e extends l(c, { validSizes: i }) {
+	constructor(...r) {
+		super(...r), this.variant = "primary", this.density = "regular", this.titleAsLink = !1, this.selectable = !1, this._sizePropagation = new t(this, {
+			attribute: "size",
+			getValue: () => e.getSmallerSize(this.size),
+			slotName: "actions"
+		}), this.slotText = new n(this), this.handleActionsSlotChange = () => {
+			this._sizePropagation.propagate(), this.checkActionsSupport();
+		}, this.handleSurfaceClick = (t) => {
+			var n;
+			if (!this.titleAsLink && !this.selectable || t instanceof MouseEvent && ((n = document.getSelection()) == null ? void 0 : n.isCollapsed) === !1) return;
+			let r = t.composedPath(), i = r.slice(0, r.indexOf(this)), a = this.getActionsSlotElement();
+			if (!(a && i.includes(a) || i.some(e.isFocusable))) {
+				if (this.titleAsLink) {
+					var s;
+					(s = this.getTitleLinkElement()) == null || s.click();
+				}
+				this.selectable && this.dispatchEvent(new Event(o, {
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}, this.handleSelectableKeydown = (e) => {
+			(e.code === "Enter" || e.code === "Space") && (e.preventDefault(), this.handleSurfaceClick(e));
+		};
+	}
+	get slotHasContent() {
+		return this.slotText.hasContent;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this.handleSurfaceClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleSurfaceClick), this.removeEventListener("keydown", this.handleSelectableKeydown), super.disconnectedCallback();
+	}
+	firstUpdated(e) {
+		var t;
+		super.firstUpdated(e), (t = this.renderRoot) == null || (t = t.querySelector("slot[name=\"actions\"]")) == null || t.addEventListener("slotchange", this.handleActionsSlotChange);
+	}
+	update(e) {
+		let { VARIANTS: t, DENSITIES: n } = this.constructor;
+		e.has("variant") && d(this, {
+			prop: "variant",
+			value: this.variant,
+			valid: t,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs"
+		}), e.has("density") && d(this, {
+			prop: "density",
+			value: this.density,
+			valid: n,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs",
+			options: { level: "low" }
+		}), super.update(e);
+	}
+	updated(e) {
+		super.updated(e), e.has("selectable") && (this.selectable ? (this.setAttribute("tabindex", "0"), this.addEventListener("keydown", this.handleSelectableKeydown)) : (this.removeAttribute("tabindex"), this.removeEventListener("keydown", this.handleSelectableKeydown))), f(this, e.has("titleAsLink") && this.titleAsLink && !this.getTitleLinkElement(), `<${this.localName}> has "title-as-link" set but no link element was found in the "title" slot.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs", {
+			level: "high",
+			issues: ["title-as-link"]
+		}), e.has("size") && this.checkActionsSupport();
+	}
+	getTitleSlotElement() {
+		var e, t;
+		return (e = (t = this.renderRoot) == null ? void 0 : t.querySelector("slot[name=\"title\"]")) == null ? null : e;
+	}
+	getActionsSlotElement() {
+		var e, t;
+		return (e = (t = this.renderRoot) == null ? void 0 : t.querySelector("slot[name=\"actions\"]")) == null ? null : e;
+	}
+	get actionsSupported() {
+		return this.size !== "xs";
+	}
+	checkActionsSupport() {
+		var e, t;
+		u() && f(this, !this.actionsSupported && ((e = (t = this.getActionsSlotElement()) == null ? void 0 : t.assignedElements({ flatten: !0 }).length) == null ? 0 : e) > 0, `<${this.localName}> has content in the "actions" slot, but actions are not supported for this card (size="${this.size}").`, "https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs", {
+			level: "medium",
+			issues: ["actions"]
+		});
+	}
+	getTitleLinkElement() {
+		var e;
+		let t = (e = this.getTitleSlotElement()) == null ? void 0 : e.assignedElements({ flatten: !0 });
+		for (let e of t == null ? [] : t) {
+			if (e instanceof HTMLAnchorElement && e.href) return e;
+			let t = e.querySelector("a[href]");
+			if (t) return t;
+		}
+		return null;
+	}
+	static isFocusable(e) {
+		return e instanceof HTMLElement && e.tabIndex >= 0;
+	}
+	static getSmallerSize(e) {
+		let t = i.indexOf(e);
+		return i[Math.max(t - 1, 0)];
+	}
+};
+p = m, p.VARIANTS = a, p.DENSITIES = r, e([s({
+	type: String,
+	reflect: !0
+})], m.prototype, "variant", void 0), e([s({
+	type: String,
+	reflect: !0
+})], m.prototype, "density", void 0), e([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "title-as-link"
+})], m.prototype, "titleAsLink", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "selectable", void 0);
+//#endregion
+export { m as CardBase };
+
+//# sourceMappingURL=Card.base.js.map

package/dist/components/card/Card.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.base.js","names":[],"sources":["../../../components/card/Card.base.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\nimport {\n  type ElementSize,\n  SizedMixin,\n} from '@adobe/spectrum-wc-core/mixins/index.js';\nimport {\n  isDebug,\n  validateEnum,\n  warnIf,\n} from '@adobe/spectrum-wc-core/utils/index.js';\n\nimport { SlotAttributePropagationController } from '../../controllers/slot-attribute-propagation-controller/index.js';\nimport { SlotTextController } from '../../controllers/slot-text-controller/index.js';\nimport {\n  CARD_DENSITIES,\n  CARD_VALID_SIZES,\n  CARD_VARIANTS,\n  type CardDensity,\n  type CardSize,\n  type CardVariant,\n  SWC_CARD_CLICK_EVENT,\n} from './Card.types.js';\n\n/**\n * Abstract base class for all card-family components. Owns the semantics\n * shared across every card type: sizing, visual variant, and density.\n *\n * @attribute {ElementSize} size - The size of the card.\n *\n * @fires swc-card-click - Dispatched when a `selectable` card is activated (click, Enter, or Space).\n *\n * @slot preview - Primary preview content\n * @slot title - Card title\n * @slot actions - Optional action controls\n * @slot description - Supporting description text\n * @slot footer - Optional footer content\n * @slot - Additional body content\n *\n * @cssprop --swc-card-base-max-inline-size - Maximum inline size of the card. Defaults to 280px, overridden per size.\n * @cssprop --swc-card-base-border-radius - Corner radius of the card. Defaults to the extra-large corner-radius token, overridden per size.\n * @cssprop --swc-card-base-box-shadow - Box shadow (elevation) of the card. Defaults to the emphasized drop-shadow token; overridden by the tertiary variant, selectable focus, and title-as-link/selectable hover.\n * @cssprop --swc-card-base-background-color - Background color of the card. Defaults to the layer-2 background token; overridden by the secondary, tertiary, and quiet variants.\n * @cssprop --swc-card-base-preview-aspect-ratio - Aspect ratio of the preview slot. Defaults to 3/2.\n * @cssprop --swc-card-base-title-font-size - Font size of the title slot. Defaults to the medium font-size token, overridden per size.\n * @cssprop --swc-card-base-title-line-height - Line height of the title slot. Defaults to the medium line-height token, overridden per size.\n * @cssprop --swc-card-base-description-font-size - Font size of the description slot and default slot content. Defaults to a smaller font-size token, overridden per size.\n * @cssprop --swc-card-base-action-component-height - Height used to vertically balance slotted actions content. Defaults to the smallest component-height token, overridden per size.\n * @cssprop --swc-card-base-content-header-gap - Column gap between the title and actions slots. Defaults to the medium base-gap token, overridden per size.\n * @cssprop --swc-card-base-content-padding - Padding of the content region. Defaults to the medium container-padding token; overridden by density.\n * @cssprop --swc-card-base-content-padding-regular - Content padding used at the default (regular) density, per size.\n * @cssprop --swc-card-base-content-padding-compact - Content padding used at compact density, per size.\n * @cssprop --swc-card-base-content-padding-spacious - Content padding used at spacious density, per size.\n */\nexport abstract class CardBase extends SizedMixin(SpectrumElement, {\n  validSizes: CARD_VALID_SIZES,\n}) {\n  // ─────────────────────────\n  //     API TO OVERRIDE\n  // ─────────────────────────\n\n  /**\n   * @internal\n   */\n  static readonly VARIANTS: readonly CardVariant[] = CARD_VARIANTS;\n\n  /**\n   * @internal\n   */\n  static readonly DENSITIES: readonly CardDensity[] = CARD_DENSITIES;\n\n  // ──────────────────\n  //     SHARED API\n  // ──────────────────\n\n  /**\n   * The visual variant of the card.\n   *\n   * @default primary\n   */\n  @property({ type: String, reflect: true })\n  public variant: CardVariant = 'primary';\n\n  /**\n   * The density of the card, controlling internal spacing and gaps.\n   *\n   * @default regular\n   */\n  @property({ type: String, reflect: true })\n  public density: CardDensity = 'regular';\n\n  /**\n   * Indicates the consumer has wrapped their `title` slot content in a real\n   * link. Extends that link's hit area to cover the card surface while\n   * leaving navigation entirely consumer-owned; Card accepts no `href`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'title-as-link' })\n  public titleAsLink = false;\n\n  /**\n   * Makes the card focusable and captures surface clicks (excluding nested\n   * interactive targets) to dispatch a `swc-card-click` event, independent\n   * of `titleAsLink`.\n   *\n   * @todo No ARIA role is set yet; deferred until a future `CardView`\n   * selection model determines the appropriate role.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selectable = false;\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  /**\n   * Keeps a slotted action control's `size` one step smaller than the\n   * card's own `size`.\n   */\n  private readonly _sizePropagation = new SlotAttributePropagationController(\n    this,\n    {\n      attribute: 'size',\n      getValue: () => CardBase.getSmallerSize(this.size),\n      slotName: 'actions',\n    }\n  );\n\n  /**\n   * Observes whether the default slot has meaningful content. Each concrete\n   * card's `render()` must bind `@slotchange=${this.slotText.handleSlotChange}`\n   * on the default slot (via `renderCardTemplate`'s `onDefaultSlotChange`) for\n   * changes after the first render to be tracked.\n   *\n   * @internal\n   */\n  protected slotText = new SlotTextController(this);\n\n  /**\n   * Whether the default slot has meaningful content. Consumed by each concrete\n   * card's `render()` (through `renderCardTemplate`'s `hasDefaultSlotContent`)\n   * to toggle the `--hasDefault` class.\n   *\n   * @internal\n   */\n  protected get slotHasContent(): boolean {\n    return this.slotText.hasContent;\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.handleSurfaceClick);\n  }\n\n  public override disconnectedCallback(): void {\n    this.removeEventListener('click', this.handleSurfaceClick);\n    this.removeEventListener('keydown', this.handleSelectableKeydown);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n    // renderCardTemplate() doesn't take a slotchange callback, so the\n    // listener is attached imperatively rather than declaratively in the\n    // template; the slot node itself persists across re-renders.\n    this.renderRoot\n      ?.querySelector('slot[name=\"actions\"]')\n      ?.addEventListener('slotchange', this.handleActionsSlotChange);\n  }\n\n  protected override update(changedProperties: PropertyValues): void {\n    const { VARIANTS, DENSITIES } = this.constructor as typeof CardBase;\n\n    if (changedProperties.has('variant')) {\n      validateEnum(this, {\n        prop: 'variant',\n        value: this.variant,\n        valid: VARIANTS,\n        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',\n      });\n    }\n\n    if (changedProperties.has('density')) {\n      validateEnum(this, {\n        prop: 'density',\n        value: this.density,\n        valid: DENSITIES,\n        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',\n        options: { level: 'low' },\n      });\n    }\n\n    super.update(changedProperties);\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('selectable')) {\n      if (this.selectable) {\n        this.setAttribute('tabindex', '0');\n        this.addEventListener('keydown', this.handleSelectableKeydown);\n      } else {\n        this.removeAttribute('tabindex');\n        this.removeEventListener('keydown', this.handleSelectableKeydown);\n      }\n    }\n\n    warnIf(\n      this,\n      changedProperties.has('titleAsLink') &&\n        this.titleAsLink &&\n        !this.getTitleLinkElement(),\n      `<${this.localName}> has \"title-as-link\" set but no link element was found in the \"title\" slot.`,\n      'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',\n      { level: 'high', issues: ['title-as-link'] }\n    );\n\n    if (changedProperties.has('size')) {\n      this.checkActionsSupport();\n    }\n  }\n\n  /**\n   * @internal\n   *\n   * The card's own `title` slot element.\n   */\n  protected getTitleSlotElement(): HTMLSlotElement | null {\n    return this.renderRoot?.querySelector('slot[name=\"title\"]') ?? null;\n  }\n\n  /**\n   * @internal\n   *\n   * The card's own `actions` slot element.\n   */\n  protected getActionsSlotElement(): HTMLSlotElement | null {\n    return this.renderRoot?.querySelector('slot[name=\"actions\"]') ?? null;\n  }\n\n  /**\n   * Whether the `actions` slot is supported for this card's current state.\n   * `xs` cards don't have room for it. Concrete classes may override this\n   * to exclude the slot for other reasons, independent of size.\n   */\n  protected get actionsSupported(): boolean {\n    return this.size !== 'xs';\n  }\n\n  /**\n   * @internal\n   *\n   * Warns in dev mode when the `actions` slot has content but isn't\n   * supported for the current state. Visual suppression is handled in\n   * CSS, not here.\n   */\n  private checkActionsSupport(): void {\n    if (!isDebug()) {\n      return;\n    }\n    warnIf(\n      this,\n      !this.actionsSupported &&\n        (this.getActionsSlotElement()?.assignedElements({ flatten: true })\n          .length ?? 0) > 0,\n      `<${this.localName}> has content in the \"actions\" slot, but actions are not supported for this card (size=\"${this.size}\").`,\n      'https://spectrum-web-components.adobe.com/?path=/docs/components-card--docs',\n      { level: 'medium', issues: ['actions'] }\n    );\n  }\n\n  /**\n   * @internal\n   *\n   * The `title` slot's link: either the assigned element itself\n   * (`<a slot=\"title\" href=\"...\">`) or an anchor nested inside a wrapper\n   * (`<span slot=\"title\"><a href=\"...\">`). Requires `href`.\n   */\n  protected getTitleLinkElement(): HTMLAnchorElement | null {\n    const assigned = this.getTitleSlotElement()?.assignedElements({\n      flatten: true,\n    });\n    for (const element of assigned ?? []) {\n      if (element instanceof HTMLAnchorElement && element.href) {\n        return element;\n      }\n      const nested = element.querySelector<HTMLAnchorElement>('a[href]');\n      if (nested) {\n        return nested;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * @internal\n   *\n   * Whether `node` has its own interaction/focus semantics, via the\n   * `tabIndex` IDL property rather than the `tabindex` attribute; this\n   * also correctly excludes `tabindex=\"-1\"` and disabled controls.\n   */\n  private static isFocusable(node: EventTarget): boolean {\n    return node instanceof HTMLElement && node.tabIndex >= 0;\n  }\n\n  /**\n   * @internal\n   *\n   * The size one step below `size` in `CARD_VALID_SIZES`, clamped at the\n   * smallest size.\n   */\n  private static getSmallerSize(size: ElementSize): CardSize {\n    const index = CARD_VALID_SIZES.indexOf(size as CardSize);\n    return CARD_VALID_SIZES[Math.max(index - 1, 0)];\n  }\n\n  /**\n   * Re-propagates the `actions` slot's `size` for elements assigned after\n   * the initial render, wired to the slot's `slotchange` in\n   * `firstUpdated()`.\n   */\n  protected readonly handleActionsSlotChange = (): void => {\n    this._sizePropagation.propagate();\n    this.checkActionsSupport();\n  };\n\n  /**\n   * Proxies a qualifying surface click to `titleAsLink`'s link and/or\n   * dispatches `swc-card-click` for `selectable`, after filtering out\n   * clicks that landed on a nested interactive target or followed a\n   * text-selection drag.\n   */\n  protected readonly handleSurfaceClick = (event: Event): void => {\n    if (!this.titleAsLink && !this.selectable) {\n      return;\n    }\n    // A text-selection drag still fires `click` on mouseup; a non-collapsed\n    // selection at that point means the user was selecting text, not\n    // clicking through the card.\n    if (\n      event instanceof MouseEvent &&\n      document.getSelection()?.isCollapsed === false\n    ) {\n      return;\n    }\n    const path = event.composedPath();\n    const precedingPath = path.slice(0, path.indexOf(this));\n    const actionsSlot = this.getActionsSlotElement();\n    const hitInteractiveTarget =\n      // The actions slot is always excluded, since it's contractually\n      // for interactive content regardless of whether a control reflects\n      // focusability correctly.\n      (actionsSlot && precedingPath.includes(actionsSlot)) ||\n      precedingPath.some(CardBase.isFocusable);\n    if (hitInteractiveTarget) {\n      return;\n    }\n    if (this.titleAsLink) {\n      this.getTitleLinkElement()?.click();\n    }\n    if (this.selectable) {\n      this.dispatchEvent(\n        new Event(SWC_CARD_CLICK_EVENT, { bubbles: true, composed: true })\n      );\n    }\n  };\n\n  /**\n   * Enter and Space both activate the card, even though a bare link\n   * conventionally responds to Enter only; the card's own activation\n   * contract takes precedence once `selectable` makes it the focused\n   * target.\n   */\n  protected readonly handleSelectableKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      event.preventDefault();\n      this.handleSurfaceClick(event);\n    }\n  };\n}\n"],"mappings":"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"}

package/dist/components/card/Card.types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 declare const CARD_VALID_SIZES: readonly ["xs", "s", "m", "l", "xl"];
+export declare const CARD_VARIANTS: readonly ["primary", "secondary", "tertiary", "quiet"];
+export declare const CARD_DENSITIES: readonly ["compact", "regular", "spacious"];
+export declare const SWC_CARD_CLICK_EVENT: "swc-card-click";
+export type CardSize = (typeof CARD_VALID_SIZES)[number];
+export type CardVariant = (typeof CARD_VARIANTS)[number];
+export type CardDensity = (typeof CARD_DENSITIES)[number];

package/dist/components/card/Card.types.js

@@ -0,0 +1,21 @@
+//#region components/card/Card.types.ts
+var e = [
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl"
+], t = [
+	"primary",
+	"secondary",
+	"tertiary",
+	"quiet"
+], n = [
+	"compact",
+	"regular",
+	"spacious"
+], r = "swc-card-click";
+//#endregion
+export { n as CARD_DENSITIES, e as CARD_VALID_SIZES, t as CARD_VARIANTS, r as SWC_CARD_CLICK_EVENT };
+
+//# sourceMappingURL=Card.types.js.map

package/dist/components/card/Card.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.js","names":[],"sources":["../../../components/card/Card.types.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ElementSize } from '@adobe/spectrum-wc-core/mixins/index.js';\n\n// ──────────────────\n//     SHARED\n// ──────────────────\n\nexport const CARD_VALID_SIZES = [\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n] as const satisfies readonly ElementSize[];\n\nexport const CARD_VARIANTS = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'quiet',\n] as const;\n\nexport const CARD_DENSITIES = ['compact', 'regular', 'spacious'] as const;\n\nexport const SWC_CARD_CLICK_EVENT = 'swc-card-click' as const;\n\n// ──────────────────\n//     TYPES\n// ──────────────────\n\nexport type CardSize = (typeof CARD_VALID_SIZES)[number];\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\nexport type CardDensity = (typeof CARD_DENSITIES)[number];\n"],"mappings":";AAkBA,IAAa,IAAmB;CAC9B;CACA;CACA;CACA;CACA;CACD,EAEY,IAAgB;CAC3B;CACA;CACA;CACA;CACD,EAEY,IAAiB;CAAC;CAAW;CAAW;CAAW,EAEnD,IAAuB"}

package/dist/components/card/index.d.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 './Card.base.js';
+export * from './Card.types.js';

package/dist/components/card/index.js

@@ -0,0 +1,3 @@
+import { CARD_DENSITIES as e, CARD_VALID_SIZES as t, CARD_VARIANTS as n, SWC_CARD_CLICK_EVENT as r } from "./Card.types.js";
+import { CardBase as i } from "./Card.base.js";
+export { e as CARD_DENSITIES, t as CARD_VALID_SIZES, n as CARD_VARIANTS, i as CardBase, r as SWC_CARD_CLICK_EVENT };

package/dist/components/color-handle/ColorHandle.base.d.ts

@@ -0,0 +1,51 @@
+import { PropertyValues } from 'lit';
+import { SpectrumElement } from '../../element/index.js';
+import { ColorHandleProperties } from './ColorHandle.types.js';
+/**
+ * A non-interactive primitive: a draggable dot rendered on top of a color
+ * area, slider, or wheel that shows the currently picked color (over an
+ * opacity checkerboard) and pops a loupe on touch.
+ *
+ * The handle owns no ARIA role/name and is not independently focusable;
+ * accessibility is provided by the parent color picker. Its only net-new a11y
+ * obligation is WCAG 1.4.11 non-text contrast via an adaptive border, applied
+ * in the rendering layer.
+ *
+ * @element swc-color-handle
+ */
+export declare abstract class ColorHandleBase extends SpectrumElement implements ColorHandleProperties {
+    /**
+     * The CSS color value shown inside the handle. Supports any valid CSS color
+     * string, including alpha transparency (which reveals the checkerboard).
+     *
+     * Default is semi-transparent red so the opacity checkerboard is visible
+     * when the component is rendered without a `color` attribute.
+     */
+    color: string;
+    /** Reflected. Suppresses the loupe (`open && !disabled`). */
+    disabled: boolean;
+    /**
+     * Reflected. Set by the parent color component when the parent picker is
+     * focused (keyboard or programmatic); enlarges the handle as the focus
+     * indicator.
+     */
+    focused: boolean;
+    /** Reflected. Shows the built-in loupe; auto-toggled by touch pointers. */
+    open: boolean;
+    /**
+     * Reflected. `true` shows the inner color swatch (1st-gen behavior);
+     * `false` renders an outline-only handle.
+     */
+    fill: boolean;
+    /**
+     * The adaptive dark-border opacity for the current `color`, derived by the
+     * white-first strategy so the handle chrome meets WCAG 1.4.11 (≥3:1) across
+     * the color spectrum. The rendering layer applies this to the dark borders.
+     *
+     * @internal
+     */
+    protected get borderAlpha(): number;
+    private handlePointerdown;
+    private handlePointerup;
+    protected firstUpdated(changed: PropertyValues): void;
+}

package/dist/components/color-handle/ColorHandle.base.js

@@ -0,0 +1,39 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { computeBorderAlpha as t } from "./color-contrast.js";
+import { property as n } from "lit/decorators.js";
+import { SpectrumElement as r } from "@adobe/spectrum-wc-core/element/index.js";
+//#region components/color-handle/ColorHandle.base.ts
+var i = class extends r {
+	constructor(...e) {
+		super(...e), this.color = "rgba(255, 0, 0, 0.5)", this.disabled = !1, this.focused = !1, this.open = !1, this.fill = !0;
+	}
+	get borderAlpha() {
+		return t(this.color);
+	}
+	handlePointerdown(e) {
+		e.pointerType === "touch" && (this.open = !0, this.setPointerCapture(e.pointerId));
+	}
+	handlePointerup(e) {
+		e.pointerType === "touch" && (this.open = !1, this.releasePointerCapture(e.pointerId));
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
+	}
+};
+e([n({ type: String })], i.prototype, "color", void 0), e([n({
+	type: Boolean,
+	reflect: !0
+})], i.prototype, "disabled", void 0), e([n({
+	type: Boolean,
+	reflect: !0
+})], i.prototype, "focused", void 0), e([n({
+	type: Boolean,
+	reflect: !0
+})], i.prototype, "open", void 0), e([n({
+	type: Boolean,
+	reflect: !0
+})], i.prototype, "fill", void 0);
+//#endregion
+export { i as ColorHandleBase };
+
+//# sourceMappingURL=ColorHandle.base.js.map

package/dist/components/color-handle/ColorHandle.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHandle.base.js","names":[],"sources":["../../../components/color-handle/ColorHandle.base.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\n\nimport { computeBorderAlpha } from './color-contrast.js';\nimport { ColorHandleProperties } from './ColorHandle.types.js';\n\n/**\n * A non-interactive primitive: a draggable dot rendered on top of a color\n * area, slider, or wheel that shows the currently picked color (over an\n * opacity checkerboard) and pops a loupe on touch.\n *\n * The handle owns no ARIA role/name and is not independently focusable;\n * accessibility is provided by the parent color picker. Its only net-new a11y\n * obligation is WCAG 1.4.11 non-text contrast via an adaptive border, applied\n * in the rendering layer.\n *\n * @element swc-color-handle\n */\nexport abstract class ColorHandleBase\n  extends SpectrumElement\n  implements ColorHandleProperties\n{\n  // ─────────────────\n  //     SHARED API\n  // ─────────────────\n\n  /**\n   * The CSS color value shown inside the handle. Supports any valid CSS color\n   * string, including alpha transparency (which reveals the checkerboard).\n   *\n   * Default is semi-transparent red so the opacity checkerboard is visible\n   * when the component is rendered without a `color` attribute.\n   */\n  @property({ type: String })\n  public color = 'rgba(255, 0, 0, 0.5)';\n\n  /** Reflected. Suppresses the loupe (`open && !disabled`). */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Reflected. Set by the parent color component when the parent picker is\n   * focused (keyboard or programmatic); enlarges the handle as the focus\n   * indicator.\n   */\n  @property({ type: Boolean, reflect: true })\n  public focused = false;\n\n  /** Reflected. Shows the built-in loupe; auto-toggled by touch pointers. */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Reflected. `true` shows the inner color swatch (1st-gen behavior);\n   * `false` renders an outline-only handle.\n   */\n  @property({ type: Boolean, reflect: true })\n  public fill = true;\n\n  // ──────────────────────────\n  //     ADAPTIVE CONTRAST\n  // ──────────────────────────\n\n  /**\n   * The adaptive dark-border opacity for the current `color`, derived by the\n   * white-first strategy so the handle chrome meets WCAG 1.4.11 (≥3:1) across\n   * the color spectrum. The rendering layer applies this to the dark borders.\n   *\n   * @internal\n   */\n  protected get borderAlpha(): number {\n    return computeBorderAlpha(this.color);\n  }\n\n  // ──────────────────────────\n  //     POINTER / TOUCH BEHAVIOR\n  // ──────────────────────────\n\n  // Only touch opens the loupe, so only touch reserves the pointer. Mouse and\n  // stylus are left alone rather than capturing pointers nothing consumes.\n  private handlePointerdown(event: PointerEvent): void {\n    if (event.pointerType !== 'touch') {\n      return;\n    }\n    this.open = true;\n    this.setPointerCapture(event.pointerId);\n  }\n\n  private handlePointerup(event: PointerEvent): void {\n    if (event.pointerType !== 'touch') {\n      return;\n    }\n    this.open = false;\n    this.releasePointerCapture(event.pointerId);\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n    this.addEventListener('pointerdown', this.handlePointerdown);\n    this.addEventListener('pointerup', this.handlePointerup);\n    this.addEventListener('pointercancel', this.handlePointerup);\n  }\n}\n"],"mappings":";;;;;AAgCA,IAAsB,IAAtB,cACU,EAEV;;4BAaiB,wCAIG,mBAQD,gBAIH,gBAOA;;CAad,IAAc,cAAsB;AAClC,SAAO,EAAmB,KAAK,MAAM;;CASvC,kBAA0B,GAA2B;AAC/C,IAAM,gBAAgB,YAG1B,KAAK,OAAO,IACZ,KAAK,kBAAkB,EAAM,UAAU;;CAGzC,gBAAwB,GAA2B;AAC7C,IAAM,gBAAgB,YAG1B,KAAK,OAAO,IACZ,KAAK,sBAAsB,EAAM,UAAU;;CAG7C,aAAgC,GAA+B;AAI7D,EAHA,MAAM,aAAa,EAAQ,EAC3B,KAAK,iBAAiB,eAAe,KAAK,kBAAkB,EAC5D,KAAK,iBAAiB,aAAa,KAAK,gBAAgB,EACxD,KAAK,iBAAiB,iBAAiB,KAAK,gBAAgB;;;GAnE7D,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAI1B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAQ1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAI1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAO1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA"}

package/dist/components/color-handle/ColorHandle.types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+/**
+ * The public property contract for `swc-color-handle`.
+ *
+ * Color Handle exposes no variant, size, or treatment enums; its surface is a
+ * single string color plus four boolean flags. This interface documents that
+ * contract; the concrete decorated properties live on `ColorHandleBase`.
+ */
+export interface ColorHandleProperties {
+    /** CSS color shown inside the handle; alpha reveals the opacity checkerboard. */
+    color: string;
+    /** Suppresses the loupe even when `open`. */
+    disabled: boolean;
+    /** Parent-set focus flag; enlarges the handle as the focus indicator. */
+    focused: boolean;
+    /** Shows the built-in loupe; auto-toggled by touch. */
+    open: boolean;
+    /** `true` shows the inner color swatch; `false` renders an outline-only handle. */
+    fill: boolean;
+}

package/dist/components/color-handle/color-contrast.d.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.
+ */
+/**
+ * Adaptive white-first dual-border contrast helper (SWC-2295, RSP-2021,
+ * SDS-16402).
+ *
+ * The color handle renders a dark border, a white separator, and a second dark
+ * border. To meet WCAG 1.4.11 non-text contrast (≥3:1) across the color
+ * spectrum, the opacity (α) of the dark borders is computed adaptively:
+ *
+ * - If the white separator already meets 3:1 against the underlying color, the
+ *   dark borders stay at the floor opacity for softer, uniform chrome
+ *   (white-first).
+ * - Otherwise α climbs from the floor until the dark border itself meets 3:1.
+ *
+ * **v1 limitation (A1):** the underlying color is approximated by the handle's
+ * own `color`, not by sampling the surrounding gradient. This is accurate on
+ * smooth gradients and approximate at steep or saturated edges.
+ */
+/** Minimum dark-border opacity (matches the 1st-gen static 42%). */
+export declare const COLOR_HANDLE_ALPHA_FLOOR = 0.42;
+/** WCAG 1.4.11 non-text contrast target. */
+export declare const COLOR_HANDLE_CONTRAST_TARGET = 3;
+type Rgb = [number, number, number];
+/** Standard WCAG 2.2 contrast ratio between two opaque sRGB colors. */
+export declare function contrastRatio(colorA: Rgb, colorB: Rgb): number;
+/**
+ * Predicts the rendered color of a black border painted at opacity α over an
+ * opaque background.
+ */
+export declare function compositeBlackOver([r, g, b]: Rgb, alpha: number): Rgb;
+/**
+ * The minimum α in `[floor, 1]` that makes a black border composited over
+ * `adjacency` meet `target` contrast against that same adjacency.
+ */
+export declare function findMinAlpha(adjacency: Rgb, target?: number, floor?: number): number;
+/**
+ * Computes the adaptive dark-border opacity for a handle showing `color`,
+ * using the white-first strategy. Returns the floor when `color` cannot be
+ * parsed so the border is never weaker than 1st-gen.
+ */
+export declare function computeBorderAlpha(color: string, { target, floor, }?: {
+    target?: number;
+    floor?: number;
+}): number;
+export {};

package/dist/components/color-handle/color-contrast.js

@@ -0,0 +1,49 @@
+import e from "colorjs.io";
+//#region components/color-handle/color-contrast.ts
+var t = .42, n = 3, r = [
+	255,
+	255,
+	255
+];
+function i(e) {
+	let t = e / 255;
+	return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+}
+function a([e, t, n]) {
+	return .2126 * i(e) + .7152 * i(t) + .0722 * i(n);
+}
+function o(e, t) {
+	let n = a(e), r = a(t), i = Math.max(n, r), o = Math.min(n, r);
+	return (i + .05) / (o + .05);
+}
+function s([e, t, n], r) {
+	return [
+		Math.round(e * (1 - r)),
+		Math.round(t * (1 - r)),
+		Math.round(n * (1 - r))
+	];
+}
+function c(e, n = 3, r = t) {
+	for (let t = r; t <= 1.000000001; t += .01) if (o(s(e, t), e) >= n) return Math.min(1, Math.round(t * 100) / 100);
+	return 1;
+}
+function l(t) {
+	try {
+		let [n, r, i] = new e(t).to("srgb").coords, a = (e) => Math.max(0, Math.min(255, Math.round(e * 255)));
+		return [
+			a(n),
+			a(r),
+			a(i)
+		];
+	} catch (e) {
+		return null;
+	}
+}
+function u(e, { target: n = 3, floor: i = t } = {}) {
+	let a = l(e);
+	return !a || o(r, a) >= n ? i : c(a, n, i);
+}
+//#endregion
+export { t as COLOR_HANDLE_ALPHA_FLOOR, n as COLOR_HANDLE_CONTRAST_TARGET, s as compositeBlackOver, u as computeBorderAlpha, o as contrastRatio, c as findMinAlpha };
+
+//# sourceMappingURL=color-contrast.js.map

package/dist/components/color-handle/color-contrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-contrast.js","names":[],"sources":["../../../components/color-handle/color-contrast.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Color from 'colorjs.io';\n\n/**\n * Adaptive white-first dual-border contrast helper (SWC-2295, RSP-2021,\n * SDS-16402).\n *\n * The color handle renders a dark border, a white separator, and a second dark\n * border. To meet WCAG 1.4.11 non-text contrast (≥3:1) across the color\n * spectrum, the opacity (α) of the dark borders is computed adaptively:\n *\n * - If the white separator already meets 3:1 against the underlying color, the\n *   dark borders stay at the floor opacity for softer, uniform chrome\n *   (white-first).\n * - Otherwise α climbs from the floor until the dark border itself meets 3:1.\n *\n * **v1 limitation (A1):** the underlying color is approximated by the handle's\n * own `color`, not by sampling the surrounding gradient. This is accurate on\n * smooth gradients and approximate at steep or saturated edges.\n */\n\n/** Minimum dark-border opacity (matches the 1st-gen static 42%). */\nexport const COLOR_HANDLE_ALPHA_FLOOR = 0.42;\n\n/** WCAG 1.4.11 non-text contrast target. */\nexport const COLOR_HANDLE_CONTRAST_TARGET = 3;\n\ntype Rgb = [number, number, number];\n\nconst WHITE: Rgb = [255, 255, 255];\n\nfunction srgbToLinear(channel: number): number {\n  const c = channel / 255;\n  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n}\n\nfunction relativeLuminance([r, g, b]: Rgb): number {\n  return (\n    0.2126 * srgbToLinear(r) +\n    0.7152 * srgbToLinear(g) +\n    0.0722 * srgbToLinear(b)\n  );\n}\n\n/** Standard WCAG 2.2 contrast ratio between two opaque sRGB colors. */\nexport function contrastRatio(colorA: Rgb, colorB: Rgb): number {\n  const la = relativeLuminance(colorA);\n  const lb = relativeLuminance(colorB);\n  const hi = Math.max(la, lb);\n  const lo = Math.min(la, lb);\n  return (hi + 0.05) / (lo + 0.05);\n}\n\n/**\n * Predicts the rendered color of a black border painted at opacity α over an\n * opaque background.\n */\nexport function compositeBlackOver([r, g, b]: Rgb, alpha: number): Rgb {\n  return [\n    Math.round(r * (1 - alpha)),\n    Math.round(g * (1 - alpha)),\n    Math.round(b * (1 - alpha)),\n  ];\n}\n\n/**\n * The minimum α in `[floor, 1]` that makes a black border composited over\n * `adjacency` meet `target` contrast against that same adjacency.\n */\nexport function findMinAlpha(\n  adjacency: Rgb,\n  target: number = COLOR_HANDLE_CONTRAST_TARGET,\n  floor: number = COLOR_HANDLE_ALPHA_FLOOR\n): number {\n  for (let a = floor; a <= 1 + 1e-9; a += 0.01) {\n    if (contrastRatio(compositeBlackOver(adjacency, a), adjacency) >= target) {\n      return Math.min(1, Math.round(a * 100) / 100);\n    }\n  }\n  return 1;\n}\n\n/**\n * Parses a CSS color string to opaque sRGB channels in `[0, 255]`. Alpha is\n * intentionally dropped: the border sits over the composited swatch, whose hue\n * is what matters for the contrast decision. Returns `null` for unparseable\n * input so callers can fall back to the floor.\n */\nfunction parseToRgb255(color: string): Rgb | null {\n  try {\n    const [r, g, b] = new Color(color).to('srgb').coords;\n    const clamp = (c: number): number =>\n      Math.max(0, Math.min(255, Math.round(c * 255)));\n    return [clamp(r), clamp(g), clamp(b)];\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Computes the adaptive dark-border opacity for a handle showing `color`,\n * using the white-first strategy. Returns the floor when `color` cannot be\n * parsed so the border is never weaker than 1st-gen.\n */\nexport function computeBorderAlpha(\n  color: string,\n  {\n    target = COLOR_HANDLE_CONTRAST_TARGET,\n    floor = COLOR_HANDLE_ALPHA_FLOOR,\n  }: { target?: number; floor?: number } = {}\n): number {\n  const adjacency = parseToRgb255(color);\n  if (!adjacency) {\n    return floor;\n  }\n  // White-first: if the white separator already carries 3:1, keep the softer\n  // floor; otherwise escalate α until the dark border itself passes.\n  if (contrastRatio(WHITE, adjacency) >= target) {\n    return floor;\n  }\n  return findMinAlpha(adjacency, target, floor);\n}\n"],"mappings":";;AAiCA,IAAa,IAA2B,KAG3B,IAA+B,GAItC,IAAa;CAAC;CAAK;CAAK;CAAI;AAElC,SAAS,EAAa,GAAyB;CAC7C,IAAM,IAAI,IAAU;AACpB,QAAO,KAAK,SAAU,IAAI,UAAkB,IAAI,QAAS,UAAO;;AAGlE,SAAS,EAAkB,CAAC,GAAG,GAAG,IAAiB;AACjD,QACE,QAAS,EAAa,EAAE,GACxB,QAAS,EAAa,EAAE,GACxB,QAAS,EAAa,EAAE;;AAK5B,SAAgB,EAAc,GAAa,GAAqB;CAC9D,IAAM,IAAK,EAAkB,EAAO,EAC9B,IAAK,EAAkB,EAAO,EAC9B,IAAK,KAAK,IAAI,GAAI,EAAG,EACrB,IAAK,KAAK,IAAI,GAAI,EAAG;AAC3B,SAAQ,IAAK,QAAS,IAAK;;AAO7B,SAAgB,EAAmB,CAAC,GAAG,GAAG,IAAS,GAAoB;AACrE,QAAO;EACL,KAAK,MAAM,KAAK,IAAI,GAAO;EAC3B,KAAK,MAAM,KAAK,IAAI,GAAO;EAC3B,KAAK,MAAM,KAAK,IAAI,GAAO;EAC5B;;AAOH,SAAgB,EACd,GACA,IAAA,GACA,IAAgB,GACR;AACR,MAAK,IAAI,IAAI,GAAO,KAAK,aAAU,KAAK,IACtC,KAAI,EAAc,EAAmB,GAAW,EAAE,EAAE,EAAU,IAAI,EAChE,QAAO,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,IAAI,GAAG,IAAI;AAGjD,QAAO;;AAST,SAAS,EAAc,GAA2B;AAChD,KAAI;EACF,IAAM,CAAC,GAAG,GAAG,KAAK,IAAI,EAAM,EAAM,CAAC,GAAG,OAAO,CAAC,QACxC,KAAS,MACb,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC;AACjD,SAAO;GAAC,EAAM,EAAE;GAAE,EAAM,EAAE;GAAE,EAAM,EAAE;GAAC;aAC/B;AACN,SAAO;;;AASX,SAAgB,EACd,GACA,EACE,YAAA,GACA,WAAQ,MAC+B,EAAE,EACnC;CACR,IAAM,IAAY,EAAc,EAAM;AAStC,QARI,CAAC,KAKD,EAAc,GAAO,EAAU,IAAI,IAC9B,IAEF,EAAa,GAAW,GAAQ,EAAM"}

package/dist/components/color-handle/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 './ColorHandle.base.js';
+export * from './ColorHandle.types.js';
+export * from './color-contrast.js';

package/dist/components/color-handle/index.js

@@ -0,0 +1,3 @@
+import { COLOR_HANDLE_ALPHA_FLOOR as e, COLOR_HANDLE_CONTRAST_TARGET as t, compositeBlackOver as n, computeBorderAlpha as r, contrastRatio as i, findMinAlpha as a } from "./color-contrast.js";
+import { ColorHandleBase as o } from "./ColorHandle.base.js";
+export { e as COLOR_HANDLE_ALPHA_FLOOR, t as COLOR_HANDLE_CONTRAST_TARGET, o as ColorHandleBase, n as compositeBlackOver, r as computeBorderAlpha, i as contrastRatio, a as findMinAlpha };

package/dist/components/color-loupe/ColorLoupe.base.d.ts

@@ -0,0 +1,41 @@
+import { SpectrumElement } from '../../element/index.js';
+/**
+ * Minimum inner-border opacity (matches the existing `transparent-black-200`
+ * token) so the default look on mid/dark colors is unchanged.
+ */
+export declare const COLOR_LOUPE_ALPHA_FLOOR = 0.12;
+/**
+ * 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 declare abstract class ColorLoupeBase extends SpectrumElement {
+    /**
+     * Whether the loupe is visible. When `false` the loupe is hidden via
+     * CSS opacity and transform transitions.
+     */
+    open: boolean;
+    /**
+     * 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.
+     */
+    color: string;
+    /**
+     * The adaptive inner-border opacity for the current `color`, derived by the
+     * white-first strategy (shared with `<swc-color-handle>`) so the loupe
+     * chrome meets WCAG 1.4.11 (≥3:1) across the color spectrum. The white
+     * outer border is unchanged; the rendering layer applies this value to the
+     * inner border only.
+     *
+     * @internal
+     */
+    protected get borderAlpha(): number;
+}

package/dist/components/color-loupe/ColorLoupe.base.js

@@ -0,0 +1,21 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { property as t } from "lit/decorators.js";
+import { SpectrumElement as n } from "@adobe/spectrum-wc-core/element/index.js";
+import { computeBorderAlpha as r } from "@adobe/spectrum-wc-core/components/color-handle";
+//#region components/color-loupe/ColorLoupe.base.ts
+var i = .12, a = class extends n {
+	constructor(...e) {
+		super(...e), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
+	}
+	get borderAlpha() {
+		return r(this.color, { floor: i });
+	}
+};
+e([t({
+	type: Boolean,
+	reflect: !0
+})], a.prototype, "open", void 0), e([t({ type: String })], a.prototype, "color", void 0);
+//#endregion
+export { i as COLOR_LOUPE_ALPHA_FLOOR, a as ColorLoupeBase };
+
+//# sourceMappingURL=ColorLoupe.base.js.map

package/dist/components/color-loupe/ColorLoupe.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorLoupe.base.js","names":[],"sources":["../../../components/color-loupe/ColorLoupe.base.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { property } from 'lit/decorators.js';\n\nimport { computeBorderAlpha } from '@adobe/spectrum-wc-core/components/color-handle';\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\n\n/**\n * Minimum inner-border opacity (matches the existing `transparent-black-200`\n * token) so the default look on mid/dark colors is unchanged.\n */\nexport const COLOR_LOUPE_ALPHA_FLOOR = 0.12;\n\n/**\n * A visual magnifier that shows the currently picked color, including\n * transparency over an opacity checkerboard, inside a loupe shape.\n *\n * The loupe is not an interactive control — accessibility semantics are\n * provided by the parent color picker / color field.\n *\n * @element swc-color-loupe\n */\nexport abstract class ColorLoupeBase extends SpectrumElement {\n  // ─────────────────\n  //     SHARED API\n  // ─────────────────\n\n  /**\n   * Whether the loupe is visible. When `false` the loupe is hidden via\n   * CSS opacity and transform transitions.\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * The CSS color value to display inside the loupe.\n   * Supports any valid CSS color string, including those with alpha\n   * transparency (which reveals the checkerboard behind).\n   *\n   * Default is semi-transparent red so the opacity checkerboard is visible\n   * when the component is rendered without a `color` attribute.\n   */\n  @property({ type: String })\n  public color = 'rgba(255, 0, 0, 0.5)';\n\n  // ──────────────────────────\n  //     ADAPTIVE CONTRAST\n  // ──────────────────────────\n\n  /**\n   * The adaptive inner-border opacity for the current `color`, derived by the\n   * white-first strategy (shared with `<swc-color-handle>`) so the loupe\n   * chrome meets WCAG 1.4.11 (≥3:1) across the color spectrum. The white\n   * outer border is unchanged; the rendering layer applies this value to the\n   * inner border only.\n   *\n   * @internal\n   */\n  protected get borderAlpha(): number {\n    return computeBorderAlpha(this.color, { floor: COLOR_LOUPE_ALPHA_FLOOR });\n  }\n}\n"],"mappings":";;;;;AAqBA,IAAa,IAA0B,KAWjB,IAAtB,cAA6C,EAAgB;;2BAU7C,iBAWC;;CAef,IAAc,cAAsB;AAClC,SAAO,EAAmB,KAAK,OAAO,EAAE,OAAO,GAAyB,CAAC;;;GA5B1E,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAW1C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA"}

package/dist/components/color-loupe/index.d.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';

package/dist/components/color-loupe/index.js

@@ -0,0 +1,2 @@
+import { COLOR_LOUPE_ALPHA_FLOOR as e, ColorLoupeBase as t } from "./ColorLoupe.base.js";
+export { e as COLOR_LOUPE_ALPHA_FLOOR, t as ColorLoupeBase };