@spectrum-web-components/swatch 0.50.0-beta.1 → 0.50.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "0.50.0-beta.1",
3
+ "version": "0.50.0-beta.11",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,7 +37,9 @@
37
37
  "development": "./src/index.dev.js",
38
38
  "default": "./src/index.js"
39
39
  },
40
+ "./src/swatch-group-overrides.css.js": "./src/swatch-group-overrides.css.js",
40
41
  "./src/swatch-group.css.js": "./src/swatch-group.css.js",
42
+ "./src/swatch-overrides.css.js": "./src/swatch-overrides.css.js",
41
43
  "./src/swatch.css.js": "./src/swatch.css.js",
42
44
  "./sp-swatch.js": {
43
45
  "development": "./sp-swatch.dev.js",
@@ -67,16 +69,16 @@
67
69
  ],
68
70
  "dependencies": {
69
71
  "@lit-labs/observers": "^2.0.2",
70
- "@spectrum-web-components/base": "^0.50.0-beta.1",
71
- "@spectrum-web-components/icon": "^0.50.0-beta.1",
72
- "@spectrum-web-components/icons-ui": "^0.50.0-beta.1",
73
- "@spectrum-web-components/opacity-checkerboard": "^0.50.0-beta.1",
74
- "@spectrum-web-components/reactive-controllers": "^0.50.0-beta.1",
75
- "@spectrum-web-components/shared": "^0.50.0-beta.1"
72
+ "@spectrum-web-components/base": "^0.50.0-beta.11",
73
+ "@spectrum-web-components/icon": "^0.50.0-beta.11",
74
+ "@spectrum-web-components/icons-ui": "^0.50.0-beta.11",
75
+ "@spectrum-web-components/opacity-checkerboard": "^0.50.0-beta.11",
76
+ "@spectrum-web-components/reactive-controllers": "^0.50.0-beta.11",
77
+ "@spectrum-web-components/shared": "^0.50.0-beta.11"
76
78
  },
77
79
  "devDependencies": {
78
- "@spectrum-css/swatch": "^6.1.0",
79
- "@spectrum-css/swatchgroup": "^3.1.0"
80
+ "@spectrum-css/swatch": "^7.0.0-s2-foundations.17",
81
+ "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.15"
80
82
  },
81
83
  "types": "./src/index.d.ts",
82
84
  "customElements": "custom-elements.json",
@@ -84,5 +86,5 @@
84
86
  "./sp-*.js",
85
87
  "./**/*.dev.js"
86
88
  ],
87
- "gitHead": "b0ffab750c03ed7c7ad4436954c437b82235b403"
89
+ "gitHead": "2e93b2d6083f01bd524435a89c541f95c1701169"
88
90
  }
package/src/Swatch.dev.js CHANGED
@@ -26,6 +26,7 @@ import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
26
26
  import "@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";
27
27
  import styles from "./swatch.css.js";
28
28
  import dashStyles from "@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";
