@spectrum-web-components/swatch 1.1.0 → 1.1.2

package/src/swatch-group.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
+    :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
+`;export default a;
+//# sourceMappingURL=swatch-group.css.js.map

package/src/swatch-group.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch-group.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/swatch-overrides.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/swatch-overrides.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
+`;
+export default styles;
+//# sourceMappingURL=swatch-overrides.css.dev.js.map

package/src/swatch-overrides.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/swatch-overrides.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as s}from"@spectrum-web-components/base";const c=s`
+    :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
+`;export default c;
+//# sourceMappingURL=swatch-overrides.css.js.map

package/src/swatch-overrides.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch-overrides.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/swatch.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/swatch.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
+`;
+export default styles;
+//# sourceMappingURL=swatch.css.dev.js.map

package/src/swatch.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/swatch.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
+    @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
+`;export default e;
+//# sourceMappingURL=swatch.css.js.map

package/src/swatch.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/stories/swatch-group.stories.js

@@ -0,0 +1,183 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/swatch/sp-swatch-group.js";
+import "@spectrum-web-components/swatch/sp-swatch.js";
+export default {
+  title: "Swatch group",
+  component: "sp-swatch-group",
+  args: {},
+  argTypes: {
+    border: {
+      name: "border",
+      type: { name: "string", required: false },
+      description: "The border to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "light", "none"]
+      }
+    },
+    density: {
+      name: "density",
+      type: { name: "string", required: false },
+      description: "The density at which to display the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "compact", "spacious"]
+      }
+    },
+    rounding: {
+      name: "rounding",
+      type: { name: "string", required: false },
+      description: "The rounding to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "none", "full"]
+      }
+    },
+    selects: {
+      name: "selects",
+      type: { name: "string", required: false },
+      description: "Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["none", "single", "multiple"]
+      }
+    },
+    shape: {
+      name: "shape",
+      type: { name: "string", required: false },
+      description: "The shape to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "rectangle"]
+      }
+    }
+  },
+  decorators: [
+    (story, {
+      args: { selected = [] }
+    }) => html`
+            <div
+                @change=${async (event) => {
+      await 0;
+      if (event.defaultPrevented) return;
+      const next = event.target.nextElementSibling;
+      next.textContent = `Selected: ${JSON.stringify(
+        event.target.selected
+      )}`;
+    }}
+            >
+                ${story()}
+                <div>Selected: ${JSON.stringify(selected)}</div>
+            </div>
+        `
+  ]
+};
+const colors = [
+  "--spectrum-gray-700",
+  "--spectrum-red-700",
+  "--spectrum-orange-700",
+  "--spectrum-yellow-700",
+  "--spectrum-chartreuse-700",
+  "--spectrum-celery-700",
+  "--spectrum-green-700",
+  "--spectrum-seafoam-700",
+  "--spectrum-blue-700",
+  "--spectrum-indigo-700",
+  "--spectrum-purple-700",
+  "--spectrum-fuchsia-700",
+  "--spectrum-magenta-700"
+];
+const template = ({
+  border,
+  density,
+  rounding,
+  selects,
+  selected = [],
+  shape
+}) => {
+  const groupLabel = !!selects ? selects === "single" ? "Select a color" : "Selects color(s)" : void 0;
+  return html`
+        <sp-swatch-group
+            border=${ifDefined(border === "normal" ? void 0 : border)}
+            density=${ifDefined(density === "normal" ? void 0 : density)}
+            rounding=${ifDefined(rounding === "normal" ? void 0 : rounding)}
+            selects=${ifDefined(selects === "none" ? void 0 : selects)}
+            .selected=${selected}
+            shape=${ifDefined(shape === "normal" ? void 0 : shape)}
+            aria-label=${ifDefined(groupLabel)}
+        >
+            ${colors.map(
+    (color) => html`
+                    <sp-swatch
+                        color="var(${color})"
+                        label=${color}
+                        value=${color}
+                    ></sp-swatch>
+                `
+  )}
+        </sp-swatch-group>
+    `;
+};
+export const Default = (args) => template(args);
+Default.args = {};
+export const densityCompact = (args) => template(args);
+densityCompact.args = {
+  density: "compact"
+};
+export const densitySpacious = (args) => template(args);
+densitySpacious.args = {
+  density: "spacious"
+};
+export const selectsSingle = (args) => template(args);
+selectsSingle.args = {
+  selects: "single",
+  selected: ["--spectrum-yellow-500"]
+};
+export const selectsMultiple = (args) => template(args);
+selectsMultiple.args = {
+  selects: "multiple",
+  selected: [
+    "--spectrum-celery-500",
+    "--spectrum-red-500",
+    "--spectrum-purple-500",
+    "--spectrum-blue-500"
+  ]
+};
+export const borderLight = (args) => template(args);
+borderLight.args = {
+  border: "light"
+};
+export const borderNone = (args) => template(args);
+borderNone.args = {
+  border: "none"
+};
+export const roundingNone = (args) => template(args);
+roundingNone.args = {
+  rounding: "none"
+};
+export const roundingFull = (args) => template(args);
+roundingFull.args = {
+  rounding: "full"
+};
+export const shapeRectangle = (args) => template(args);
+shapeRectangle.args = {
+  shape: "rectangle"
+};
+//# sourceMappingURL=swatch-group.stories.js.map

