@spectrum-web-components/swatch 1.7.0 → 1.8.0

package/README.md

@@ -1,4 +1,4 @@
-## Description
+## Overview
 
 An `<sp-swatch>` shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
 
@@ -7,23 +7,25 @@ An `<sp-swatch>` shows a small sample of a fill — such as a color, gradient, t
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/swatch?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/swatch)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/swatch?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/swatch)
 
-```
+```bash
 yarn add @spectrum-web-components/swatch
 ```
 
 Import the side effectful registration of `<sp-swatch>` via:
 
-```
+```js
 import '@spectrum-web-components/swatch/sp-swatch.js';
 ```
 
 When looking to leverage the `Swatch` base class as a type and/or for extension purposes, do so via:
 
-```
+```js
 import { Swatch } from '@spectrum-web-components/swatch';
 ```
 
-## Sizes
+### Options
+
+#### Sizes
 
 <sp-tabs selected="m" auto label="Size Attribute Options">
 <sp-tab value="xs">Extra Small</sp-tab>
@@ -156,11 +158,13 @@ import { Swatch } from '@spectrum-web-components/swatch';
 </sp-tab-panel>
 </sp-tabs>
 
-## Modifying attributes
+#### Variants
 
 An `<sp-swatch>` element can be modified by the following attributes/properties to customize its delivery as desired for your use case: `border`, `color`, `disabled`, `mixedValue` (accepted as the `mixed-value` attribute), `nothing`, `rounding`, and `shape`. Use these in concert with each other for a variety of final visual deliveries.
 
-### Border
+<sp-tabs selected="border" auto label="Variant Options">
+<sp-tab value="border">Border</sp-tab>
+<sp-tab-panel value="border">
 
 The `border` attribute/property is not required and when applied accepts the values of `none` or `light`.
 
@@ -172,7 +176,9 @@ The `border` attribute/property is not required and when applied accepts the val
 </sp-swatch-group>
 ```
 
-### Color
+</sp-tab-panel>
+<sp-tab value="color">Color</sp-tab>
+<sp-tab-panel value="color">
 
 The `color` attribute/property determines the color value that the `<sp-swatch>` element will deliver.
 
@@ -184,19 +190,9 @@ The `color` attribute/property determines the color value that the `<sp-swatch>`
 </sp-swatch-group>
 ```
 
-### Disabled
-
-The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
-
-```html
-<sp-swatch-group>
-    <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
-    <sp-swatch disabled color="orange"></sp-swatch>
-    <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
-</sp-swatch-group>
-```
-
-### Mixed value
+</sp-tab-panel>
+<sp-tab value="mixed-value">Mixed Value</sp-tab>
+<sp-tab-panel value="mixed-value">
 
 The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatch>` element represents more than one color.
 
@@ -210,7 +206,9 @@ The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatc
 
 Please note that the `aria-checked="mixed"` value only applies when the swatch is in a group with `selects="multiple"`
 
-### Nothing
+</sp-tab-panel>
+<sp-tab value="nothing">Nothing</sp-tab>
+<sp-tab-panel value="nothing">
 
 The `nothing` attribute/property outlines that the `<sp-swatch>` represents no color or that it represents "transparent".
 
@@ -222,7 +220,9 @@ The `nothing` attribute/property outlines that the `<sp-swatch>` represents no c
 </sp-swatch-group>
 ```
 
-### Rounding
+</sp-tab-panel>
+<sp-tab value="rounding">Rounding</sp-tab>
+<sp-tab-panel value="rounding">
 
 The `rounding` attribute/property is not required and when applied accepts the values of `none` or `full`.
 
@@ -234,7 +234,9 @@ The `rounding` attribute/property is not required and when applied accepts the v
 </sp-swatch-group>
 ```
 
-### Shape
+</sp-tab-panel>
+<sp-tab value="shape">Shape</sp-tab>
+<sp-tab-panel value="shape">
 
 The `shape` attribute/property is not required and when applied accepts the values of `rectangle`.
 
@@ -244,3 +246,33 @@ The `shape` attribute/property is not required and when applied accepts the valu
     <sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
 </sp-swatch-group>
 ```
+
+</sp-tab-panel>
+</sp-tabs>
+
+### States
+
+#### Disabled
+
+The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
+
+```html
+<sp-swatch-group>
+    <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch disabled color="orange"></sp-swatch>
+    <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Accessibility
+
+#### Best practices
+
+- Ensure swatches have sufficient color contrast for visibility.
+- Verify that swatches are appropriately labeled for screen readers.
+
+#### Keyboard navigation
+
+- `Tab`: Move focus to the next focusable element
+- `Arrow keys`: Navigate between swatches in the group and move the focus indicator
+- `Enter` or `Space`: Select the focused swatch

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/swatch",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "publishConfig": {
         "access": "public"
     },
@@ -75,12 +75,12 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.2",
-        "@spectrum-web-components/base": "1.7.0",
-        "@spectrum-web-components/icon": "1.7.0",
-        "@spectrum-web-components/icons-ui": "1.7.0",
-        "@spectrum-web-components/opacity-checkerboard": "1.7.0",
-        "@spectrum-web-components/reactive-controllers": "1.7.0",
-        "@spectrum-web-components/shared": "1.7.0"
+        "@spectrum-web-components/base": "1.8.0",
+        "@spectrum-web-components/icon": "1.8.0",
+        "@spectrum-web-components/icons-ui": "1.8.0",
+        "@spectrum-web-components/opacity-checkerboard": "1.8.0",
+        "@spectrum-web-components/reactive-controllers": "1.8.0",
+        "@spectrum-web-components/shared": "1.8.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

package/sp-swatch-group.d.ts

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

package/sp-swatch-group.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-swatch-group.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 { SwatchGroup } from './src/SwatchGroup.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { SwatchGroup } from './src/SwatchGroup.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
   "mappings": ";AAWA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,cAAc,mBAAmB,WAAW;",
   "names": []
 }

package/sp-swatch-group.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-swatch-group.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 { SwatchGroup } from './src/SwatchGroup.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { SwatchGroup } from './src/SwatchGroup.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
   "mappings": "aAWA,OAAS,eAAAA,MAAmB,uBAC5B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,kBAAmBD,CAAW",
   "names": ["SwatchGroup", "defineElement"]
 }

package/sp-swatch.d.ts

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

package/sp-swatch.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-swatch.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 { Swatch } from './src/Swatch.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Swatch } from './src/Swatch.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
   "mappings": ";AAWA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
   "names": []
 }

package/sp-swatch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["sp-swatch.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 { Swatch } from './src/Swatch.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { Swatch } from './src/Swatch.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
   "mappings": "aAWA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
   "names": ["Swatch", "defineElement"]
 }

package/src/Swatch.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';

