@spectrum-web-components/swatch 0.38.0 → 0.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/swatch",
-    "version": "0.38.0",
+    "version": "0.39.1",
     "publishConfig": {
         "access": "public"
     },
@@ -67,15 +67,16 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
-        "@spectrum-web-components/base": "^0.38.0",
-        "@spectrum-web-components/icon": "^0.38.0",
-        "@spectrum-web-components/icons-ui": "^0.38.0",
-        "@spectrum-web-components/reactive-controllers": "^0.38.0",
-        "@spectrum-web-components/shared": "^0.38.0"
+        "@spectrum-web-components/base": "^0.39.1",
+        "@spectrum-web-components/icon": "^0.39.1",
+        "@spectrum-web-components/icons-ui": "^0.39.1",
+        "@spectrum-web-components/opacity-checkerboard": "^0.39.1",
+        "@spectrum-web-components/reactive-controllers": "^0.39.1",
+        "@spectrum-web-components/shared": "^0.39.1"
     },
     "devDependencies": {
-        "@spectrum-css/swatch": "^4.0.31",
-        "@spectrum-css/swatchgroup": "^2.0.60"
+        "@spectrum-css/swatch": "^5.0.12",
+        "@spectrum-css/swatchgroup": "^2.0.68"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -83,5 +84,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
+    "gitHead": "d374f8645b54b978d830c95ff777b5b1e9172ac7"
 }

package/src/Swatch.dev.js