package/stories/swatch-group.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch-group.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch-group.js';\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from '../src/Swatch.js';\nimport { SwatchGroup } from '../src/SwatchGroup.js';\n\ntype Properties = {\n    border: SwatchBorder | 'normal';\n    density?: 'normal' | 'spacious' | 'compact';\n    rounding?: SwatchRounding | 'normal';\n    selected?: string[];\n    selects?: 'none' | 'single' | 'multiple';\n    shape?: SwatchShape | 'normal';\n};\n\nexport default {\n    title: 'Swatch group',\n    component: 'sp-swatch-group',\n    args: {},\n    argTypes: {\n        border: {\n            name: 'border',\n            type: { name: 'string', required: false },\n            description: 'The border to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'light', 'none'],\n            },\n        },\n        density: {\n            name: 'density',\n            type: { name: 'string', required: false },\n            description: 'The density at which to display the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'compact', 'spacious'],\n            },\n        },\n        rounding: {\n            name: 'rounding',\n            type: { name: 'string', required: false },\n            description: 'The rounding to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'none', 'full'],\n            },\n        },\n        selects: {\n            name: 'selects',\n            type: { name: 'string', required: false },\n            description:\n                'Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['none', 'single', 'multiple'],\n            },\n        },\n        shape: {\n            name: 'shape',\n            type: { name: 'string', required: false },\n            description: 'The shape to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'rectangle'],\n            },\n        },\n    },\n    decorators: [\n        (\n            story: () => TemplateResult,\n            {\n                args: { selected = [] },\n            }: {\n                args: {\n                    selected: string[];\n                };\n            }\n        ): TemplateResult => html`\n            <div\n                @change=${async (event: Event & { target: SwatchGroup }) => {\n                    await 0;\n                    if (event.defaultPrevented) return;\n                    const next = event.target\n                        .nextElementSibling as HTMLDivElement;\n                    next.textContent = `Selected: ${JSON.stringify(\n                        event.target.selected\n                    )}`;\n                }}\n            >\n                ${story()}\n                <div>Selected: ${JSON.stringify(selected)}</div>\n            </div>\n        `,\n    ],\n};\n\nconst colors = [\n    '--spectrum-gray-700',\n    '--spectrum-red-700',\n    '--spectrum-orange-700',\n    '--spectrum-yellow-700',\n    '--spectrum-chartreuse-700',\n    '--spectrum-celery-700',\n    '--spectrum-green-700',\n    '--spectrum-seafoam-700',\n    '--spectrum-blue-700',\n    '--spectrum-indigo-700',\n    '--spectrum-purple-700',\n    '--spectrum-fuchsia-700',\n    '--spectrum-magenta-700',\n];\n\nconst template = ({\n    border,\n    density,\n    rounding,\n    selects,\n    selected = [],\n    shape,\n}: Properties): TemplateResult => {\n    const groupLabel = !!selects\n        ? selects === 'single'\n            ? 'Select a color'\n            : 'Selects color(s)'\n        : undefined;\n    return html`\n        <sp-swatch-group\n            border=${ifDefined(border === 'normal' ? undefined : border)}\n            density=${ifDefined(density === 'normal' ? undefined : density)}\n            rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n            selects=${ifDefined(selects === 'none' ? undefined : selects)}\n            .selected=${selected}\n            shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n            aria-label=${ifDefined(groupLabel)}\n        >\n            ${colors.map(\n                (color) => html`\n                    <sp-swatch\n                        color=\"var(${color})\"\n                        label=${color}\n                        value=${color}\n                    ></sp-swatch>\n                `\n            )}\n        </sp-swatch-group>\n    `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nDefault.args = {} as Properties;\nexport const densityCompact = (args: Properties): TemplateResult =>\n    template(args);\ndensityCompact.args = {\n    density: 'compact',\n} as Properties;\nexport const densitySpacious = (args: Properties): TemplateResult =>\n    template(args);\ndensitySpacious.args = {\n    density: 'spacious',\n} as Properties;\nexport const selectsSingle = (args: Properties): TemplateResult =>\n    template(args);\nselectsSingle.args = {\n    selects: 'single',\n    selected: ['--spectrum-yellow-500'],\n} as Properties;\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n    template(args);\nselectsMultiple.args = {\n    selects: 'multiple',\n    selected: [\n        '--spectrum-celery-500',\n        '--spectrum-red-500',\n        '--spectrum-purple-500',\n        '--spectrum-blue-500',\n    ],\n} as Properties;\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n    border: 'light',\n} as Properties;\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n    border: 'none',\n} as Properties;\nexport const roundingNone = (args: Properties): TemplateResult =>\n    template(args);\nroundingNone.args = {\n    rounding: 'none',\n} as Properties;\nexport const roundingFull = (args: Properties): TemplateResult =>\n    template(args);\nroundingFull.args = {\n    rounding: 'full',\n} as Properties;\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n    template(args);\nshapeRectangle.args = {\n    shape: 'rectangle',\n} as Properties;\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAE1B,OAAO;AACP,OAAO;AAiBP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM,CAAC;AAAA,EACP,UAAU;AAAA,IACN,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,SAAS,MAAM;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW,UAAU;AAAA,MAC7C;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,QAAQ,MAAM;AAAA,MACtC;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aACI;AAAA,MACJ,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,QAAQ,UAAU,UAAU;AAAA,MAC1C;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,YAAY;AAAA,IACR,CACI,OACA;AAAA,MACI,MAAM,EAAE,WAAW,CAAC,EAAE;AAAA,IAC1B,MAKiB;AAAA;AAAA,0BAEH,OAAO,UAA2C;AACxD,YAAM;AACN,UAAI,MAAM,iBAAkB;AAC5B,YAAM,OAAO,MAAM,OACd;AACL,WAAK,cAAc,aAAa,KAAK;AAAA,QACjC,MAAM,OAAO;AAAA,MACjB,CAAC;AAAA,IACL,CAAC;AAAA;AAAA,kBAEC,MAAM,CAAC;AAAA,iCACQ,KAAK,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,EAGrD;AACJ;AAEA,MAAM,SAAS;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACJ,MAAkC;AAC9B,QAAM,aAAa,CAAC,CAAC,UACf,YAAY,WACR,mBACA,qBACJ;AACN,SAAO;AAAA;AAAA,qBAEU,UAAU,WAAW,WAAW,SAAY,MAAM,CAAC;AAAA,sBAClD,UAAU,YAAY,WAAW,SAAY,OAAO,CAAC;AAAA,uBACpD,UAAU,aAAa,WAAW,SAAY,QAAQ,CAAC;AAAA,sBACxD,UAAU,YAAY,SAAS,SAAY,OAAO,CAAC;AAAA,wBACjD,QAAQ;AAAA,oBACZ,UAAU,UAAU,WAAW,SAAY,KAAK,CAAC;AAAA,yBAC5C,UAAU,UAAU,CAAC;AAAA;AAAA,cAEhC,OAAO;AAAA,IACL,CAAC,UAAU;AAAA;AAAA,qCAEU,KAAK;AAAA,gCACV,KAAK;AAAA,gCACL,KAAK;AAAA;AAAA;AAAA,EAGzB,CAAC;AAAA;AAAA;AAGb;AAEO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO,CAAC;AACT,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,SAAS;AACb;AACO,aAAM,kBAAkB,CAAC,SAC5B,SAAS,IAAI;AACjB,gBAAgB,OAAO;AAAA,EACnB,SAAS;AACb;AACO,aAAM,gBAAgB,CAAC,SAC1B,SAAS,IAAI;AACjB,cAAc,OAAO;AAAA,EACjB,SAAS;AAAA,EACT,UAAU,CAAC,uBAAuB;AACtC;AACO,aAAM,kBAAkB,CAAC,SAC5B,SAAS,IAAI;AACjB,gBAAgB,OAAO;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AACO,aAAM,cAAc,CAAC,SAAqC,SAAS,IAAI;AAC9E,YAAY,OAAO;AAAA,EACf,QAAQ;AACZ;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,QAAQ;AACZ;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,OAAO;AACX;",
+  "names": []
+}