package/src/Swatch.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Swatch.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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n    ifDefined,\n    when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n    xs: () => html`\n        <sp-icon-dash75\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n        ></sp-icon-dash75>\n    `,\n    s: () => html`\n        <sp-icon-dash100\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n        ></sp-icon-dash100>\n    `,\n    m: () => html`\n        <sp-icon-dash200\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n        ></sp-icon-dash200>\n    `,\n    l: () => html`\n        <sp-icon-dash300\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n        ></sp-icon-dash300>\n    `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [opacityCheckerboardStyles, styles, dashStyles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property()\n    public color = '';\n\n    @property()\n    public label = '';\n\n    @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n    public mixedValue = false;\n\n    @property({ type: Boolean, reflect: true })\n    public nothing = false;\n\n    @property({ reflect: true })\n    public override role = 'button';\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @property()\n    get value(): string {\n        return this._value || this.color || this.label;\n    }\n\n    set value(value: string) {\n        if (value === this._value) return;\n        const oldValue = this.value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    private _value?: string;\n\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    public toggle(force?: boolean): void {\n        this.selected = force ?? !this.selected;\n    }\n\n    private handleClick(): void {\n        if (this.disabled || this.mixedValue) return;\n        this.toggle();\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this.toggle();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                event.preventDefault();\n                this.addEventListener('keyup', this.handleKeyup);\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    private handleKeypress(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Enter':\n            case 'NumpadEnter':\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                this.removeEventListener('keyup', this.handleKeyup);\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected renderDisabled = (): TemplateResult => {\n        return html`\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"disabledIcon\"\n                viewBox=\"0 0 20 20\"\n            >\n                <path\n                    d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n                />\n                <path\n                    d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n                />\n            </svg>\n        `;\n    };\n\n    protected renderMixedValue = (): TemplateResult => {\n        return dashIcon[this.size]();\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <div\n                class=\"opacity-checkerboard fill\"\n                style=${ifDefined(\n                    this.color\n                        ? `--spectrum-picked-color: ${this.color}`\n                        : undefined\n                )}\n            >\n                <slot name=\"image\"></slot>\n                ${when(this.disabled, this.renderDisabled)}\n                ${when(this.mixedValue, this.renderMixedValue)}\n            </div>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues): void {\n        if (!this.getAttribute('role')) {\n            this.setAttribute('role', 'button');\n        }\n        if (changes.has('selected') || changes.has('role')) {\n            const selectedAttribute =\n                this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n            const removedSelectedAttribute =\n                this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n            if (changes.has('role')) {\n                this.removeAttribute(removedSelectedAttribute);\n            }\n            this.setAttribute(\n                selectedAttribute,\n                this.selected ? 'true' : 'false'\n            );\n        }\n\n        // aria-label should be in sync with changes in label and color.\n        if (\n            changes.has('label') ||\n            changes.has('color') ||\n            changes.has('mixedValue')\n        ) {\n            if (this.label !== this.color && this.label?.length) {\n                this.setAttribute('aria-label', this.label);\n            } else if (this.color) {\n                this.setAttribute('aria-label', this.color);\n            } else if (this.mixedValue) {\n                this.setAttribute('aria-label', 'Mixed');\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.addEventListener('click', this.handleClick);\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('keypress', this.handleKeypress);\n        if (!this.hasAttribute('tabindex')) {\n            this.setAttribute('tabindex', '0');\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n    ifDefined,\n    when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n    xs: () => html`\n        <sp-icon-dash75\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n        ></sp-icon-dash75>\n    `,\n    s: () => html`\n        <sp-icon-dash100\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n        ></sp-icon-dash100>\n    `,\n    m: () => html`\n        <sp-icon-dash200\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n        ></sp-icon-dash200>\n    `,\n    l: () => html`\n        <sp-icon-dash300\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n        ></sp-icon-dash300>\n    `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [opacityCheckerboardStyles, styles, dashStyles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property()\n    public color = '';\n\n    @property()\n    public label = '';\n\n    @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n    public mixedValue = false;\n\n    @property({ type: Boolean, reflect: true })\n    public nothing = false;\n\n    @property({ reflect: true })\n    public override role = 'button';\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @property()\n    get value(): string {\n        return this._value || this.color || this.label;\n    }\n\n    set value(value: string) {\n        if (value === this._value) return;\n        const oldValue = this.value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    private _value?: string;\n\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    public toggle(force?: boolean): void {\n        this.selected = force ?? !this.selected;\n    }\n\n    private handleClick(): void {\n        if (this.disabled || this.mixedValue) return;\n        this.toggle();\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this.toggle();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                event.preventDefault();\n                this.addEventListener('keyup', this.handleKeyup);\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    private handleKeypress(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Enter':\n            case 'NumpadEnter':\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                this.removeEventListener('keyup', this.handleKeyup);\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected renderDisabled = (): TemplateResult => {\n        return html`\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"disabledIcon\"\n                viewBox=\"0 0 20 20\"\n            >\n                <path\n                    d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n                />\n                <path\n                    d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n                />\n            </svg>\n        `;\n    };\n\n    protected renderMixedValue = (): TemplateResult => {\n        return dashIcon[this.size]();\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <div\n                class=\"opacity-checkerboard fill\"\n                style=${ifDefined(\n                    this.color\n                        ? `--spectrum-picked-color: ${this.color}`\n                        : undefined\n                )}\n            >\n                <slot name=\"image\"></slot>\n                ${when(this.disabled, this.renderDisabled)}\n                ${when(this.mixedValue, this.renderMixedValue)}\n            </div>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues): void {\n        if (!this.getAttribute('role')) {\n            this.setAttribute('role', 'button');\n        }\n        if (changes.has('selected') || changes.has('role')) {\n            const selectedAttribute =\n                this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n            const removedSelectedAttribute =\n                this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n            if (changes.has('role')) {\n                this.removeAttribute(removedSelectedAttribute);\n            }\n            this.setAttribute(\n                selectedAttribute,\n                this.selected ? 'true' : 'false'\n            );\n        }\n\n        // aria-label should be in sync with changes in label and color.\n        if (\n            changes.has('label') ||\n            changes.has('color') ||\n            changes.has('mixedValue')\n        ) {\n            if (this.label !== this.color && this.label?.length) {\n                this.setAttribute('aria-label', this.label);\n            } else if (this.color) {\n                this.setAttribute('aria-label', this.color);\n            } else if (this.mixedValue) {\n                this.setAttribute('aria-label', 'Mixed');\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.addEventListener('click', this.handleClick);\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('keypress', this.handleKeypress);\n        if (!this.hasAttribute('tabindex')) {\n            this.setAttribute('tabindex', '0');\n        }\n    }\n}\n"],
   "mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,OAAO,+BAA+B;AACtC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAMvB,MAAM,WAAiD;AAAA,EACnD,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMb;AAKO,aAAM,eAAe,WAAW,WAAW;AAAA,EAC9C,YAAY,CAAC,MAAM,KAAK,KAAK,GAAG;AAAA,EAChC,eAAe;AACnB,CAAC,EAAE;AAAA,EAHI;AAAA;AAYH,SAAO,QAAQ;AAGf,SAAO,QAAQ;AAGf,SAAO,aAAa;AAGpB,SAAO,UAAU;AAGjB,SAAgB,OAAO;AAMvB,SAAO,WAAW;AAgFlB,SAAU,iBAAiB,MAAsB;AAC7C,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBX;AAEA,SAAU,mBAAmB,MAAsB;AAC/C,aAAO,SAAS,KAAK,IAAI,EAAE;AAAA,IAC/B;AAAA;AAAA,EAjIA,WAA2B,SAAyB;AAChD,WAAO,CAAC,2BAA2B,QAAQ,UAAU;AAAA,EACzD;AAAA,EA8BA,IAAI,QAAgB;AAChB,WAAO,KAAK,UAAU,KAAK,SAAS,KAAK;AAAA,EAC7C;AAAA,EAEA,IAAI,MAAM,OAAe;AACrB,QAAI,UAAU,KAAK,OAAQ;AAC3B,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,SAAS,QAAQ;AAAA,EACxC;AAAA,EAIA,IAAoB,eAA4B;AAC5C,WAAO;AAAA,EACX;AAAA,EAEO,OAAO,OAAuB;AACjC,SAAK,WAAW,wBAAS,CAAC,KAAK;AAAA,EACnC;AAAA,EAEQ,cAAoB;AACxB,QAAI,KAAK,YAAY,KAAK,WAAY;AACtC,SAAK,OAAO;AACZ,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf,WAAK,OAAO;AAAA,IAChB;AAAA,EACJ;AAAA,EAEU,cAAc,OAA4B;AAChD,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,cAAM,eAAe;AACrB,aAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C;AAAA,MAEJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EAEQ,eAAe,OAA4B;AAC/C,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AAAA,MACL,KAAK;AACD,aAAK,MAAM;AACX;AAAA,MAEJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EAEU,YAAY,OAA4B;AAC9C,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,aAAK,oBAAoB,SAAS,KAAK,WAAW;AAClD,aAAK,MAAM;AACX;AAAA,MAEJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EA2BmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,wBAGS;AAAA,MACJ,KAAK,QACC,4BAA4B,KAAK,KAAK,KACtC;AAAA,IACV,CAAC;AAAA;AAAA;AAAA,kBAGC,KAAK,KAAK,UAAU,KAAK,cAAc,CAAC;AAAA,kBACxC,KAAK,KAAK,YAAY,KAAK,gBAAgB,CAAC;AAAA;AAAA;AAAA,EAG1D;AAAA,EAEmB,WAAW,SAA+B;AA3NjE;AA4NQ,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,QAAQ,QAAQ;AAAA,IACtC;AACA,QAAI,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,MAAM,GAAG;AAChD,YAAM,oBACF,KAAK,SAAS,WAAW,iBAAiB;AAC9C,YAAM,2BACF,KAAK,SAAS,WAAW,iBAAiB;AAC9C,UAAI,QAAQ,IAAI,MAAM,GAAG;AACrB,aAAK,gBAAgB,wBAAwB;AAAA,MACjD;AACA,WAAK;AAAA,QACD;AAAA,QACA,KAAK,WAAW,SAAS;AAAA,MAC7B;AAAA,IACJ;AAGA,QACI,QAAQ,IAAI,OAAO,KACnB,QAAQ,IAAI,OAAO,KACnB,QAAQ,IAAI,YAAY,GAC1B;AACE,UAAI,KAAK,UAAU,KAAK,WAAS,UAAK,UAAL,mBAAY,SAAQ;AACjD,aAAK,aAAa,cAAc,KAAK,KAAK;AAAA,MAC9C,WAAW,KAAK,OAAO;AACnB,aAAK,aAAa,cAAc,KAAK,KAAK;AAAA,MAC9C,WAAW,KAAK,YAAY;AACxB,aAAK,aAAa,cAAc,OAAO;AAAA,MAC3C,OAAO;AACH,aAAK,gBAAgB,YAAY;AAAA,MACrC;AAAA,IACJ;AAAA,EACJ;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,WAAW,KAAK,aAAa;AACnD,SAAK,iBAAiB,YAAY,KAAK,cAAc;AACrD,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,WAAK,aAAa,YAAY,GAAG;AAAA,IACrC;AAAA,EACJ;AACJ;AA5LW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GARlB,OASF;AAGA;AAAA,EADN,SAAS;AAAA,GAXD,OAYF;AAGA;AAAA,EADN,SAAS;AAAA,GAdD,OAeF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc,CAAC;AAAA,GAjB3D,OAkBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBjC,OAqBF;AAGS;AAAA,EADf,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvBlB,OAwBO;AAGT;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BlB,OA2BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BjC,OA8BF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAhClB,OAiCF;AAGH;AAAA,EADH,SAAS;AAAA,GAnCD,OAoCL;",
   "names": []
 }

package/src/Swatch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Swatch.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 {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n    ifDefined,\n    when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n    xs: () => html`\n        <sp-icon-dash75\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n        ></sp-icon-dash75>\n    `,\n    s: () => html`\n        <sp-icon-dash100\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n        ></sp-icon-dash100>\n    `,\n    m: () => html`\n        <sp-icon-dash200\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n        ></sp-icon-dash200>\n    `,\n    l: () => html`\n        <sp-icon-dash300\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n        ></sp-icon-dash300>\n    `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [opacityCheckerboardStyles, styles, dashStyles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property()\n    public color = '';\n\n    @property()\n    public label = '';\n\n    @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n    public mixedValue = false;\n\n    @property({ type: Boolean, reflect: true })\n    public nothing = false;\n\n    @property({ reflect: true })\n    public override role = 'button';\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @property()\n    get value(): string {\n        return this._value || this.color || this.label;\n    }\n\n    set value(value: string) {\n        if (value === this._value) return;\n        const oldValue = this.value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    private _value?: string;\n\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    public toggle(force?: boolean): void {\n        this.selected = force ?? !this.selected;\n    }\n\n    private handleClick(): void {\n        if (this.disabled || this.mixedValue) return;\n        this.toggle();\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this.toggle();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                event.preventDefault();\n                this.addEventListener('keyup', this.handleKeyup);\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    private handleKeypress(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Enter':\n            case 'NumpadEnter':\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                this.removeEventListener('keyup', this.handleKeyup);\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected renderDisabled = (): TemplateResult => {\n        return html`\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"disabledIcon\"\n                viewBox=\"0 0 20 20\"\n            >\n                <path\n                    d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n                />\n                <path\n                    d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n                />\n            </svg>\n        `;\n    };\n\n    protected renderMixedValue = (): TemplateResult => {\n        return dashIcon[this.size]();\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <div\n                class=\"opacity-checkerboard fill\"\n                style=${ifDefined(\n                    this.color\n                        ? `--spectrum-picked-color: ${this.color}`\n                        : undefined\n                )}\n            >\n                <slot name=\"image\"></slot>\n                ${when(this.disabled, this.renderDisabled)}\n                ${when(this.mixedValue, this.renderMixedValue)}\n            </div>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues): void {\n        if (!this.getAttribute('role')) {\n            this.setAttribute('role', 'button');\n        }\n        if (changes.has('selected') || changes.has('role')) {\n            const selectedAttribute =\n                this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n            const removedSelectedAttribute =\n                this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n            if (changes.has('role')) {\n                this.removeAttribute(removedSelectedAttribute);\n            }\n            this.setAttribute(\n                selectedAttribute,\n                this.selected ? 'true' : 'false'\n            );\n        }\n\n        // aria-label should be in sync with changes in label and color.\n        if (\n            changes.has('label') ||\n            changes.has('color') ||\n            changes.has('mixedValue')\n        ) {\n            if (this.label !== this.color && this.label?.length) {\n                this.setAttribute('aria-label', this.label);\n            } else if (this.color) {\n                this.setAttribute('aria-label', this.color);\n            } else if (this.mixedValue) {\n                this.setAttribute('aria-label', 'Mixed');\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.addEventListener('click', this.handleClick);\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('keypress', this.handleKeypress);\n        if (!this.hasAttribute('tabindex')) {\n            this.setAttribute('tabindex', '0');\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n    ifDefined,\n    when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n    xs: () => html`\n        <sp-icon-dash75\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n        ></sp-icon-dash75>\n    `,\n    s: () => html`\n        <sp-icon-dash100\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n        ></sp-icon-dash100>\n    `,\n    m: () => html`\n        <sp-icon-dash200\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n        ></sp-icon-dash200>\n    `,\n    l: () => html`\n        <sp-icon-dash300\n            slot=\"icon\"\n            class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n        ></sp-icon-dash300>\n    `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [opacityCheckerboardStyles, styles, dashStyles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property()\n    public color = '';\n\n    @property()\n    public label = '';\n\n    @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n    public mixedValue = false;\n\n    @property({ type: Boolean, reflect: true })\n    public nothing = false;\n\n    @property({ reflect: true })\n    public override role = 'button';\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Boolean, reflect: true })\n    public selected = false;\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @property()\n    get value(): string {\n        return this._value || this.color || this.label;\n    }\n\n    set value(value: string) {\n        if (value === this._value) return;\n        const oldValue = this.value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    private _value?: string;\n\n    public override get focusElement(): HTMLElement {\n        return this;\n    }\n\n    public toggle(force?: boolean): void {\n        this.selected = force ?? !this.selected;\n    }\n\n    private handleClick(): void {\n        if (this.disabled || this.mixedValue) return;\n        this.toggle();\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this.toggle();\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                event.preventDefault();\n                this.addEventListener('keyup', this.handleKeyup);\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    private handleKeypress(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Enter':\n            case 'NumpadEnter':\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        const { code } = event;\n        switch (code) {\n            case 'Space':\n                this.removeEventListener('keyup', this.handleKeyup);\n                this.click();\n                break;\n            /* c8 ignore next 2 */\n            default:\n                break;\n        }\n    }\n\n    protected renderDisabled = (): TemplateResult => {\n        return html`\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"disabledIcon\"\n                viewBox=\"0 0 20 20\"\n            >\n                <path\n                    d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n                />\n                <path\n                    d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n                    stroke=\"none\"\n                    fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n                />\n            </svg>\n        `;\n    };\n\n    protected renderMixedValue = (): TemplateResult => {\n        return dashIcon[this.size]();\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            <div\n                class=\"opacity-checkerboard fill\"\n                style=${ifDefined(\n                    this.color\n                        ? `--spectrum-picked-color: ${this.color}`\n                        : undefined\n                )}\n            >\n                <slot name=\"image\"></slot>\n                ${when(this.disabled, this.renderDisabled)}\n                ${when(this.mixedValue, this.renderMixedValue)}\n            </div>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues): void {\n        if (!this.getAttribute('role')) {\n            this.setAttribute('role', 'button');\n        }\n        if (changes.has('selected') || changes.has('role')) {\n            const selectedAttribute =\n                this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n            const removedSelectedAttribute =\n                this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n            if (changes.has('role')) {\n                this.removeAttribute(removedSelectedAttribute);\n            }\n            this.setAttribute(\n                selectedAttribute,\n                this.selected ? 'true' : 'false'\n            );\n        }\n\n        // aria-label should be in sync with changes in label and color.\n        if (\n            changes.has('label') ||\n            changes.has('color') ||\n            changes.has('mixedValue')\n        ) {\n            if (this.label !== this.color && this.label?.length) {\n                this.setAttribute('aria-label', this.label);\n            } else if (this.color) {\n                this.setAttribute('aria-label', this.color);\n            } else if (this.mixedValue) {\n                this.setAttribute('aria-label', 'Mixed');\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    protected override firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.addEventListener('click', this.handleClick);\n        this.addEventListener('keydown', this.handleKeydown);\n        this.addEventListener('keypress', this.handleKeypress);\n        if (!this.hasAttribute('tabindex')) {\n            this.setAttribute('tabindex', '0');\n        }\n    }\n}\n"],
   "mappings": "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",
   "names": ["html", "SizedMixin", "property", "ifDefined", "when", "Focusable", "opacityCheckerboardStyles", "styles", "dashStyles", "dashIcon", "value", "oldValue", "force", "event", "code", "changes", "_a", "selectedAttribute", "removedSelectedAttribute", "__decorateClass"]
 }

package/src/SwatchGroup.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 import { CSSResultArray, ElementSize, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import type { Swatch, SwatchBorder, SwatchRounding, SwatchShape } from './Swatch.js';

package/src/SwatchGroup.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["SwatchGroup.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*/\n\nimport {\n    CSSResultArray,\n    ElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n    Swatch,\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from './Swatch.dev.js'\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property({ reflect: true })\n    public density: 'compact' | 'spacious' | undefined;\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Array })\n    public get selected(): string[] {\n        return this._selected;\n    }\n\n    public set selected(selected: string[]) {\n        if (selected === this.selected) return;\n\n        const oldSelected = this.selected;\n        this._selected = selected;\n        this.requestUpdate('selected', oldSelected);\n    }\n\n    // Specifically surface `_selected` internally so that change can be made to this value internally\n    // without triggering the update lifecycle directly.\n    private _selected: string[] = [];\n\n    @property()\n    public selects: SwatchSelects;\n\n    private selectedSet = new Set<string>();\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @queryAssignedElements({ flatten: true })\n    public swatches!: Swatch[];\n\n    constructor() {\n        super();\n\n        new MutationController(this, {\n            config: {\n                attributes: true,\n                childList: true,\n                subtree: true,\n            },\n            callback: () => {\n                this.manageChange();\n            },\n        });\n    }\n\n    rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n        focusInIndex: (elements: Swatch[]) => {\n            let firstEnabledIndex = -1;\n            const firstSelectedIndex = elements.findIndex((el, index) => {\n                if (!elements[firstEnabledIndex] && !el.disabled) {\n                    firstEnabledIndex = index;\n                }\n                return el.selected && !el.disabled;\n            });\n            return elements[firstSelectedIndex]\n                ? firstSelectedIndex\n                : firstEnabledIndex;\n        },\n        elements: () => this.swatches,\n        isFocusableElement: (el: Swatch) => !el.disabled,\n    });\n\n    public override focus(options?: FocusOptions): void {\n        this.rovingTabindexController.focus(options);\n    }\n\n    protected handleChange(event: Event & { target: Swatch }): void {\n        event.stopPropagation();\n        const oldSelected = this.selected;\n        if (!this.selects) {\n            event.preventDefault();\n            return;\n        }\n        if (this.selects === 'single') {\n            const { target } = event;\n            target.tabIndex = 0;\n            target.selected = true;\n            if (this.selectedSet.has(target.value)) {\n                return;\n            }\n            this.selectedSet.clear();\n            this.selectedSet.add(target.value);\n            this.rovingTabindexController.elements.forEach((child) => {\n                if (child === target) return;\n                child.selected = false;\n            });\n        } else if (this.selects === 'multiple') {\n            const { target } = event;\n            if (target.selected) {\n                this.selectedSet.add(target.value);\n            } else {\n                this.selectedSet.delete(target.value);\n            }\n        }\n        this._selected = [...this.selectedSet];\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this._selected = oldSelected;\n            event.preventDefault();\n        }\n    }\n\n    private manageChange = async (): Promise<void> => {\n        const presentSet = new Set();\n        this.selectedSet = new Set(this.selected);\n        await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n        this.swatches.forEach((swatch) => {\n            presentSet.add(swatch.value);\n            if (swatch.selected) {\n                this.selectedSet.add(swatch.value);\n            }\n        });\n        this.selectedSet.forEach((value) => {\n            if (!presentSet.has(value)) {\n                this.selectedSet.delete(value);\n            }\n        });\n        this._selected = [...this.selectedSet];\n        this.rovingTabindexController.clearElementCache();\n    };\n\n    private getPassthroughSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const targetValues: {\n            border?: SwatchBorder;\n            rounding?: SwatchRounding;\n            shape?: SwatchShape;\n            size?: SwatchGroupSizes;\n            selects?: SwatchSelects;\n        } = {};\n        if (\n            changes.has('selects') &&\n            (this.selects || typeof changes.get('selects') !== 'undefined')\n        ) {\n            targetValues.selects = this.selects;\n        }\n        if (\n            changes.has('border') &&\n            (this.border || typeof changes.get('border') !== 'undefined')\n        ) {\n            targetValues.border = this.border;\n        }\n        if (\n            changes.has('rounding') &&\n            (this.rounding || typeof changes.get('rounding') !== 'undefined')\n        ) {\n            targetValues.rounding = this.rounding;\n        }\n        if (\n            changes.has('size') &&\n            (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n        ) {\n            targetValues.size = this.size as SwatchGroupSizes;\n        }\n        if (\n            changes.has('shape') &&\n            (this.shape || typeof changes.get('shape') !== 'undefined')\n        ) {\n            targetValues.shape = this.shape;\n        }\n        const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (Object.keys(targetValues).length) {\n            passThroughSwatchActions.push((swatch) => {\n                if (window.__swc.DEBUG) {\n                    if (\n                        'selects' in targetValues &&\n                        targetValues.selects !== 'multiple' &&\n                        swatch.mixedValue\n                    ) {\n                        window.__swc.warn(\n                            this,\n                            `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n                            'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n                            {\n                                type: 'accessibility',\n                            }\n                        );\n                    }\n                }\n                if ('border' in targetValues)\n                    swatch.border = targetValues.border;\n                if ('rounding' in targetValues)\n                    swatch.rounding = targetValues.rounding;\n                if ('shape' in targetValues) swatch.shape = targetValues.shape;\n                if ('size' in targetValues)\n                    swatch.size = targetValues.size as SwatchGroupSizes;\n            });\n        }\n        return passThroughSwatchActions;\n    }\n\n    private getSelectionSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (!changes.has('selects')) return selectionSwatchActions;\n        if (this.selects) {\n            this.setAttribute(\n                'role',\n                this.selects === 'single' ? 'radiogroup' : 'group'\n            );\n        } else {\n            this.removeAttribute('role');\n        }\n        const swatchRoles = {\n            single: 'radio',\n            multiple: 'checkbox',\n        };\n        const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n        selectionSwatchActions.push((swatch) => {\n            swatch.setAttribute('role', swatchRole);\n        });\n        return selectionSwatchActions;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot\n                @change=${this.handleChange}\n                @slotchange=${this.manageChange}\n            ></slot>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        const swatchActions = [\n            ...this.getPassthroughSwatchActions(changes),\n            ...this.getSelectionSwatchActions(changes),\n        ];\n\n        // Create Swatch actions that build state to be applied later.\n        let nextSelected = new Set(this.selected);\n        const currentValues = new Set();\n        if (changes.has('selected')) {\n            swatchActions.push((swatch) => {\n                currentValues.add(swatch.value);\n                if (\n                    nextSelected.has(swatch.value) ||\n                    (!this.hasUpdated && swatch.selected)\n                ) {\n                    swatch.selected = true;\n                } else {\n                    swatch.selected = false;\n                }\n            });\n        }\n\n        const doActions = (): void => {\n            nextSelected = new Set(this.selected);\n\n            // Do Swatch actions to each Swatch in the collection.\n            this.swatches.forEach((swatch) => {\n                swatchActions.forEach((action) => {\n                    action(swatch);\n                });\n            });\n\n            // Apply state built in actions back to the Swatch Group\n            if (changes.has('selected')) {\n                this._selected = [...nextSelected.values()].filter(\n                    (selectedValue) => currentValues.has(selectedValue)\n                );\n            }\n        };\n\n        if (this.hasUpdated) {\n            // Do actions immediately when the element has already updated.\n            doActions();\n        } else {\n            // On first update wait for a `slotchange` event, which is not currently managed\n            // by the element lifecycle before allowing Swatch actions to be commited.\n            this.shadowRoot.addEventListener(\n                'slotchange',\n                () => {\n                    requestAnimationFrame(doActions);\n                },\n                { once: true }\n            );\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    CSSResultArray,\n    ElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n    Swatch,\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from './Swatch.dev.js'\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property({ reflect: true })\n    public density: 'compact' | 'spacious' | undefined;\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Array })\n    public get selected(): string[] {\n        return this._selected;\n    }\n\n    public set selected(selected: string[]) {\n        if (selected === this.selected) return;\n\n        const oldSelected = this.selected;\n        this._selected = selected;\n        this.requestUpdate('selected', oldSelected);\n    }\n\n    // Specifically surface `_selected` internally so that change can be made to this value internally\n    // without triggering the update lifecycle directly.\n    private _selected: string[] = [];\n\n    @property()\n    public selects: SwatchSelects;\n\n    private selectedSet = new Set<string>();\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @queryAssignedElements({ flatten: true })\n    public swatches!: Swatch[];\n\n    constructor() {\n        super();\n\n        new MutationController(this, {\n            config: {\n                attributes: true,\n                childList: true,\n                subtree: true,\n            },\n            callback: () => {\n                this.manageChange();\n            },\n        });\n    }\n\n    rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n        focusInIndex: (elements: Swatch[]) => {\n            let firstEnabledIndex = -1;\n            const firstSelectedIndex = elements.findIndex((el, index) => {\n                if (!elements[firstEnabledIndex] && !el.disabled) {\n                    firstEnabledIndex = index;\n                }\n                return el.selected && !el.disabled;\n            });\n            return elements[firstSelectedIndex]\n                ? firstSelectedIndex\n                : firstEnabledIndex;\n        },\n        elements: () => this.swatches,\n        isFocusableElement: (el: Swatch) => !el.disabled,\n    });\n\n    public override focus(options?: FocusOptions): void {\n        this.rovingTabindexController.focus(options);\n    }\n\n    protected handleChange(event: Event & { target: Swatch }): void {\n        event.stopPropagation();\n        const oldSelected = this.selected;\n        if (!this.selects) {\n            event.preventDefault();\n            return;\n        }\n        if (this.selects === 'single') {\n            const { target } = event;\n            target.tabIndex = 0;\n            target.selected = true;\n            if (this.selectedSet.has(target.value)) {\n                return;\n            }\n            this.selectedSet.clear();\n            this.selectedSet.add(target.value);\n            this.rovingTabindexController.elements.forEach((child) => {\n                if (child === target) return;\n                child.selected = false;\n            });\n        } else if (this.selects === 'multiple') {\n            const { target } = event;\n            if (target.selected) {\n                this.selectedSet.add(target.value);\n            } else {\n                this.selectedSet.delete(target.value);\n            }\n        }\n        this._selected = [...this.selectedSet];\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this._selected = oldSelected;\n            event.preventDefault();\n        }\n    }\n\n    private manageChange = async (): Promise<void> => {\n        const presentSet = new Set();\n        this.selectedSet = new Set(this.selected);\n        await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n        this.swatches.forEach((swatch) => {\n            presentSet.add(swatch.value);\n            if (swatch.selected) {\n                this.selectedSet.add(swatch.value);\n            }\n        });\n        this.selectedSet.forEach((value) => {\n            if (!presentSet.has(value)) {\n                this.selectedSet.delete(value);\n            }\n        });\n        this._selected = [...this.selectedSet];\n        this.rovingTabindexController.clearElementCache();\n    };\n\n    private getPassthroughSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const targetValues: {\n            border?: SwatchBorder;\n            rounding?: SwatchRounding;\n            shape?: SwatchShape;\n            size?: SwatchGroupSizes;\n            selects?: SwatchSelects;\n        } = {};\n        if (\n            changes.has('selects') &&\n            (this.selects || typeof changes.get('selects') !== 'undefined')\n        ) {\n            targetValues.selects = this.selects;\n        }\n        if (\n            changes.has('border') &&\n            (this.border || typeof changes.get('border') !== 'undefined')\n        ) {\n            targetValues.border = this.border;\n        }\n        if (\n            changes.has('rounding') &&\n            (this.rounding || typeof changes.get('rounding') !== 'undefined')\n        ) {\n            targetValues.rounding = this.rounding;\n        }\n        if (\n            changes.has('size') &&\n            (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n        ) {\n            targetValues.size = this.size as SwatchGroupSizes;\n        }\n        if (\n            changes.has('shape') &&\n            (this.shape || typeof changes.get('shape') !== 'undefined')\n        ) {\n            targetValues.shape = this.shape;\n        }\n        const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (Object.keys(targetValues).length) {\n            passThroughSwatchActions.push((swatch) => {\n                if (window.__swc.DEBUG) {\n                    if (\n                        'selects' in targetValues &&\n                        targetValues.selects !== 'multiple' &&\n                        swatch.mixedValue\n                    ) {\n                        window.__swc.warn(\n                            this,\n                            `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n                            'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n                            {\n                                type: 'accessibility',\n                            }\n                        );\n                    }\n                }\n                if ('border' in targetValues)\n                    swatch.border = targetValues.border;\n                if ('rounding' in targetValues)\n                    swatch.rounding = targetValues.rounding;\n                if ('shape' in targetValues) swatch.shape = targetValues.shape;\n                if ('size' in targetValues)\n                    swatch.size = targetValues.size as SwatchGroupSizes;\n            });\n        }\n        return passThroughSwatchActions;\n    }\n\n    private getSelectionSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (!changes.has('selects')) return selectionSwatchActions;\n        if (this.selects) {\n            this.setAttribute(\n                'role',\n                this.selects === 'single' ? 'radiogroup' : 'group'\n            );\n        } else {\n            this.removeAttribute('role');\n        }\n        const swatchRoles = {\n            single: 'radio',\n            multiple: 'checkbox',\n        };\n        const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n        selectionSwatchActions.push((swatch) => {\n            swatch.setAttribute('role', swatchRole);\n        });\n        return selectionSwatchActions;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot\n                @change=${this.handleChange}\n                @slotchange=${this.manageChange}\n            ></slot>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        const swatchActions = [\n            ...this.getPassthroughSwatchActions(changes),\n            ...this.getSelectionSwatchActions(changes),\n        ];\n\n        // Create Swatch actions that build state to be applied later.\n        let nextSelected = new Set(this.selected);\n        const currentValues = new Set();\n        if (changes.has('selected')) {\n            swatchActions.push((swatch) => {\n                currentValues.add(swatch.value);\n                if (\n                    nextSelected.has(swatch.value) ||\n                    (!this.hasUpdated && swatch.selected)\n                ) {\n                    swatch.selected = true;\n                } else {\n                    swatch.selected = false;\n                }\n            });\n        }\n\n        const doActions = (): void => {\n            nextSelected = new Set(this.selected);\n\n            // Do Swatch actions to each Swatch in the collection.\n            this.swatches.forEach((swatch) => {\n                swatchActions.forEach((action) => {\n                    action(swatch);\n                });\n            });\n\n            // Apply state built in actions back to the Swatch Group\n            if (changes.has('selected')) {\n                this._selected = [...nextSelected.values()].filter(\n                    (selectedValue) => currentValues.has(selectedValue)\n                );\n            }\n        };\n\n        if (this.hasUpdated) {\n            // Do actions immediately when the element has already updated.\n            doActions();\n        } else {\n            // On first update wait for a `slotchange` event, which is not currently managed\n            // by the element lifecycle before allowing Swatch actions to be commited.\n            this.shadowRoot.addEventListener(\n                'slotchange',\n                () => {\n                    requestAnimationFrame(doActions);\n                },\n                { once: true }\n            );\n        }\n    }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/src/SwatchGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["SwatchGroup.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*/\n\nimport {\n    CSSResultArray,\n    ElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n    Swatch,\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from './Swatch.js';\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property({ reflect: true })\n    public density: 'compact' | 'spacious' | undefined;\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Array })\n    public get selected(): string[] {\n        return this._selected;\n    }\n\n    public set selected(selected: string[]) {\n        if (selected === this.selected) return;\n\n        const oldSelected = this.selected;\n        this._selected = selected;\n        this.requestUpdate('selected', oldSelected);\n    }\n\n    // Specifically surface `_selected` internally so that change can be made to this value internally\n    // without triggering the update lifecycle directly.\n    private _selected: string[] = [];\n\n    @property()\n    public selects: SwatchSelects;\n\n    private selectedSet = new Set<string>();\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @queryAssignedElements({ flatten: true })\n    public swatches!: Swatch[];\n\n    constructor() {\n        super();\n\n        new MutationController(this, {\n            config: {\n                attributes: true,\n                childList: true,\n                subtree: true,\n            },\n            callback: () => {\n                this.manageChange();\n            },\n        });\n    }\n\n    rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n        focusInIndex: (elements: Swatch[]) => {\n            let firstEnabledIndex = -1;\n            const firstSelectedIndex = elements.findIndex((el, index) => {\n                if (!elements[firstEnabledIndex] && !el.disabled) {\n                    firstEnabledIndex = index;\n                }\n                return el.selected && !el.disabled;\n            });\n            return elements[firstSelectedIndex]\n                ? firstSelectedIndex\n                : firstEnabledIndex;\n        },\n        elements: () => this.swatches,\n        isFocusableElement: (el: Swatch) => !el.disabled,\n    });\n\n    public override focus(options?: FocusOptions): void {\n        this.rovingTabindexController.focus(options);\n    }\n\n    protected handleChange(event: Event & { target: Swatch }): void {\n        event.stopPropagation();\n        const oldSelected = this.selected;\n        if (!this.selects) {\n            event.preventDefault();\n            return;\n        }\n        if (this.selects === 'single') {\n            const { target } = event;\n            target.tabIndex = 0;\n            target.selected = true;\n            if (this.selectedSet.has(target.value)) {\n                return;\n            }\n            this.selectedSet.clear();\n            this.selectedSet.add(target.value);\n            this.rovingTabindexController.elements.forEach((child) => {\n                if (child === target) return;\n                child.selected = false;\n            });\n        } else if (this.selects === 'multiple') {\n            const { target } = event;\n            if (target.selected) {\n                this.selectedSet.add(target.value);\n            } else {\n                this.selectedSet.delete(target.value);\n            }\n        }\n        this._selected = [...this.selectedSet];\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this._selected = oldSelected;\n            event.preventDefault();\n        }\n    }\n\n    private manageChange = async (): Promise<void> => {\n        const presentSet = new Set();\n        this.selectedSet = new Set(this.selected);\n        await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n        this.swatches.forEach((swatch) => {\n            presentSet.add(swatch.value);\n            if (swatch.selected) {\n                this.selectedSet.add(swatch.value);\n            }\n        });\n        this.selectedSet.forEach((value) => {\n            if (!presentSet.has(value)) {\n                this.selectedSet.delete(value);\n            }\n        });\n        this._selected = [...this.selectedSet];\n        this.rovingTabindexController.clearElementCache();\n    };\n\n    private getPassthroughSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const targetValues: {\n            border?: SwatchBorder;\n            rounding?: SwatchRounding;\n            shape?: SwatchShape;\n            size?: SwatchGroupSizes;\n            selects?: SwatchSelects;\n        } = {};\n        if (\n            changes.has('selects') &&\n            (this.selects || typeof changes.get('selects') !== 'undefined')\n        ) {\n            targetValues.selects = this.selects;\n        }\n        if (\n            changes.has('border') &&\n            (this.border || typeof changes.get('border') !== 'undefined')\n        ) {\n            targetValues.border = this.border;\n        }\n        if (\n            changes.has('rounding') &&\n            (this.rounding || typeof changes.get('rounding') !== 'undefined')\n        ) {\n            targetValues.rounding = this.rounding;\n        }\n        if (\n            changes.has('size') &&\n            (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n        ) {\n            targetValues.size = this.size as SwatchGroupSizes;\n        }\n        if (\n            changes.has('shape') &&\n            (this.shape || typeof changes.get('shape') !== 'undefined')\n        ) {\n            targetValues.shape = this.shape;\n        }\n        const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (Object.keys(targetValues).length) {\n            passThroughSwatchActions.push((swatch) => {\n                if (window.__swc.DEBUG) {\n                    if (\n                        'selects' in targetValues &&\n                        targetValues.selects !== 'multiple' &&\n                        swatch.mixedValue\n                    ) {\n                        window.__swc.warn(\n                            this,\n                            `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n                            'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n                            {\n                                type: 'accessibility',\n                            }\n                        );\n                    }\n                }\n                if ('border' in targetValues)\n                    swatch.border = targetValues.border;\n                if ('rounding' in targetValues)\n                    swatch.rounding = targetValues.rounding;\n                if ('shape' in targetValues) swatch.shape = targetValues.shape;\n                if ('size' in targetValues)\n                    swatch.size = targetValues.size as SwatchGroupSizes;\n            });\n        }\n        return passThroughSwatchActions;\n    }\n\n    private getSelectionSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (!changes.has('selects')) return selectionSwatchActions;\n        if (this.selects) {\n            this.setAttribute(\n                'role',\n                this.selects === 'single' ? 'radiogroup' : 'group'\n            );\n        } else {\n            this.removeAttribute('role');\n        }\n        const swatchRoles = {\n            single: 'radio',\n            multiple: 'checkbox',\n        };\n        const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n        selectionSwatchActions.push((swatch) => {\n            swatch.setAttribute('role', swatchRole);\n        });\n        return selectionSwatchActions;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot\n                @change=${this.handleChange}\n                @slotchange=${this.manageChange}\n            ></slot>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        const swatchActions = [\n            ...this.getPassthroughSwatchActions(changes),\n            ...this.getSelectionSwatchActions(changes),\n        ];\n\n        // Create Swatch actions that build state to be applied later.\n        let nextSelected = new Set(this.selected);\n        const currentValues = new Set();\n        if (changes.has('selected')) {\n            swatchActions.push((swatch) => {\n                currentValues.add(swatch.value);\n                if (\n                    nextSelected.has(swatch.value) ||\n                    (!this.hasUpdated && swatch.selected)\n                ) {\n                    swatch.selected = true;\n                } else {\n                    swatch.selected = false;\n                }\n            });\n        }\n\n        const doActions = (): void => {\n            nextSelected = new Set(this.selected);\n\n            // Do Swatch actions to each Swatch in the collection.\n            this.swatches.forEach((swatch) => {\n                swatchActions.forEach((action) => {\n                    action(swatch);\n                });\n            });\n\n            // Apply state built in actions back to the Swatch Group\n            if (changes.has('selected')) {\n                this._selected = [...nextSelected.values()].filter(\n                    (selectedValue) => currentValues.has(selectedValue)\n                );\n            }\n        };\n\n        if (this.hasUpdated) {\n            // Do actions immediately when the element has already updated.\n            doActions();\n        } else {\n            // On first update wait for a `slotchange` event, which is not currently managed\n            // by the element lifecycle before allowing Swatch actions to be commited.\n            this.shadowRoot.addEventListener(\n                'slotchange',\n                () => {\n                    requestAnimationFrame(doActions);\n                },\n                { once: true }\n            );\n        }\n    }\n}\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n    CSSResultArray,\n    ElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n    Swatch,\n    SwatchBorder,\n    SwatchRounding,\n    SwatchShape,\n} from './Swatch.js';\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n    validSizes: ['xs', 's', 'm', 'l'],\n    noDefaultSize: true,\n}) {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public border: SwatchBorder;\n\n    @property({ reflect: true })\n    public density: 'compact' | 'spacious' | undefined;\n\n    @property({ reflect: true })\n    public rounding: SwatchRounding;\n\n    @property({ type: Array })\n    public get selected(): string[] {\n        return this._selected;\n    }\n\n    public set selected(selected: string[]) {\n        if (selected === this.selected) return;\n\n        const oldSelected = this.selected;\n        this._selected = selected;\n        this.requestUpdate('selected', oldSelected);\n    }\n\n    // Specifically surface `_selected` internally so that change can be made to this value internally\n    // without triggering the update lifecycle directly.\n    private _selected: string[] = [];\n\n    @property()\n    public selects: SwatchSelects;\n\n    private selectedSet = new Set<string>();\n\n    @property({ reflect: true })\n    public shape: SwatchShape;\n\n    @queryAssignedElements({ flatten: true })\n    public swatches!: Swatch[];\n\n    constructor() {\n        super();\n\n        new MutationController(this, {\n            config: {\n                attributes: true,\n                childList: true,\n                subtree: true,\n            },\n            callback: () => {\n                this.manageChange();\n            },\n        });\n    }\n\n    rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n        focusInIndex: (elements: Swatch[]) => {\n            let firstEnabledIndex = -1;\n            const firstSelectedIndex = elements.findIndex((el, index) => {\n                if (!elements[firstEnabledIndex] && !el.disabled) {\n                    firstEnabledIndex = index;\n                }\n                return el.selected && !el.disabled;\n            });\n            return elements[firstSelectedIndex]\n                ? firstSelectedIndex\n                : firstEnabledIndex;\n        },\n        elements: () => this.swatches,\n        isFocusableElement: (el: Swatch) => !el.disabled,\n    });\n\n    public override focus(options?: FocusOptions): void {\n        this.rovingTabindexController.focus(options);\n    }\n\n    protected handleChange(event: Event & { target: Swatch }): void {\n        event.stopPropagation();\n        const oldSelected = this.selected;\n        if (!this.selects) {\n            event.preventDefault();\n            return;\n        }\n        if (this.selects === 'single') {\n            const { target } = event;\n            target.tabIndex = 0;\n            target.selected = true;\n            if (this.selectedSet.has(target.value)) {\n                return;\n            }\n            this.selectedSet.clear();\n            this.selectedSet.add(target.value);\n            this.rovingTabindexController.elements.forEach((child) => {\n                if (child === target) return;\n                child.selected = false;\n            });\n        } else if (this.selects === 'multiple') {\n            const { target } = event;\n            if (target.selected) {\n                this.selectedSet.add(target.value);\n            } else {\n                this.selectedSet.delete(target.value);\n            }\n        }\n        this._selected = [...this.selectedSet];\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n            })\n        );\n        if (!applyDefault) {\n            this._selected = oldSelected;\n            event.preventDefault();\n        }\n    }\n\n    private manageChange = async (): Promise<void> => {\n        const presentSet = new Set();\n        this.selectedSet = new Set(this.selected);\n        await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n        this.swatches.forEach((swatch) => {\n            presentSet.add(swatch.value);\n            if (swatch.selected) {\n                this.selectedSet.add(swatch.value);\n            }\n        });\n        this.selectedSet.forEach((value) => {\n            if (!presentSet.has(value)) {\n                this.selectedSet.delete(value);\n            }\n        });\n        this._selected = [...this.selectedSet];\n        this.rovingTabindexController.clearElementCache();\n    };\n\n    private getPassthroughSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const targetValues: {\n            border?: SwatchBorder;\n            rounding?: SwatchRounding;\n            shape?: SwatchShape;\n            size?: SwatchGroupSizes;\n            selects?: SwatchSelects;\n        } = {};\n        if (\n            changes.has('selects') &&\n            (this.selects || typeof changes.get('selects') !== 'undefined')\n        ) {\n            targetValues.selects = this.selects;\n        }\n        if (\n            changes.has('border') &&\n            (this.border || typeof changes.get('border') !== 'undefined')\n        ) {\n            targetValues.border = this.border;\n        }\n        if (\n            changes.has('rounding') &&\n            (this.rounding || typeof changes.get('rounding') !== 'undefined')\n        ) {\n            targetValues.rounding = this.rounding;\n        }\n        if (\n            changes.has('size') &&\n            (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n        ) {\n            targetValues.size = this.size as SwatchGroupSizes;\n        }\n        if (\n            changes.has('shape') &&\n            (this.shape || typeof changes.get('shape') !== 'undefined')\n        ) {\n            targetValues.shape = this.shape;\n        }\n        const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (Object.keys(targetValues).length) {\n            passThroughSwatchActions.push((swatch) => {\n                if (window.__swc.DEBUG) {\n                    if (\n                        'selects' in targetValues &&\n                        targetValues.selects !== 'multiple' &&\n                        swatch.mixedValue\n                    ) {\n                        window.__swc.warn(\n                            this,\n                            `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n                            'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n                            {\n                                type: 'accessibility',\n                            }\n                        );\n                    }\n                }\n                if ('border' in targetValues)\n                    swatch.border = targetValues.border;\n                if ('rounding' in targetValues)\n                    swatch.rounding = targetValues.rounding;\n                if ('shape' in targetValues) swatch.shape = targetValues.shape;\n                if ('size' in targetValues)\n                    swatch.size = targetValues.size as SwatchGroupSizes;\n            });\n        }\n        return passThroughSwatchActions;\n    }\n\n    private getSelectionSwatchActions(\n        changes: PropertyValues\n    ): ((swatch: Swatch) => void)[] {\n        const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n        if (!changes.has('selects')) return selectionSwatchActions;\n        if (this.selects) {\n            this.setAttribute(\n                'role',\n                this.selects === 'single' ? 'radiogroup' : 'group'\n            );\n        } else {\n            this.removeAttribute('role');\n        }\n        const swatchRoles = {\n            single: 'radio',\n            multiple: 'checkbox',\n        };\n        const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n        selectionSwatchActions.push((swatch) => {\n            swatch.setAttribute('role', swatchRole);\n        });\n        return selectionSwatchActions;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot\n                @change=${this.handleChange}\n                @slotchange=${this.manageChange}\n            ></slot>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        const swatchActions = [\n            ...this.getPassthroughSwatchActions(changes),\n            ...this.getSelectionSwatchActions(changes),\n        ];\n\n        // Create Swatch actions that build state to be applied later.\n        let nextSelected = new Set(this.selected);\n        const currentValues = new Set();\n        if (changes.has('selected')) {\n            swatchActions.push((swatch) => {\n                currentValues.add(swatch.value);\n                if (\n                    nextSelected.has(swatch.value) ||\n                    (!this.hasUpdated && swatch.selected)\n                ) {\n                    swatch.selected = true;\n                } else {\n                    swatch.selected = false;\n                }\n            });\n        }\n\n        const doActions = (): void => {\n            nextSelected = new Set(this.selected);\n\n            // Do Swatch actions to each Swatch in the collection.\n            this.swatches.forEach((swatch) => {\n                swatchActions.forEach((action) => {\n                    action(swatch);\n                });\n            });\n\n            // Apply state built in actions back to the Swatch Group\n            if (changes.has('selected')) {\n                this._selected = [...nextSelected.values()].filter(\n                    (selectedValue) => currentValues.has(selectedValue)\n                );\n            }\n        };\n\n        if (this.hasUpdated) {\n            // Do actions immediately when the element has already updated.\n            doActions();\n        } else {\n            // On first update wait for a `slotchange` event, which is not currently managed\n            // by the element lifecycle before allowing Swatch actions to be commited.\n            this.shadowRoot.addEventListener(\n                'slotchange',\n                () => {\n                    requestAnimationFrame(doActions);\n                },\n                { once: true }\n            );\n        }\n    }\n}\n"],
   "mappings": "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",
   "names": ["html", "SizedMixin", "SpectrumElement", "property", "queryAssignedElements", "RovingTabindexController", "MutationController", "styles", "elements", "firstEnabledIndex", "firstSelectedIndex", "el", "index", "presentSet", "swatch", "value", "selected", "oldSelected", "options", "event", "target", "child", "changes", "targetValues", "passThroughSwatchActions", "selectionSwatchActions", "swatchRoles", "swatchRole", "swatchActions", "nextSelected", "currentValues", "doActions", "action", "selectedValue", "__decorateClass"]
 }

package/src/index.d.ts

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

package/src/index.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.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*/\nexport * from './Swatch.dev.js'\nexport * from './SwatchGroup.dev.js'\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Swatch.dev.js'\nexport * from './SwatchGroup.dev.js'\n"],
   "mappings": ";AAWA,cAAc;AACd,cAAc;",
   "names": []
 }

package/src/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.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*/\nexport * from './Swatch.js';\nexport * from './SwatchGroup.js';\n"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './Swatch.js';\nexport * from './SwatchGroup.js';\n"],
   "mappings": "aAWA,WAAc,cACd,WAAc",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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))}\n`;\nexport default styles;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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))}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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))}\n`;\nexport default styles;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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))}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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}\n`;\nexport default styles;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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}\n`;\nexport default styles;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["swatch-group-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{--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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :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,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["swatch-group-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{--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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :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-group.css.dev.js.map

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

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

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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.dev.js.map

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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.map

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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.dev.js.map

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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.map

@@ -1,7 +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;"],
+  "sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\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"]
 }