@@ -17,6 +17,7 @@ import {
 import { property } from "@spectrum-web-components/base/src/decorators.js";
 import { when } from "@spectrum-web-components/base/src/directives.js";
 import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import opacityCheckerboardStyles from "@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
@@ -86,7 +87,7 @@ export class Swatch extends SizedMixin(Focusable, {
     };
   }
   static get styles() {
-    return [styles, dashStyles];
+    return [opacityCheckerboardStyles, styles, dashStyles];
   }
   get value() {
     return this._value || this.color || this.label;
@@ -153,7 +154,10 @@ export class Swatch extends SizedMixin(Focusable, {
   }
   render() {
     return html`
-            <div class="fill" style="--spectrum-picked-color: ${this.color}">
+            <div
+                class="opacity-checkerboard fill"
+                style="--spectrum-picked-color: ${this.color}"
+            >
                 <slot name="image"></slot>
                 ${when(this.disabled, this.renderDisabled)}
                 ${when(this.mixedValue, this.renderMixedValue)}

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 { when } from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.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 [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 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 class=\"fill\" style=\"--spectrum-picked-color: ${this.color}\">\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        if (changes.has('label')) {\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 {\n                this.removeAttribute('aria-label');\n            }\n        }\n        if (changes.has('mixedValue')) {\n            if (this.mixedValue) {\n                this.setAttribute('aria-checked', 'mixed');\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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",
+  "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 { when } 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 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=\"--spectrum-picked-color: ${this.color}\"\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        if (changes.has('label')) {\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 {\n                this.removeAttribute('aria-label');\n            }\n        }\n        if (changes.has('mixedValue')) {\n            if (this.mixedValue) {\n                this.setAttribute('aria-checked', 'mixed');\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": []
 }

package/src/Swatch.js

@@ -1,4 +1,4 @@
-"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(d,a,e,t)=>{for(var r=t>1?void 0:t?p(a,e):a,o=d.length-1,n;o>=0;o--)(n=d[o])&&(r=(t?n(a,e,r):n(r))||r);return t&&r&&u(a,e,r),r};import{html as l,SizedMixin as h}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{when as c}from"@spectrum-web-components/base/src/directives.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";import m from"./swatch.css.js";import v from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const f={xs:()=>l`
+"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(d,a,e,t)=>{for(var r=t>1?void 0:t?p(a,e):a,o=d.length-1,c;o>=0;o--)(c=d[o])&&(r=(t?c(a,e,r):c(r))||r);return t&&r&&u(a,e,r),r};import{html as l,SizedMixin as h}from"@spectrum-web-components/base";import{property as s}from"@spectrum-web-components/base/src/decorators.js";import{when as n}from"@spectrum-web-components/base/src/directives.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import m from"@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";import v from"./swatch.css.js";import f from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const y={xs:()=>l`
         <sp-icon-dash75
             slot="icon"
             class="mixedValueIcon spectrum-UIIcon-Dash75"
@@ -35,11 +35,14 @@
                     fill="var(--spectrum-swatch-disabled-icon-stroke-color)"
                 />
             </svg>
-        `;this.renderMixedValue=()=>f[this.size]()}static get styles(){return[m,v]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.selected=e!=null?e:!this.selected}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.click();break;default:break}}render(){return l`
-            <div class="fill" style="--spectrum-picked-color: ${this.color}">
+        `;this.renderMixedValue=()=>y[this.size]()}static get styles(){return[m,v,f]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.selected=e!=null?e:!this.selected}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.click();break;default:break}}render(){return l`
+            <div
+                class="opacity-checkerboard fill"
+                style="--spectrum-picked-color: ${this.color}"
+            >
                 <slot name="image"></slot>
-                ${c(this.disabled,this.renderDisabled)}
-                ${c(this.mixedValue,this.renderMixedValue)}
+                ${n(this.disabled,this.renderDisabled)}
+                ${n(this.mixedValue,this.renderMixedValue)}
             </div>
-        `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),e.has("selected")||e.has("role")){const r=this.role==="button"?"aria-pressed":"aria-checked",o=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(o),this.setAttribute(r,this.selected?"true":"false")}e.has("label")&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color!==""?this.setAttribute("aria-label",this.color):this.removeAttribute("aria-label")),e.has("mixedValue")&&this.mixedValue&&this.setAttribute("aria-checked","mixed")}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}s([i({reflect:!0})],Swatch.prototype,"border",2),s([i()],Swatch.prototype,"color",2),s([i()],Swatch.prototype,"label",2),s([i({type:Boolean,reflect:!0,attribute:"mixed-value"})],Swatch.prototype,"mixedValue",2),s([i({type:Boolean,reflect:!0})],Swatch.prototype,"nothing",2),s([i({reflect:!0})],Swatch.prototype,"role",2),s([i({reflect:!0})],Swatch.prototype,"rounding",2),s([i({type:Boolean,reflect:!0})],Swatch.prototype,"selected",2),s([i({reflect:!0})],Swatch.prototype,"shape",2),s([i()],Swatch.prototype,"value",1);
+        `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),e.has("selected")||e.has("role")){const r=this.role==="button"?"aria-pressed":"aria-checked",o=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(o),this.setAttribute(r,this.selected?"true":"false")}e.has("label")&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color!==""?this.setAttribute("aria-label",this.color):this.removeAttribute("aria-label")),e.has("mixedValue")&&this.mixedValue&&this.setAttribute("aria-checked","mixed")}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}i([s({reflect:!0})],Swatch.prototype,"border",2),i([s()],Swatch.prototype,"color",2),i([s()],Swatch.prototype,"label",2),i([s({type:Boolean,reflect:!0,attribute:"mixed-value"})],Swatch.prototype,"mixedValue",2),i([s({type:Boolean,reflect:!0})],Swatch.prototype,"nothing",2),i([s({reflect:!0})],Swatch.prototype,"role",2),i([s({reflect:!0})],Swatch.prototype,"rounding",2),i([s({type:Boolean,reflect:!0})],Swatch.prototype,"selected",2),i([s({reflect:!0})],Swatch.prototype,"shape",2),i([s()],Swatch.prototype,"value",1);
 //# sourceMappingURL=Swatch.js.map

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 { when } from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.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 [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 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 class=\"fill\" style=\"--spectrum-picked-color: ${this.color}\">\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        if (changes.has('label')) {\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 {\n                this.removeAttribute('aria-label');\n            }\n        }\n        if (changes.has('mixedValue')) {\n            if (this.mixedValue) {\n                this.setAttribute('aria-checked', 'mixed');\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", "when", "Focusable", "styles", "dashStyles", "dashIcon", "value", "oldValue", "force", "event", "code", "changes", "_a", "selectedAttribute", "removedSelectedAttribute", "__decorateClass"]
+  "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 { when } 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 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=\"--spectrum-picked-color: ${this.color}\"\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        if (changes.has('label')) {\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 {\n                this.removeAttribute('aria-label');\n            }\n        }\n        if (changes.has('mixedValue')) {\n            if (this.mixedValue) {\n                this.setAttribute('aria-checked', 'mixed');\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": "qNAWA,OAEI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,QAAAC,MAAY,kDACrB,OAAS,aAAAC,MAAiB,mDAC1B,OAAOC,MAA+B,gFACtC,MAAO,4DACP,MAAO,6DACP,MAAO,6DACP,MAAO,6DAEP,OAAOC,MAAY,kBACnB,OAAOC,MAAgB,8DAMvB,MAAMC,EAAiD,CACnD,GAAI,IAAMR;AAAA;AAAA;AAAA;AAAA;AAAA,MAMV,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMb,EAKO,aAAM,eAAeC,EAAWG,EAAW,CAC9C,WAAY,CAAC,KAAM,IAAK,IAAK,GAAG,EAChC,cAAe,EACnB,CAAC,CAAE,CAHI,kCAYH,KAAO,MAAQ,GAGf,KAAO,MAAQ,GAGf,KAAO,WAAa,GAGpB,KAAO,QAAU,GAGjB,KAAO,KAAO,SAMd,KAAO,SAAW,GAgFlB,KAAU,eAAiB,IAChBJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAoBX,KAAU,iBAAmB,IAClBQ,EAAS,KAAK,IAAI,EAAE,EAhI/B,WAA2B,QAAyB,CAChD,MAAO,CAACH,EAA2BC,EAAQC,CAAU,CACzD,CA8BA,IAAI,OAAgB,CAChB,OAAO,KAAK,QAAU,KAAK,OAAS,KAAK,KAC7C,CAEA,IAAI,MAAME,EAAe,CACrB,GAAIA,IAAU,KAAK,OAAQ,OAC3B,MAAMC,EAAW,KAAK,MACtB,KAAK,OAASD,EACd,KAAK,cAAc,QAASC,CAAQ,CACxC,CAIA,IAAoB,cAA4B,CAC5C,OAAO,IACX,CAEO,OAAOC,EAAuB,CACjC,KAAK,SAAWA,GAAA,KAAAA,EAAS,CAAC,KAAK,QACnC,CAEQ,aAAoB,CACxB,GAAI,KAAK,UAAY,KAAK,WAAY,OACtC,KAAK,OAAO,EACS,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,EACb,CAAC,CACL,GAEI,KAAK,OAAO,CAEpB,CAEU,cAAcC,EAA4B,CAChD,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,OAAQC,EAAM,CACV,IAAK,QACDD,EAAM,eAAe,EACrB,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,MAEJ,QACI,KACR,CACJ,CAEQ,eAAeA,EAA4B,CAC/C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,OAAQC,EAAM,CACV,IAAK,QACL,IAAK,cACD,KAAK,MAAM,EACX,MAEJ,QACI,KACR,CACJ,CAEU,YAAYD,EAA4B,CAC9C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACjB,OAAQC,EAAM,CACV,IAAK,QACD,KAAK,oBAAoB,QAAS,KAAK,WAAW,EAClD,KAAK,MAAM,EACX,MAEJ,QACI,KACR,CACJ,CA2BmB,QAAyB,CACxC,OAAOb;AAAA;AAAA;AAAA,kDAGmC,KAAK,KAAK;AAAA;AAAA;AAAA,kBAG1CG,EAAK,KAAK,SAAU,KAAK,cAAc,CAAC;AAAA,kBACxCA,EAAK,KAAK,WAAY,KAAK,gBAAgB,CAAC;AAAA;AAAA,SAG1D,CAEmB,WAAWW,EAA+B,CApNjE,IAAAC,EAwNQ,GAHK,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,OAAQ,QAAQ,EAElCD,EAAQ,IAAI,UAAU,GAAKA,EAAQ,IAAI,MAAM,EAAG,CAChD,MAAME,EACF,KAAK,OAAS,SAAW,eAAiB,eACxCC,EACF,KAAK,OAAS,SAAW,eAAiB,eAC1CH,EAAQ,IAAI,MAAM,GAClB,KAAK,gBAAgBG,CAAwB,EAEjD,KAAK,aACDD,EACA,KAAK,SAAW,OAAS,OAC7B,CACJ,CACIF,EAAQ,IAAI,OAAO,IACf,KAAK,QAAU,KAAK,SAASC,EAAA,KAAK,QAAL,MAAAA,EAAY,QACzC,KAAK,aAAa,aAAc,KAAK,KAAK,EACnC,KAAK,QAAU,GACtB,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1C,KAAK,gBAAgB,YAAY,GAGrCD,EAAQ,IAAI,YAAY,GACpB,KAAK,YACL,KAAK,aAAa,eAAgB,OAAO,CAGrD,CAEmB,aAAaA,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,iBAAiB,UAAW,KAAK,aAAa,EACnD,KAAK,iBAAiB,WAAY,KAAK,cAAc,EAChD,KAAK,aAAa,UAAU,GAC7B,KAAK,aAAa,WAAY,GAAG,CAEzC,CACJ,CArLWI,EAAA,CADNhB,EAAS,CAAE,QAAS,EAAK,CAAC,GARlB,OASF,sBAGAgB,EAAA,CADNhB,EAAS,GAXD,OAYF,qBAGAgB,EAAA,CADNhB,EAAS,GAdD,OAeF,qBAGAgB,EAAA,CADNhB,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,aAAc,CAAC,GAjB3D,OAkBF,0BAGAgB,EAAA,CADNhB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,OAqBF,uBAGAgB,EAAA,CADNhB,EAAS,CAAE,QAAS,EAAK,CAAC,GAvBlB,OAwBF,oBAGAgB,EAAA,CADNhB,EAAS,CAAE,QAAS,EAAK,CAAC,GA1BlB,OA2BF,wBAGAgB,EAAA,CADNhB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,OA8BF,wBAGAgB,EAAA,CADNhB,EAAS,CAAE,QAAS,EAAK,CAAC,GAhClB,OAiCF,qBAGHgB,EAAA,CADHhB,EAAS,GAnCD,OAoCL",
+  "names": ["html", "SizedMixin", "property", "when", "Focusable", "opacityCheckerboardStyles", "styles", "dashStyles", "dashIcon", "value", "oldValue", "force", "event", "code", "changes", "_a", "selectedAttribute", "removedSelectedAttribute", "__decorateClass"]
 }

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

@@ -23,9 +23,9 @@ const styles = css`
 --spectrum-workflow-icon-size-200
 );--spectrum-swatch-slash-thickness:var(
 --spectrum-swatch-slash-thickness-large
-)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
+)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(
 --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
-);width:var(
+);inline-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)
@@ -61,9 +61,9 @@ var(--spectrum-swatch-border-thickness-selected)
 --highcontrast-swatch-fill-foreground-color,var(
 --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
 )