package/stories/swatch-sizes.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+import {
+  html
+} from "@spectrum-web-components/base";
+import "@spectrum-web-components/swatch/sp-swatch.js";
+export default {
+  title: "Swatch/Sizes",
+  component: "sp-swatch"
+};
+const template = ({
+  size,
+  color = "rgb(255 0 0 / 0.7)"
+}) => html`
+    <div style="display: flex; gap: 5px;">
+        <sp-swatch color=${color} size=${size}></sp-swatch>
+        <sp-swatch color=${color} rounding="none" size=${size}></sp-swatch>
+        <sp-swatch color=${color} rounding="full" size=${size}></sp-swatch>
+        <sp-swatch color=${color} border="light" size=${size}></sp-swatch>
+        <sp-swatch color=${color} border="none" size=${size}></sp-swatch>
+        <sp-swatch nothing size=${size}></sp-swatch>
+        <sp-swatch color=${color} shape="rectangle" size=${size}></sp-swatch>
+        <sp-swatch
+            color=${color}
+            shape="rectangle"
+            size=${size}
+            disabled
+        ></sp-swatch>
+        <sp-swatch
+            rounding="full"
+            shape="rectangle"
+            size=${size}
+            mixed-value
+        ></sp-swatch>
+    </div>
+`;
+export const XS = () => template({ size: "xs" });
+export const s = () => template({ size: "s" });
+export const m = () => template({ size: "m" });
+export const l = () => template({ size: "l" });
+//# sourceMappingURL=swatch-sizes.stories.js.map

package/stories/swatch-sizes.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch-sizes.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    ElementSize,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\n\nexport default {\n    title: 'Swatch/Sizes',\n    component: 'sp-swatch',\n};\n\nconst template = ({\n    size,\n    color = 'rgb(255 0 0 / 0.7)',\n}: {\n    size: ElementSize;\n    color?: string;\n}): TemplateResult => html`\n    <div style=\"display: flex; gap: 5px;\">\n        <sp-swatch color=${color} size=${size}></sp-swatch>\n        <sp-swatch color=${color} rounding=\"none\" size=${size}></sp-swatch>\n        <sp-swatch color=${color} rounding=\"full\" size=${size}></sp-swatch>\n        <sp-swatch color=${color} border=\"light\" size=${size}></sp-swatch>\n        <sp-swatch color=${color} border=\"none\" size=${size}></sp-swatch>\n        <sp-swatch nothing size=${size}></sp-swatch>\n        <sp-swatch color=${color} shape=\"rectangle\" size=${size}></sp-swatch>\n        <sp-swatch\n            color=${color}\n            shape=\"rectangle\"\n            size=${size}\n            disabled\n        ></sp-swatch>\n        <sp-swatch\n            rounding=\"full\"\n            shape=\"rectangle\"\n            size=${size}\n            mixed-value\n        ></sp-swatch>\n    </div>\n`;\n\nexport const XS = (): TemplateResult => template({ size: 'xs' });\n\nexport const s = (): TemplateResult => template({ size: 's' });\n\nexport const m = (): TemplateResult => template({ size: 'm' });\n\nexport const l = (): TemplateResult => template({ size: 'l' });\n"],
+  "mappings": ";AAWA;AAAA,EAEI;AAAA,OAEG;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA,QAAQ;AACZ,MAGsB;AAAA;AAAA,2BAEK,KAAK,SAAS,IAAI;AAAA,2BAClB,KAAK,yBAAyB,IAAI;AAAA,2BAClC,KAAK,yBAAyB,IAAI;AAAA,2BAClC,KAAK,wBAAwB,IAAI;AAAA,2BACjC,KAAK,uBAAuB,IAAI;AAAA,kCACzB,IAAI;AAAA,2BACX,KAAK,2BAA2B,IAAI;AAAA;AAAA,oBAE3C,KAAK;AAAA;AAAA,mBAEN,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAMhB,aAAM,KAAK,MAAsB,SAAS,EAAE,MAAM,KAAK,CAAC;AAExD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AAEtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AAEtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;",
+  "names": []
+}

package/stories/swatch.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/swatch/sp-swatch.js";
+export default {
+  title: "Swatch",
+  component: "sp-swatch",
+  args: {
+    color: "#ff0000"
+  },
+  argTypes: {
+    color: { control: "color" },
+    border: {
+      name: "border",
+      type: { name: "string", required: false },
+      description: "The border to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "light", "none"]
+      }
+    },
+    rounding: {
+      name: "rounding",
+      type: { name: "string", required: false },
+      description: "The rounding to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "none", "full"]
+      }
+    },
+    shape: {
+      name: "shape",
+      type: { name: "string", required: false },
+      description: "The shape to apply to the Swatch children.",
+      table: {
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "inline-radio",
+        options: ["normal", "rectangle"]
+      }
+    }
+  }
+};
+const template = ({
+  color,
+  border,
+  rounding,
+  shape,
+  mixedValue: mixedValue2,
+  nothing: nothing2
+}) => {
+  return html`
+        <sp-swatch
+            border=${ifDefined(border === "normal" ? void 0 : border)}
+            rounding=${ifDefined(rounding === "normal" ? void 0 : rounding)}
+            shape=${ifDefined(shape === "normal" ? void 0 : shape)}
+            color=${color}
+            ?mixed-value=${mixedValue2}
+            ?nothing=${nothing2}
+        ></sp-swatch>
+    `;
+};
+export const Default = (args) => template(args);
+export const gradient = (args) => template(args);
+gradient.args = {
+  color: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
+};
+export const opacity = (args) => template(args);
+opacity.args = {
+  color: "rgba(255, 0, 0, 0.3)"
+};
+export const mixedValue = (args) => template(args);
+mixedValue.args = {
+  mixedValue: true,
+  color: ""
+};
+export const nothing = (args) => template(args);
+nothing.args = {
+  nothing: true,
+  color: ""
+};
+export const borderLight = (args) => template(args);
+borderLight.args = {
+  border: "light"
+};
+export const borderNone = (args) => template(args);
+borderNone.args = {
+  border: "none"
+};
+export const roundingNone = (args) => template(args);
+roundingNone.args = {
+  rounding: "none"
+};
+export const roundingFull = (args) => template(args);
+roundingFull.args = {
+  rounding: "full"
+};
+export const shapeRectangle = (args) => template(args);
+shapeRectangle.args = {
+  shape: "rectangle"
+};
+//# sourceMappingURL=swatch.stories.js.map