29
+ import dashSmallOverrides from "@spectrum-web-components/icon/src/icon-dash-overrides.css.js";
29
30
  const dashIcon = {
30
31
  xs: () => html`
31
32
  <sp-icon-dash75
@@ -89,7 +90,12 @@ export class Swatch extends SizedMixin(Focusable, {
89
90
  };
90
91
  }
91
92
  static get styles() {
92
- return [opacityCheckerboardStyles, styles, dashStyles];
93
+ return [
94
+ opacityCheckerboardStyles,
95
+ styles,
96
+ dashStyles,
97
+ dashSmallOverrides
98
+ ];
93
99
  }
94
100
  get value() {
95
101
  return this._value || this.color || this.label;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Swatch.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n ifDefined,\n when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n xs: () => html`\n <sp-icon-dash75\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n s: () => html`\n <sp-icon-dash100\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n m: () => html`\n <sp-icon-dash200\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n l: () => html`\n <sp-icon-dash300\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerboardStyles, styles, dashStyles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property()\n public color = '';\n\n @property()\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n public mixedValue = false;\n\n @property({ type: Boolean, reflect: true })\n public nothing = false;\n\n @property({ reflect: true })\n public override role = 'button';\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property()\n get value(): string {\n return this._value || this.color || this.label;\n }\n\n set value(value: string) {\n if (value === this._value) return;\n const oldValue = this.value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value?: string;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n public toggle(force?: boolean): void {\n this.selected = force ?? !this.selected;\n }\n\n private handleClick(): void {\n if (this.disabled || this.mixedValue) return;\n this.toggle();\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.toggle();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n this.addEventListener('keyup', this.handleKeyup);\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected renderDisabled = (): TemplateResult => {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"disabledIcon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n />\n <path\n d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n />\n </svg>\n `;\n };\n\n protected renderMixedValue = (): TemplateResult => {\n return dashIcon[this.size]();\n };\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard fill\"\n style=${ifDefined(\n this.color\n ? `--spectrum-picked-color: ${this.color}`\n : undefined\n )}\n >\n <slot name=\"image\"></slot>\n ${when(this.disabled, this.renderDisabled)}\n ${when(this.mixedValue, this.renderMixedValue)}\n </div>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.getAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n if (changes.has('selected') || changes.has('role')) {\n const selectedAttribute =\n this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n const removedSelectedAttribute =\n this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n if (changes.has('role')) {\n this.removeAttribute(removedSelectedAttribute);\n }\n this.setAttribute(\n selectedAttribute,\n this.selected ? 'true' : 'false'\n );\n }\n\n // aria-label should be in sync with changes in label and color.\n if (\n changes.has('label') ||\n changes.has('color') ||\n changes.has('mixedValue')\n ) {\n if (this.label !== this.color && this.label?.length) {\n this.setAttribute('aria-label', this.label);\n } else if (this.color) {\n this.setAttribute('aria-label', this.color);\n } else if (this.mixedValue) {\n this.setAttribute('aria-label', 'Mixed');\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n ifDefined,\n when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\nimport dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.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 [\n opacityCheckerboardStyles,\n styles,\n dashStyles,\n dashSmallOverrides,\n ];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property()\n public color = '';\n\n @property()\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n public mixedValue = false;\n\n @property({ type: Boolean, reflect: true })\n public nothing = false;\n\n @property({ reflect: true })\n public override role = 'button';\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property()\n get value(): string {\n return this._value || this.color || this.label;\n }\n\n set value(value: string) {\n if (value === this._value) return;\n const oldValue = this.value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value?: string;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n public toggle(force?: boolean): void {\n this.selected = force ?? !this.selected;\n }\n\n private handleClick(): void {\n if (this.disabled || this.mixedValue) return;\n this.toggle();\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.toggle();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n this.addEventListener('keyup', this.handleKeyup);\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected renderDisabled = (): TemplateResult => {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"disabledIcon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n />\n <path\n d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n />\n </svg>\n `;\n };\n\n protected renderMixedValue = (): TemplateResult => {\n return dashIcon[this.size]();\n };\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard fill\"\n style=${ifDefined(\n this.color\n ? `--spectrum-picked-color: ${this.color}`\n : undefined\n )}\n >\n <slot name=\"image\"></slot>\n ${when(this.disabled, this.renderDisabled)}\n ${when(this.mixedValue, this.renderMixedValue)}\n </div>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.getAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n if (changes.has('selected') || changes.has('role')) {\n const selectedAttribute =\n this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n const removedSelectedAttribute =\n this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n if (changes.has('role')) {\n this.removeAttribute(removedSelectedAttribute);\n }\n this.setAttribute(\n selectedAttribute,\n this.selected ? 'true' : 'false'\n );\n }\n\n // aria-label should be in sync with changes in label and color.\n if (\n changes.has('label') ||\n changes.has('color') ||\n changes.has('mixedValue')\n ) {\n if (this.label !== this.color && this.label?.length) {\n this.setAttribute('aria-label', this.label);\n } else if (this.color) {\n this.setAttribute('aria-label', this.color);\n } else if (this.mixedValue) {\n this.setAttribute('aria-label', 'Mixed');\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/Swatch.js CHANGED
@@ -1,4 +1,4 @@
1
- "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,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 s}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as b,when as c}from"@spectrum-web-components/base/src/directives.js";import{Focusable as m}from"@spectrum-web-components/shared/src/focusable.js";import v 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 f from"./swatch.css.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";const C={xs:()=>l`
1
+ "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,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 s}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as b,when as c}from"@spectrum-web-components/base/src/directives.js";import{Focusable as m}from"@spectrum-web-components/shared/src/focusable.js";import v 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 f from"./swatch.css.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";import C from"@spectrum-web-components/icon/src/icon-dash-overrides.css.js";const x={xs:()=>l`
2
2
  <sp-icon-dash75