-);content:"";height:var(
+);block-size:200%;content:"";inline-size:var(
 --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
-);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
+);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
 --highcontrast-swatch-border-color-selected,var(
 --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
 )
@@ -82,15 +82,9 @@ var(--spectrum-swatch-border-thickness-selected)
 var(--spectrum-swatch-focus-indicator-gap)
 )*-2);opacity:0;position:absolute;transition:opacity var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(
---spectrum-opacity-checkerboard-square-size
-);--spectrum-swatch-checkerboard-dark-color:var(
---spectrum-opacity-checkerboard-square-dark
-);--spectrum-swatch-checkerboard-light-color:var(
---spectrum-opacity-checkerboard-square-light
-);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(
+) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
-);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
+);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
 );box-shadow:inset 0 0 0 var(
 --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
@@ -110,14 +104,14 @@ var(--spectrum-swatch-focus-indicator-gap)
 )
 )}.disabledIcon path:last-child{fill:var(
 --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
-)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
+)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .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]){height:100%;object-fit:contain;transition:width var(
+)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;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;width:100%}
+) ease-in-out}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-swatch.css.dev.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-swatch.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-swatch-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-swatch-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}\n`;\nexport default styles;"],
-  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuHf,eAAe;",
+  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);inline-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);block-size:200%;content:\"\";inline-size:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiHf,eAAe;",
   "names": []
 }

package/src/spectrum-swatch.css.js

@@ -21,9 +21,9 @@
 --spectrum-workflow-icon-size-200
 );--spectrum-swatch-slash-thickness:var(
 --spectrum-swatch-slash-thickness-large
-)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
+)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(
 --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
-);width:var(
+);inline-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)
@@ -59,9 +59,9 @@ var(--spectrum-swatch-border-thickness-selected)
 --highcontrast-swatch-fill-foreground-color,var(
 --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
 )
-);content:"";height:var(
+);block-size:200%;content:"";inline-size:var(
 --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
-);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
+);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
 --highcontrast-swatch-border-color-selected,var(
 --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
 )
@@ -80,15 +80,9 @@ var(--spectrum-swatch-border-thickness-selected)
 var(--spectrum-swatch-focus-indicator-gap)
 )*-2);opacity:0;position:absolute;transition:opacity var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(
---spectrum-opacity-checkerboard-square-size
-);--spectrum-swatch-checkerboard-dark-color:var(
---spectrum-opacity-checkerboard-square-dark
-);--spectrum-swatch-checkerboard-light-color:var(
---spectrum-opacity-checkerboard-square-light
-);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(
+) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
-);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
+);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
 );box-shadow:inset 0 0 0 var(
 --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
@@ -108,13 +102,13 @@ var(--spectrum-swatch-focus-indicator-gap)
 )
 )}.disabledIcon path:last-child{fill:var(
 --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
-)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
+)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .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]){height:100%;object-fit:contain;transition:width var(
+)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;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;width:100%}
+) ease-in-out}
 `;export default e;
 //# sourceMappingURL=spectrum-swatch.css.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-swatch.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-swatch-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-swatch-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}\n`;\nexport default styles;"],
-  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuHf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);inline-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);block-size:200%;content:\"\";inline-size:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiHf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/swatch.css.dev.js

@@ -23,9 +23,9 @@ const styles = css`
 --spectrum-workflow-icon-size-200
 );--spectrum-swatch-slash-thickness:var(
 --spectrum-swatch-slash-thickness-large
-)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
+)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(
 --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
-);width:var(
+);inline-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)
@@ -61,9 +61,9 @@ var(--spectrum-swatch-border-thickness-selected)
 --highcontrast-swatch-fill-foreground-color,var(
 --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
 )
-);content:"";height:var(
+);block-size:200%;content:"";inline-size:var(
 --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
-);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
+);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
 --highcontrast-swatch-border-color-selected,var(
 --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
 )
@@ -82,15 +82,9 @@ var(--spectrum-swatch-border-thickness-selected)
 var(--spectrum-swatch-focus-indicator-gap)
 )*-2);opacity:0;position:absolute;transition:opacity var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(
---spectrum-opacity-checkerboard-square-size
-);--spectrum-swatch-checkerboard-dark-color:var(
---spectrum-opacity-checkerboard-square-dark
-);--spectrum-swatch-checkerboard-light-color:var(
---spectrum-opacity-checkerboard-square-light
-);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(
+) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
-);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
+);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
 );box-shadow:inset 0 0 0 var(
 --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
@@ -110,14 +104,14 @@ var(--spectrum-swatch-focus-indicator-gap)
 )
 )}.disabledIcon path:last-child{fill:var(
 --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
-)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
+)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .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]){height:100%;object-fit:contain;transition:width var(
+)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;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;width:100%}.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:#0000}
+) ease-in-out}.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:#0000}
 `;
 export default styles;
 //# sourceMappingURL=swatch.css.dev.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["swatch.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-swatch-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-swatch-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}.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:#0000}\n`;\nexport default styles;"],
-  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuHf,eAAe;",
+  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);inline-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);block-size:200%;content:\"\";inline-size:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}.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:#0000}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiHf,eAAe;",
   "names": []
 }

package/src/swatch.css.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"@spectrum-web-components/base";const r=e`
+"use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
 :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(
 --spectrum-border-width-200
 );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
@@ -21,9 +21,9 @@
 --spectrum-workflow-icon-size-200
 );--spectrum-swatch-slash-thickness:var(
 --spectrum-swatch-slash-thickness-large
-)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(
+)}@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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(
 --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
-);width:var(
+);inline-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)
@@ -59,9 +59,9 @@ var(--spectrum-swatch-border-thickness-selected)
 --highcontrast-swatch-fill-foreground-color,var(
 --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
 )
-);content:"";height:var(
+);block-size:200%;content:"";inline-size:var(
 --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
-);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
+);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
 --highcontrast-swatch-border-color-selected,var(
 --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
 )
@@ -80,15 +80,9 @@ var(--spectrum-swatch-border-thickness-selected)
 var(--spectrum-swatch-focus-indicator-gap)
 )*-2);opacity:0;position:absolute;transition:opacity var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(
---spectrum-opacity-checkerboard-square-size
-);--spectrum-swatch-checkerboard-dark-color:var(
---spectrum-opacity-checkerboard-square-dark
-);--spectrum-swatch-checkerboard-light-color:var(
---spectrum-opacity-checkerboard-square-light
-);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(
+) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
-);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
+);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
 --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
 );box-shadow:inset 0 0 0 var(
 --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
@@ -108,13 +102,13 @@ var(--spectrum-swatch-focus-indicator-gap)
 )
 )}.disabledIcon path:last-child{fill:var(
 --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
-)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(
+)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .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]){height:100%;object-fit:contain;transition:width var(
+)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;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;width:100%}.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:#0000}
-`;export default r;
+) ease-in-out}.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:#0000}
+`;export default e;
 //# sourceMappingURL=swatch.css.js.map

package/src/swatch.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["swatch.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(--mod-swatch-size,var(--spectrum-swatch-size))}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-swatch-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-swatch-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);align-items:center;background:repeating-conic-gradient(var(--spectrum-swatch-checkerboard-light-color) 0 25%,var(--spectrum-swatch-checkerboard-dark-color) 0 50%) 0 0 /calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}.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:#0000}\n`;\nexport default styles;"],
-  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuHf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2023 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-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:#00000082;--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(--spectrum-swatch-size-extra-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\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]){--highcontrast-swatch-border-color:GrayText}}:host{align-items:center;block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));display:flex;inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}.disabledIcon{block-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);inline-size:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:#0000}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);visibility:visible}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);block-size:200%;content:\"\";inline-size:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{align-items:center;block-size:100%;border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;inline-size:100%;justify-content:center;overflow:hidden;position:relative}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(--spectrum-picked-color,transparent)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}: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]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}: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,:host([rounding=full]:not([shape=rectangle])[selected]) .fill,:host([rounding=full]:not([shape=rectangle])[selected]) .fill:before{border-radius:100%}:host([rounding=full]:not([shape=rectangle])[selected]) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){block-size:100%;inline-size:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}.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:#0000}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiHf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/swatch.stories.js

@@ -72,6 +72,10 @@ export const gradient = (args) => template(args);
 gradient.args = {
   color: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
 };
+export const opacity = (args) => template(args);
+opacity.args = {
+  color: "rgba(255, 0, 0, 0.3)"
+};
 export const mixedValue = (args) => template(args);
 mixedValue.args = {
   mixedValue: true,

package/stories/swatch.stories.js.map

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