package/stories/swatch.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["swatch.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from '../src/Swatch.js';\n\ntype Properties = {\n    color: string;\n    border: SwatchBorder | 'normal';\n    rounding: SwatchRounding | 'normal';\n    shape: SwatchShape | 'normal';\n    mixedValue?: boolean;\n    nothing?: boolean;\n};\n\nexport default {\n    title: 'Swatch',\n    component: 'sp-swatch',\n    args: {\n        color: '#ff0000',\n    },\n    argTypes: {\n        color: { control: 'color' },\n        border: {\n            name: 'border',\n            type: { name: 'string', required: false },\n            description: 'The border to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'light', 'none'],\n            },\n        },\n        rounding: {\n            name: 'rounding',\n            type: { name: 'string', required: false },\n            description: 'The rounding to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'none', 'full'],\n            },\n        },\n        shape: {\n            name: 'shape',\n            type: { name: 'string', required: false },\n            description: 'The shape to apply to the Swatch children.',\n            table: {\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'inline-radio',\n                options: ['normal', 'rectangle'],\n            },\n        },\n    },\n};\n\nconst template = ({\n    color,\n    border,\n    rounding,\n    shape,\n    mixedValue,\n    nothing,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-swatch\n            border=${ifDefined(border === 'normal' ? undefined : border)}\n            rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n            shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n            color=${color}\n            ?mixed-value=${mixedValue}\n            ?nothing=${nothing}\n        ></sp-swatch>\n    `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nexport const gradient = (args: Properties): TemplateResult => template(args);\ngradient.args = {\n    color: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',\n};\nexport const opacity = (args: Properties): TemplateResult => template(args);\nopacity.args = {\n    color: 'rgba(255, 0, 0, 0.3)',\n};\nexport const mixedValue = (args: Properties): TemplateResult => template(args);\nmixedValue.args = {\n    mixedValue: true,\n    color: '',\n};\nexport const nothing = (args: Properties): TemplateResult => template(args);\nnothing.args = {\n    nothing: true,\n    color: '',\n};\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n    border: 'light',\n};\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n    border: 'none',\n};\nexport const roundingNone = (args: Properties): TemplateResult =>\n    template(args);\nroundingNone.args = {\n    rounding: 'none',\n};\nexport const roundingFull = (args: Properties): TemplateResult =>\n    template(args);\nroundingFull.args = {\n    rounding: 'full',\n};\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n    template(args);\nshapeRectangle.args = {\n    shape: 'rectangle',\n};\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AACrC,SAAS,iBAAiB;AAE1B,OAAO;AAgBP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,OAAO;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACN,OAAO,EAAE,SAAS,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,SAAS,MAAM;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,QAAQ,MAAM;AAAA,MACtC;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,UAAU,WAAW;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAAA;AAAA,EACA,SAAAC;AACJ,MAAkC;AAC9B,SAAO;AAAA;AAAA,qBAEU,UAAU,WAAW,WAAW,SAAY,MAAM,CAAC;AAAA,uBACjD,UAAU,aAAa,WAAW,SAAY,QAAQ,CAAC;AAAA,oBAC1D,UAAU,UAAU,WAAW,SAAY,KAAK,CAAC;AAAA,oBACjD,KAAK;AAAA,2BACED,WAAU;AAAA,uBACdC,QAAO;AAAA;AAAA;AAG9B;AAEO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AACnE,aAAM,WAAW,CAAC,SAAqC,SAAS,IAAI;AAC3E,SAAS,OAAO;AAAA,EACZ,OAAO;AACX;AACO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO;AAAA,EACX,OAAO;AACX;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,YAAY;AAAA,EACZ,OAAO;AACX;AACO,aAAM,UAAU,CAAC,SAAqC,SAAS,IAAI;AAC1E,QAAQ,OAAO;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AACX;AACO,aAAM,cAAc,CAAC,SAAqC,SAAS,IAAI;AAC9E,YAAY,OAAO;AAAA,EACf,QAAQ;AACZ;AACO,aAAM,aAAa,CAAC,SAAqC,SAAS,IAAI;AAC7E,WAAW,OAAO;AAAA,EACd,QAAQ;AACZ;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,eAAe,CAAC,SACzB,SAAS,IAAI;AACjB,aAAa,OAAO;AAAA,EAChB,UAAU;AACd;AACO,aAAM,iBAAiB,CAAC,SAC3B,SAAS,IAAI;AACjB,eAAe,OAAO;AAAA,EAClB,OAAO;AACX;",
+  "names": ["mixedValue", "nothing"]
+}

package/test/benchmark/basic-test.js

@@ -0,0 +1,8 @@
+"use strict";
+import "@spectrum-web-components/swatch/sp-swatch.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
+    <sp-swatch></sp-swatch>
+`);
+//# sourceMappingURL=basic-test.js.map

package/test/benchmark/basic-test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["basic-test.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport { html } from '@spectrum-web-components/base';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-swatch></sp-swatch>\n`);\n"],
+  "mappings": ";AAWA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA,CAEtB;",
+  "names": []
+}

package/test/swatch-group.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/swatch-group.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("SwatchGroupStories", stories);
+//# sourceMappingURL=swatch-group.test-vrt.js.map