3
3
  slot="icon"
4
4
  class="mixedValueIcon spectrum-UIIcon-Dash75"
@@ -35,7 +35,7 @@
35
35
  fill="var(--spectrum-swatch-disabled-icon-stroke-color)"
36
36
  />
37
37
  </svg>
38
- `;this.renderMixedValue=()=>C[this.size]()}static get styles(){return[v,f,y]}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`
38
+ `;this.renderMixedValue=()=>x[this.size]()}static get styles(){return[v,f,y,C]}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`
39
39
  <div
40
40
  class="opacity-checkerboard fill"
41
41
  style=${b(this.color?`--spectrum-picked-color: ${this.color}`:void 0)}
package/src/Swatch.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Swatch.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n ifDefined,\n when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\n\nexport type SwatchBorder = 'light' | 'none' | undefined;\nexport type SwatchRounding = 'none' | 'full' | undefined;\nexport type SwatchShape = 'rectangle' | undefined;\n\nconst dashIcon: Record<string, () => TemplateResult> = {\n xs: () => html`\n <sp-icon-dash75\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash75\"\n ></sp-icon-dash75>\n `,\n s: () => html`\n <sp-icon-dash100\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash100\"\n ></sp-icon-dash100>\n `,\n m: () => html`\n <sp-icon-dash200\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash200\"\n ></sp-icon-dash200>\n `,\n l: () => html`\n <sp-icon-dash300\n slot=\"icon\"\n class=\"mixedValueIcon spectrum-UIIcon-Dash300\"\n ></sp-icon-dash300>\n `,\n};\n\n/**\n * @element sp-swatch\n */\nexport class Swatch extends SizedMixin(Focusable, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerboardStyles, styles, dashStyles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property()\n public color = '';\n\n @property()\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n public mixedValue = false;\n\n @property({ type: Boolean, reflect: true })\n public nothing = false;\n\n @property({ reflect: true })\n public override role = 'button';\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property()\n get value(): string {\n return this._value || this.color || this.label;\n }\n\n set value(value: string) {\n if (value === this._value) return;\n const oldValue = this.value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value?: string;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n public toggle(force?: boolean): void {\n this.selected = force ?? !this.selected;\n }\n\n private handleClick(): void {\n if (this.disabled || this.mixedValue) return;\n this.toggle();\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.toggle();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n this.addEventListener('keyup', this.handleKeyup);\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected renderDisabled = (): TemplateResult => {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"disabledIcon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n />\n <path\n d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n />\n </svg>\n `;\n };\n\n protected renderMixedValue = (): TemplateResult => {\n return dashIcon[this.size]();\n };\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard fill\"\n style=${ifDefined(\n this.color\n ? `--spectrum-picked-color: ${this.color}`\n : undefined\n )}\n >\n <slot name=\"image\"></slot>\n ${when(this.disabled, this.renderDisabled)}\n ${when(this.mixedValue, this.renderMixedValue)}\n </div>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.getAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n if (changes.has('selected') || changes.has('role')) {\n const selectedAttribute =\n this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n const removedSelectedAttribute =\n this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n if (changes.has('role')) {\n this.removeAttribute(removedSelectedAttribute);\n }\n this.setAttribute(\n selectedAttribute,\n this.selected ? 'true' : 'false'\n );\n }\n\n // aria-label should be in sync with changes in label and color.\n if (\n changes.has('label') ||\n changes.has('color') ||\n changes.has('mixedValue')\n ) {\n if (this.label !== this.color && this.label?.length) {\n this.setAttribute('aria-label', this.label);\n } else if (this.color) {\n this.setAttribute('aria-label', this.color);\n } else if (this.mixedValue) {\n this.setAttribute('aria-label', 'Mixed');\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["html", "SizedMixin", "property", "ifDefined", "when", "Focusable", "opacityCheckerboardStyles", "styles", "dashStyles", "dashIcon", "value", "oldValue", "force", "event", "code", "changes", "_a", "selectedAttribute", "removedSelectedAttribute", "__decorateClass"]
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport {\n ifDefined,\n when,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\n\nimport styles from './swatch.css.js';\nimport dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\nimport dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.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 [\n opacityCheckerboardStyles,\n styles,\n dashStyles,\n dashSmallOverrides,\n ];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property()\n public color = '';\n\n @property()\n public label = '';\n\n @property({ type: Boolean, reflect: true, attribute: 'mixed-value' })\n public mixedValue = false;\n\n @property({ type: Boolean, reflect: true })\n public nothing = false;\n\n @property({ reflect: true })\n public override role = 'button';\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property()\n get value(): string {\n return this._value || this.color || this.label;\n }\n\n set value(value: string) {\n if (value === this._value) return;\n const oldValue = this.value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n private _value?: string;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n public toggle(force?: boolean): void {\n this.selected = force ?? !this.selected;\n }\n\n private handleClick(): void {\n if (this.disabled || this.mixedValue) return;\n this.toggle();\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.toggle();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n this.addEventListener('keyup', this.handleKeyup);\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.click();\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n }\n\n protected renderDisabled = (): TemplateResult => {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"disabledIcon\"\n viewBox=\"0 0 20 20\"\n >\n <path\n d=\"M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-color)\"\n />\n <path\n d=\"M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z\"\n stroke=\"none\"\n fill=\"var(--spectrum-swatch-disabled-icon-stroke-color)\"\n />\n </svg>\n `;\n };\n\n protected renderMixedValue = (): TemplateResult => {\n return dashIcon[this.size]();\n };\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard fill\"\n style=${ifDefined(\n this.color\n ? `--spectrum-picked-color: ${this.color}`\n : undefined\n )}\n >\n <slot name=\"image\"></slot>\n ${when(this.disabled, this.renderDisabled)}\n ${when(this.mixedValue, this.renderMixedValue)}\n </div>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues): void {\n if (!this.getAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n if (changes.has('selected') || changes.has('role')) {\n const selectedAttribute =\n this.role === 'button' ? 'aria-pressed' : 'aria-checked';\n const removedSelectedAttribute =\n this.role === 'button' ? 'aria-checked' : 'aria-pressed';\n if (changes.has('role')) {\n this.removeAttribute(removedSelectedAttribute);\n }\n this.setAttribute(\n selectedAttribute,\n this.selected ? 'true' : 'false'\n );\n }\n\n // aria-label should be in sync with changes in label and color.\n if (\n changes.has('label') ||\n changes.has('color') ||\n changes.has('mixedValue')\n ) {\n if (this.label !== this.color && this.label?.length) {\n this.setAttribute('aria-label', this.label);\n } else if (this.color) {\n this.setAttribute('aria-label', this.color);\n } else if (this.mixedValue) {\n this.setAttribute('aria-label', 'Mixed');\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["html", "SizedMixin", "property", "ifDefined", "when", "Focusable", "opacityCheckerboardStyles", "styles", "dashStyles", "dashSmallOverrides", "dashIcon", "value", "oldValue", "force", "event", "code", "changes", "_a", "selectedAttribute", "removedSelectedAttribute", "__decorateClass"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
4
+ :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=spectrum-swatch-group.css.dev.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
1
  "use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
2
- :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
2
+ :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
3
3
  `;export default a;
4
4
  //# sourceMappingURL=spectrum-swatch-group.css.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :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(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:"";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}
4
+ @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=spectrum-swatch.css.dev.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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(--spectrum-border-width-200);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:\"\";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
- "use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
2
- :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(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:"";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}
3
- `;export default e;
1
+ "use strict";import{css as e}from"@spectrum-web-components/base";const o=e`
2
+ @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}
3
+ `;export default o;
4
4
  //# sourceMappingURL=spectrum-swatch.css.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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(--spectrum-border-width-200);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:\"\";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
5
+ `;
6
+ export default styles;
7
+ //# sourceMappingURL=swatch-group-overrides.css.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["swatch-group-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ "use strict";import{css as s}from"@spectrum-web-components/base";const c=s`
2
+ :host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
3
+ `;export default c;
4
+ //# sourceMappingURL=swatch-group-overrides.css.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["swatch-group-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
4
+ :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=swatch-group.css.dev.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
1
  "use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
2
- :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}
2
+ :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}
3
3
  `;export default a;
4
4
  //# sourceMappingURL=swatch-group.css.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch-group.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-swatchgroup-spacing-compact:var(--spectrum-spacing-50);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100);justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{justify-content:flex-start;align-items:flex-start;gap:var(--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact))}:host([density=spacious]){gap:var(--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious))}:host{--spectrum-swatchgroup-spacing-compact:var(--system-swatch-group-spacing-compact);--spectrum-swatchgroup-spacing-regular:var(--system-swatch-group-spacing-regular);--spectrum-swatchgroup-spacing-spacious:var(--system-swatch-group-spacing-spacious)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
@@ -0,0 +1,2 @@
1
+ declare const styles: import("@spectrum-web-components/base").CSSResult;
2
+ export default styles;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ import { css } from "@spectrum-web-components/base";
3
+ const styles = css`
4
+ :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
5
+ `;
6
+ export default styles;
7
+ //# sourceMappingURL=swatch-overrides.css.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["swatch-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ "use strict";import{css as s}from"@spectrum-web-components/base";const c=s`
2
+ :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}
3
+ `;export default c;
4
+ //# sourceMappingURL=swatch-overrides.css.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["swatch-overrides.css.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
+ "names": ["css", "styles"]
7
+ }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :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(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:"";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
4
+ @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
5
5
  `;
6
6
  export default styles;
7
7
  //# sourceMappingURL=swatch.css.dev.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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(--spectrum-border-width-200);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:\"\";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/swatch.css.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
2
- :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(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:"";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
2
+ @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:"";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:"";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}
3
3
  `;export default e;
4
4
  //# sourceMappingURL=swatch.css.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2024 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(--spectrum-border-width-200);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-small);--spectrum-swatch-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--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(--spectrum-swatch-disabled-icon-border-color);--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(--spectrum-focus-indicator-color)}: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(--spectrum-swatch-slash-thickness-extra-small)}: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(--spectrum-swatch-slash-thickness-small)}:host{--spectrum-swatch-size:var(--spectrum-swatch-size-medium);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-swatch-slash-thickness:var(--spectrum-swatch-slash-thickness-medium)}:host([size=l]){--spectrum-swatch-size:var(--spectrum-swatch-size-large);--spectrum-swatch-disabled-icon-size:var(--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]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill,.fill:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}.fill:before{content:\"\";z-index:0;background-color:var(--spectrum-picked-color,transparent);box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));position:absolute;inset:0}:host([border=none]) .fill:before{box-shadow:none;background-color:var(--spectrum-picked-color,transparent)}.mixedValueIcon{pointer-events:none;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n @media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]),:host([disabled]){--highcontrast-swatch-border-color:GrayText}}:host{inline-size:var(--mod-swatch-size,var(--spectrum-swatch-size));block-size:var(--mod-swatch-size,var(--spectrum-swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabledIcon{inline-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size));block-size:var(--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected,var(--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)))}:host([selected]) .fill{clip-path:polygon(calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2),calc(var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)calc(100% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2));border-radius:0}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:0 0;background:var(--spectrum-picked-color,transparent)}:host([mixed-value]) .mixedValueIcon{color:var(--spectrum-swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--spectrum-picked-color,transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness));content:\"\";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color,var(--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{display:block}:host:before{content:\"\";border-width:var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected,var(--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;inset:0}:host:after{content:\"\";inset:calc(var(--mod-swatch-focus-indicator-gap,var(--spectrum-swatch-focus-indicator-gap))*-2);opacity:0;border-width:var(--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)));border-radius:var(--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius));transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:\"\";z-index:0;box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color)));border-radius:var(--mod-swatch-border-radius,var(--spectrum-swatch-border-radius));position:absolute;inset:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{box-shadow:none}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness))var(--highcontrast-swatch-border-color-light,var(--mod-swatch-border-color-light,var(--spectrum-swatch-border-color-light)))}.mixedValueIcon{pointer-events:none;color:#0000;color:var(--spectrum-picked-color,transparent);display:none}.disabledIcon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)));display:none;position:relative}.disabledIcon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color,var(--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)))}.disabledIcon path:last-child{fill:var(--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--mod-swatch-size,var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected))*2)at 50% 50%)}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,height var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out}:host([size=l]){--spectrum-swatch-size:var(--system-swatch-size-l-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-l-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-l-slash-thickness)}:host([size=s]){--spectrum-swatch-size:var(--system-swatch-size-s-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-s-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-s-slash-thickness)}:host([size=xs]){--spectrum-swatch-size:var(--system-swatch-size-xs-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-xs-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-xs-slash-thickness)}:host{--spectrum-swatch-size:var(--system-swatch-size-m-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-size-m-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-size-m-slash-thickness)}:host{--spectrum-swatch-border-radius:var(--system-swatch-border-radius);--spectrum-swatch-focus-indicator-border-radius:var(--system-swatch-focus-indicator-border-radius);--spectrum-swatch-border-thickness:var(--system-swatch-border-thickness);--spectrum-swatch-border-thickness-selected:var(--system-swatch-border-thickness-selected);--spectrum-swatch-focus-indicator-thickness:var(--system-swatch-focus-indicator-thickness);--spectrum-swatch-focus-indicator-gap:var(--system-swatch-focus-indicator-gap);--spectrum-swatch-border-color-opacity:var(--system-swatch-border-color-opacity);--spectrum-swatch-border-color-light-opacity:var(--system-swatch-border-color-light-opacity);--spectrum-swatch-border-color:var(--system-swatch-border-color);--spectrum-swatch-icon-border-color:var(--system-swatch-icon-border-color);--spectrum-swatch-border-color-light:var(--system-swatch-border-color-light);--spectrum-swatch-border-color-selected:var(--system-swatch-border-color-selected);--spectrum-swatch-inner-border-color-selected:var(--system-swatch-inner-border-color-selected);--spectrum-swatch-disabled-icon-color:var(--system-swatch-disabled-icon-color);--spectrum-swatch-dash-icon-color:var(--system-swatch-dash-icon-color);--spectrum-swatch-slash-icon-color:var(--system-swatch-slash-icon-color);--spectrum-swatch-focus-indicator-color:var(--system-swatch-focus-indicator-color);--spectrum-swatch-size:var(--system-swatch-size);--spectrum-swatch-disabled-icon-size:var(--system-swatch-disabled-icon-size);--spectrum-swatch-slash-thickness:var(--system-swatch-slash-thickness)}.fill:before{background:var(--spectrum-picked-color,transparent)}:host([border=none]) .fill:before{background:var(--spectrum-picked-color,transparent)}:host .is-image .fill:before{background:0 0}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }