+
+
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
diff --git a/packages/calcite-components/src/components/swatch-group/swatch-group.tsx b/packages/calcite-components/src/components/swatch-group/swatch-group.tsx
new file mode 100644
index 00000000000..9f38f153359
--- /dev/null
+++ b/packages/calcite-components/src/components/swatch-group/swatch-group.tsx
@@ -0,0 +1,243 @@
+import { PropertyValues } from "lit";
+import { createRef } from "lit-html/directives/ref.js";
+import { LitElement, property, createEvent, h, method, JsxNode } from "@arcgis/lumina";
+import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
+import {
+ InteractiveComponent,
+ InteractiveContainer,
+ updateHostInteraction,
+} from "../../utils/interactive";
+import { Scale, SelectionMode } from "../interfaces";
+import { useSetFocus } from "../../controllers/useSetFocus";
+import type { Swatch } from "../swatch/swatch";
+import { CSS } from "./resources";
+import { styles } from "./swatch-group.scss";
+
+declare global {
+ interface DeclareElements {
+ "calcite-swatch-group": SwatchGroup;
+ }
+}
+/** @slot - A slot for adding one or more `calcite-swatch`s. */
+export class SwatchGroup extends LitElement implements InteractiveComponent {
+ // #region Static Members
+
+ static override styles = styles;
+
+ // #endregion
+
+ // #region Private Properties
+
+ private items: Swatch["el"][] = [];
+
+ private slotRefEl = createRef
+
+
+
+`;
+
+export const withHex = (args: SwatchStoryArgs): string => html`
+
+
+
+`;
+
+export const withRgba = (args: SwatchStoryArgs): string => html`
+
+
+
+`;
+
+export const hexDisabled = (args: SwatchStoryArgs): string => html`
+
+
+
+`;
+
+export const emptyDisabled = (args: SwatchStoryArgs): string => html`
+
+
+
+`;
+
+export const withImage = (args: SwatchStoryArgs): string => html`
+
+
+ })
+
+
+`;
+
+export const withImageDisabled = (args: SwatchStoryArgs): string => html`
+
+
+
+
+
+`;
+
+export const darkModeRTL_TestOnly = (args: SwatchStoryArgs): string => html`
+
+
+`;
+
+darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
diff --git a/packages/calcite-components/src/components/swatch/swatch.tsx b/packages/calcite-components/src/components/swatch/swatch.tsx
new file mode 100644
index 00000000000..f4aab6ea09e
--- /dev/null
+++ b/packages/calcite-components/src/components/swatch/swatch.tsx
@@ -0,0 +1,461 @@
+import { PropertyValues } from "lit";
+import { createRef } from "lit-html/directives/ref.js";
+import {
+ LitElement,
+ property,
+ createEvent,
+ h,
+ method,
+ state,
+ JsxNode,
+ Fragment,
+} from "@arcgis/lumina";
+import Color, { ColorInstance } from "color";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { Scale, SelectionMode } from "../interfaces";
+import {
+ InteractiveComponent,
+ InteractiveContainer,
+ updateHostInteraction,
+} from "../../utils/interactive";
+import { useSetFocus } from "../../controllers/useSetFocus";
+import type { SwatchGroup } from "../swatch-group/swatch-group";
+import { hexify } from "../color-picker/utils";
+import { CHECKER_DIMENSIONS } from "../color-picker-swatch/resources";
+import { CSS, SLOTS, IDS } from "./resources";
+import { styles } from "./swatch.scss";
+
+declare global {
+ interface DeclareElements {
+ "calcite-swatch": Swatch;
+ }
+}
+
+export class Swatch extends LitElement implements InteractiveComponent {
+ //#region Static Members
+
+ static override styles = styles;
+
+ //#endregion
+
+ //#region Private Properties
+
+ private internalColor: ColorInstance;
+
+ private containerEl = createRef
+
+ );
+ }
+
+ private renderEmptyDisplay(): JsxNode {
+ const scale = this.scale === "s" ? "12" : this.scale === "m" ? "16" : "20";
+
+ return (
+
+
+
+ );
+ }
+
+ private renderDisabledDisplay(): JsxNode {
+ const svgSmMdPath = (
+
+ );
+
+ const svgLgPath = (
+
+ );
+ return (
+ {this.scale === "l" ? svgLgPath : svgSmMdPath}
+ );
+ }
+
+ private renderSwatch(): JsxNode {
+ const { internalColor } = this;
+ const borderRadius = "0";
+ const isEmpty = !internalColor;
+ const commonSwatchProps = {
+ height: "100%",
+ rx: borderRadius,
+ width: "100%",
+ };
+
+ if (isEmpty) {
+ return (
+ <>
+
+ {this.renderSwatchImage()}
+ {!this.internalColor && !this.hasImage && this.renderEmptyDisplay()}
+ {this.disabled && this.renderDisabledDisplay()}
+
+
+
+
+ Swatch group selection mode examples
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Swatch outside of Swatch Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ None
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Single
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Single-persist
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Multiple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Swatch Group Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Themed
+
+
+
+
+ + + +
+
+
+
+ Swatch usage combinations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+ no selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ single selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ single persist
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ multiple selection
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Programmatic selection
+
+
+
+ Programmatically select swatch
+
+ Single programmatic
+
+
+
+ Programmatically select swatch
+
+ Single-persist programmatic
+
+
+
+ Programmatically select swatch
+
+ Multiple programmatic
+
+
+
+ Programmatically set focus
+
+ setFocus programmatic on group
+
+
+
+ Programmatically set focus on swatch
+
+ setFocus programmatic on swatch
+