@spectrum-web-components/swatch 0.2.2 → 0.3.1

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.
Files changed (17) hide show
  1. package/package.json +9 -10
  2. package/src/spectrum-swatch-group.css.dev.js +7 -3
  3. package/src/spectrum-swatch-group.css.dev.js.map +2 -2
  4. package/src/spectrum-swatch-group.css.js +9 -5
  5. package/src/spectrum-swatch-group.css.js.map +2 -2
  6. package/src/spectrum-swatch.css.dev.js +147 -61
  7. package/src/spectrum-swatch.css.dev.js.map +2 -2
  8. package/src/spectrum-swatch.css.js +149 -63
  9. package/src/spectrum-swatch.css.js.map +2 -2
  10. package/src/swatch-group.css.dev.js +7 -3
  11. package/src/swatch-group.css.dev.js.map +2 -2
  12. package/src/swatch-group.css.js +9 -5
  13. package/src/swatch-group.css.js.map +2 -2
  14. package/src/swatch.css.dev.js +147 -61
  15. package/src/swatch.css.dev.js.map +2 -2
  16. package/src/swatch.css.js +149 -63
  17. package/src/swatch.css.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "0.2.2",
3
+ "version": "0.3.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -67,16 +67,15 @@
67
67
  ],
68
68
  "dependencies": {
69
69
  "@lit-labs/observers": "^1.0.1",
70
- "@spectrum-web-components/base": "^0.7.0",
71
- "@spectrum-web-components/icon": "^0.12.1",
72
- "@spectrum-web-components/icons-ui": "^0.9.1",
73
- "@spectrum-web-components/reactive-controllers": "^0.3.1",
74
- "@spectrum-web-components/shared": "^0.15.1",
75
- "tslib": "^2.0.0"
70
+ "@spectrum-web-components/base": "^0.7.1",
71
+ "@spectrum-web-components/icon": "^0.12.3",
72
+ "@spectrum-web-components/icons-ui": "^0.9.3",
73
+ "@spectrum-web-components/reactive-controllers": "^0.3.3",
74
+ "@spectrum-web-components/shared": "^0.15.2"
76
75
  },
77
76
  "devDependencies": {
78
- "@spectrum-css/swatch": "^1.1.4",
79
- "@spectrum-css/swatchgroup": "^1.1.4"
77
+ "@spectrum-css/swatch": "^3.0.0",
78
+ "@spectrum-css/swatchgroup": "^2.0.1"
80
79
  },
81
80
  "types": "./src/index.d.ts",
82
81
  "customElements": "custom-elements.json",
@@ -84,5 +83,5 @@
84
83
  "./sp-*.js",
85
84
  "./**/*.dev.js"
86
85
  ],
87
- "gitHead": "96da2eef637c5d50dd04a75d40a46353116787b4"
86
+ "gitHead": "8bd87724e91e23df83dbf63a434bbbe10b8daaa6"
88
87
  }
package/src/spectrum-swatch-group.css.dev.js CHANGED
@@ -1,10 +1,14 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--spectrum-global-dimension-size-50);justify-content:flex-start}:host([density=compact]){gap:var(
5
- --spectrum-global-dimension-size-25
4
+ :host{--spectrum-swatchgroup-spacing-compact:var(
5
+ --spectrum-spacing-50
6
+ );--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(
7
+ --mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)
8
+ )}:host([density=compact]){gap:var(
9
+ --mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)
6
10
  )}:host([density=spacious]){gap:var(
7
- --spectrum-global-dimension-size-100
11
+ --mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)
8
12
  )}
9
13
  `;
10
14
  export default styles;
package/src/spectrum-swatch-group.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--spectrum-global-dimension-size-50);justify-content:flex-start}:host([density=compact]){gap:var(\n--spectrum-global-dimension-size-25\n)}:host([density=spacious]){gap:var(\n--spectrum-global-dimension-size-100\n)}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOf,eAAe;",
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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatchgroup-spacing-compact:var(\n--spectrum-spacing-50\n);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-swatch-group.css.js CHANGED
@@ -1,8 +1,12 @@
1
- "use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
2
- :host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--spectrum-global-dimension-size-50);justify-content:flex-start}:host([density=compact]){gap:var(
3
- --spectrum-global-dimension-size-25
1
+ "use strict";import{css as s}from"@spectrum-web-components/base";const a=s`
2
+ :host{--spectrum-swatchgroup-spacing-compact:var(
3
+ --spectrum-spacing-50
4
+ );--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(
5
+ --mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)
6
+ )}:host([density=compact]){gap:var(
7
+ --mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)
4
8
  )}:host([density=spacious]){gap:var(
5
- --spectrum-global-dimension-size-100
9
+ --mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)
6
10
  )}
7
- `;export default e;
11
+ `;export default a;
8
12
  //# sourceMappingURL=spectrum-swatch-group.css.js.map
package/src/spectrum-swatch-group.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch-group.css.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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;gap:var(--spectrum-global-dimension-size-50);justify-content:flex-start}:host([density=compact]){gap:var(\n--spectrum-global-dimension-size-25\n)}:host([density=spacious]){gap:var(\n--spectrum-global-dimension-size-100\n)}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,eAAeC",
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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatchgroup-spacing-compact:var(\n--spectrum-spacing-50\n);--spectrum-swatchgroup-spacing-regular:var(--spectrum-spacing-75);--spectrum-swatchgroup-spacing-spacious:var(--spectrum-spacing-100)}:host{align-items:flex-start;display:inline-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}:host{gap:var(\n--mod-swatchgroup-spacing-regular,var(--spectrum-swatchgroup-spacing-regular)\n)}:host([density=compact]){gap:var(\n--mod-swatchgroup-spacing-compact,var(--spectrum-swatchgroup-spacing-compact)\n)}:host([density=spacious]){gap:var(\n--mod-swatchgroup-spacing-spacious,var(--spectrum-swatchgroup-spacing-spacious)\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-swatch.css.dev.js CHANGED
@@ -1,67 +1,153 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-swatch-size-xs:var(
5
- --spectrum-global-dimension-size-200
6
- );--spectrum-swatch-size-s:var(--spectrum-global-dimension-size-300);--spectrum-swatch-size-m:var(--spectrum-global-dimension-size-400);--spectrum-swatch-size-l:var(--spectrum-global-dimension-size-500);--spectrum-swatch-disabled-icon-size-xs:var(
7
- --spectrum-global-dimension-size-150
8
- );--spectrum-swatch-disabled-icon-size-s:var(
9
- --spectrum-global-dimension-size-200
10
- );--spectrum-swatch-disabled-icon-size-m:var(
11
- --spectrum-global-dimension-size-225
12
- );--spectrum-swatch-disabled-icon-size-l:var(
13
- --spectrum-global-dimension-size-250
14
- );--spectrum-swatch-disabled-icon-color:var(
15
- --spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))
16
- );--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(
17
- --spectrum-global-dimension-size-100
18
- );--spectrum-swatch-selection-indicator-border-width:var(
19
- --spectrum-global-dimension-size-25
20
- );--spectrum-swatch-selection-indicator-border-color:var(
21
- --spectrum-global-color-gray-900
22
- );--spectrum-swatch-background-color-selected:var(
23
- --spectrum-global-color-gray-50
24
- );--spectrum-swatch-border-radius:var(
25
- --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
26
- );--spectrum-swatch-fill-border-radius-selected:var(
27
- --spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)
28
- );--spectrum-swatch-fill-border-width:var(
29
- --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
30
- );--spectrum-swatch-fill-border-color:rgba(var(--spectrum-global-color-gray-900-rgb),0.51);--spectrum-swatch-fill-border-color-light:rgba(var(--spectrum-global-color-gray-900-rgb),0.2);--spectrum-swatch-background-offset:0px;--spectrum-swatch-checkerboard-size:var(
31
- --spectrum-global-dimension-static-size-100,8px
32
- );align-items:center;display:flex;justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}:host,:host:before{border-radius:var(
33
- --spectrum-swatch-border-radius
34
- )}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(
35
- --spectrum-swatch-background-color-selected
36
- )}:host([selected]) .fill{border-radius:var(--spectrum-swatch-fill-border-radius-selected);height:calc(100% - var(--spectrum-swatch-selection-padding));width:calc(100% - var(--spectrum-swatch-selection-padding))}:host([selected]) .fill:before{border-radius:var(
37
- --spectrum-swatch-fill-border-radius-selected
38
- );box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(
39
- --spectrum-swatch-background-color-selected
40
- )}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(
41
- --spectrum-swatch-background-color-selected
42
- )}:host([nothing]) .fill:after{background:var(--spectrum-global-color-red-500);content:"";position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([nothing][size=xs]) .fill:after{height:2px}:host([nothing][size=s]) .fill:after{height:3px}:host([nothing][size=m]) .fill:after{height:4px}:host([nothing][size=l]) .fill:after{height:5px}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}:host:before{border:var(--spectrum-swatch-selection-indicator-border-width) solid var(--spectrum-swatch-selection-indicator-border-color);bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}:host:after{border:var(--spectrum-global-dimension-static-size-25,2px) solid var(
43
- --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
44
- );border-radius:var(--spectrum-alias-focus-ring-border-radius-regular);bottom:calc(var(--spectrum-global-dimension-size-50)*-1);content:"";left:calc(var(--spectrum-global-dimension-size-50)*-1);opacity:0;position:absolute;right:calc(var(--spectrum-global-dimension-size-50)*-1);top:calc(var(--spectrum-global-dimension-size-50)*-1);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.fill{align-items:center;background-color:var(
45
- --spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
46
- );background-image:linear-gradient(-45deg,transparent 75.5%,var(
47
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
48
- ) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
49
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
50
- ) 75.5%),linear-gradient(-45deg,var(
51
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
52
- ) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
53
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
54
- ) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-background-offset) var(--spectrum-swatch-background-offset),var(--spectrum-swatch-background-offset) calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)) calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)) var(--spectrum-swatch-background-offset);background-size:calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(--spectrum-swatch-border-radius);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(--spectrum-swatch-border-radius);bottom:0;box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color);content:"";left:0;position:absolute;right:0;top:0;z-index:0}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color-light)}:host([border=none]) .fill:before{box-shadow:none}.mixedValueIcon{color:var(
55
- --spectrum-global-color-gray-700
56
- )}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(--spectrum-swatch-disabled-icon-stroke-color);color:var(--spectrum-swatch-disabled-icon-color);position:relative;z-index:2}:host([size=xs]){height:var(--spectrum-swatch-size-xs);width:var(--spectrum-swatch-size-xs)}:host([size=xs]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-xs);width:var(
57
- --spectrum-swatch-disabled-icon-size-xs
58
- )}:host([size=s]){height:var(--spectrum-swatch-size-s);width:var(--spectrum-swatch-size-s)}:host([size=s]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-s);width:var(
59
- --spectrum-swatch-disabled-icon-size-s
60
- )}:host([size=m]){height:var(--spectrum-swatch-size-m);width:var(--spectrum-swatch-size-m)}:host([size=m]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-m);width:var(
61
- --spectrum-swatch-disabled-icon-size-m
62
- )}:host([size=l]){height:var(--spectrum-swatch-size-l);width:var(--spectrum-swatch-size-l)}:host([size=l]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-l);width:var(
63
- --spectrum-swatch-disabled-icon-size-l
64
- )}:host([shape=rectangle][size=xs]){width:calc(var(--spectrum-swatch-size-xs)*2)}:host([shape=rectangle][size=s]){width:calc(var(--spectrum-swatch-size-s)*2)}:host([shape=rectangle][size=m]){width:calc(var(--spectrum-swatch-size-m)*2)}:host([shape=rectangle][size=l]){width:calc(var(--spectrum-swatch-size-l)*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(--spectrum-global-animation-duration-100,.13s) ease-in-out,height var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:100%}@media (forced-colors:active){.fill{forced-color-adjust:none}:host{--spectrum-swatch-disabled-icon-color:grayText;--spectrum-alias-focus-ring-color:ButtonText;--spectrum-swatch-selection-indicator-border-color:Highlight;--spectrum-swatch-fill-border-color:ButtonText;--spectrum-swatch-fill-border-color-light:ButtonText;--spectrum-swatch-background-color-selected:ButtonFace}:host([disabled]) .fill{forced-color-adjust:auto}:host([nothing]) .fill:after{background:ButtonText}}
4
+ :host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:rgba(0,0,0,.51);--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(
5
+ --spectrum-border-width-200
6
+ );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
7
+ --spectrum-swatch-slash-thickness-small
8
+ );--spectrum-swatch-focus-indicator-thickness:var(
9
+ --spectrum-focus-indicator-thickness
10
+ );--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(
11
+ --spectrum-swatch-disabled-icon-border-color
12
+ );--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(
13
+ --spectrum-focus-indicator-color
14
+ )}:host([size=xs]){--spectrum-swatch-size:var(
15
+ --spectrum-swatch-size-extra-small
16
+ );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
17
+ --spectrum-swatch-slash-thickness-extra-small
18
+ )}:host([size=s]){--spectrum-swatch-size:var(
19
+ --spectrum-swatch-size-small
20
+ );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
21
+ --spectrum-swatch-slash-thickness-small
22
+ )}:host([size=m]){--spectrum-swatch-size:var(
23
+ --spectrum-swatch-size-medium
24
+ );--spectrum-swatch-disabled-icon-size:var(
25
+ --spectrum-workflow-icon-size-100
26
+ );--spectrum-swatch-slash-thickness:var(
27
+ --spectrum-swatch-slash-thickness-medium
28
+ )}:host([size=l]){--spectrum-swatch-size:var(
29
+ --spectrum-swatch-size-large
30
+ );--spectrum-swatch-disabled-icon-size:var(
31
+ --spectrum-workflow-icon-size-200
32
+ );--spectrum-swatch-slash-thickness:var(
33
+ --spectrum-swatch-slash-thickness-large
34
+ )}@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]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(
35
+ --mod-swatch-size,var(--spectrum-swatch-size)
36
+ )}.disabledIcon{height:var(
37
+ --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
38
+ );width:var(
39
+ --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
40
+ )}:host,:host:before{border-radius:var(
41
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
42
+ )}:host([selected]){background-color:var(
43
+ --highcontrast-swatch-background-color-selected,var(
44
+ --mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)
45
+ )
46
+ )}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(
47
+ --mod-swatch-border-thickness-selected,
48
+ var(--spectrum-swatch-border-thickness-selected)
49
+ )*2) calc(var(
50
+ --mod-swatch-border-thickness-selected,
51
+ var(--spectrum-swatch-border-thickness-selected)
52
+ )*2),calc(100% - var(
53
+ --mod-swatch-border-thickness-selected,
54
+ var(--spectrum-swatch-border-thickness-selected)
55
+ )*2) calc(var(
56
+ --mod-swatch-border-thickness-selected,
57
+ var(--spectrum-swatch-border-thickness-selected)
58
+ )*2),calc(100% - var(
59
+ --mod-swatch-border-thickness-selected,
60
+ var(--spectrum-swatch-border-thickness-selected)
61
+ )*2) calc(100% - var(
62
+ --mod-swatch-border-thickness-selected,
63
+ var(--spectrum-swatch-border-thickness-selected)
64
+ )*2),calc(var(
65
+ --mod-swatch-border-thickness-selected,
66
+ var(--spectrum-swatch-border-thickness-selected)
67
+ )*2) calc(100% - var(
68
+ --mod-swatch-border-thickness-selected,
69
+ var(--spectrum-swatch-border-thickness-selected)
70
+ )*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host(.is-image) .fill:before{background-color:transparent}:host([mixed-value]) .fill{background:var(
71
+ --spectrum-picked-color,transparent
72
+ )}:host([mixed-value]) .mixedValueIcon{color:var(
73
+ --spectrum-swatch-dash-icon-color
74
+ );visibility:visible}:host([nothing]) .fill{background-color:var(
75
+ --spectrum-picked-color,transparent
76
+ );background-image:none}:host([nothing]) .fill:after{background:var(
77
+ --highcontrast-swatch-fill-foreground-color,var(
78
+ --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
79
+ )
80
+ );content:"";height:var(
81
+ --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
82
+ );position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(
83
+ --highcontrast-swatch-border-color-selected,var(
84
+ --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
85
+ )
86
+ );border-style:solid;border-width:var(
87
+ --mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)
88
+ );content:"";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(
89
+ --highcontrast-swatch-focus-indicator-color,var(
90
+ --mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)
91
+ )
92
+ );border-radius:var(
93
+ --mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)
94
+ );border-style:solid;border-width:var(
95
+ --mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)
96
+ );content:"";inset:calc(var(
97
+ --mod-swatch-focus-indicator-gap,
98
+ var(--spectrum-swatch-focus-indicator-gap)
99
+ )*-2);opacity:0;position:absolute;transition:opacity var(
100
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
101
+ ) ease-in-out}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:8px;--spectrum-swatch-checkerboard-background-offset:0px;--spectrum-swatch-checkerboard-dark-color:#d9d9d9;--spectrum-swatch-checkerboard-light-color:#fff;align-items:center;background-color:var(--spectrum-swatch-checkerboard-light-color);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(-45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-checkerboard-background-offset) var(--spectrum-swatch-checkerboard-background-offset),var(--spectrum-swatch-checkerboard-background-offset) calc(var(
102
+ --mod-swatch-checkerboard-size,
103
+ var(--spectrum-swatch-checkerboard-size)
104
+ ) + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(
105
+ --mod-swatch-checkerboard-size,
106
+ var(--spectrum-swatch-checkerboard-size)
107
+ ) + var(--spectrum-swatch-checkerboard-background-offset)) calc(var(
108
+ --mod-swatch-checkerboard-size,
109
+ var(--spectrum-swatch-checkerboard-size)
110
+ )*-1 + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(
111
+ --mod-swatch-checkerboard-size,
112
+ var(--spectrum-swatch-checkerboard-size)
113
+ )*-1 + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);background-size:calc(var(
114
+ --mod-swatch-checkerboard-size,
115
+ var(--spectrum-swatch-checkerboard-size)
116
+ )*2) calc(var(
117
+ --mod-swatch-checkerboard-size,
118
+ var(--spectrum-swatch-checkerboard-size)
119
+ )*2);border-radius:var(
120
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
121
+ );box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(
122
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
123
+ );box-shadow:inset 0 0 0 var(
124
+ --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
125
+ ) var(
126
+ --highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))
127
+ );content:"";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(
128
+ --spectrum-picked-color,transparent
129
+ )}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
130
+ --highcontrast-swatch-disabled-icon-color,var(
131
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
132
+ )
133
+ );color:var(
134
+ --highcontrast-swatch-disabled-icon-color,var(
135
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
136
+ )
137
+ );position:relative;z-index:2}.disabledIcon path:first-child{fill:var(
138
+ --highcontrast-swatch-disabled-icon-color,var(
139
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
140
+ )
141
+ )}.disabledIcon path:last-child{fill:var(
142
+ --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
143
+ )}:host([shape=rectangle]){width:calc(var(--mod-swatch-size, var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(
144
+ --mod-swatch-border-thickness-selected,
145
+ var(--spectrum-swatch-border-thickness-selected)
146
+ )*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(
147
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
148
+ ) ease-in-out,height var(
149
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
150
+ ) ease-in-out;width:100%}
65
151
  `;
66
152
  export default styles;
67
153
  //# sourceMappingURL=spectrum-swatch.css.dev.js.map
package/src/spectrum-swatch.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatch-size-xs:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-size-s:var(--spectrum-global-dimension-size-300);--spectrum-swatch-size-m:var(--spectrum-global-dimension-size-400);--spectrum-swatch-size-l:var(--spectrum-global-dimension-size-500);--spectrum-swatch-disabled-icon-size-xs:var(\n--spectrum-global-dimension-size-150\n);--spectrum-swatch-disabled-icon-size-s:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-disabled-icon-size-m:var(\n--spectrum-global-dimension-size-225\n);--spectrum-swatch-disabled-icon-size-l:var(\n--spectrum-global-dimension-size-250\n);--spectrum-swatch-disabled-icon-color:var(\n--spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))\n);--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(\n--spectrum-global-dimension-size-100\n);--spectrum-swatch-selection-indicator-border-width:var(\n--spectrum-global-dimension-size-25\n);--spectrum-swatch-selection-indicator-border-color:var(\n--spectrum-global-color-gray-900\n);--spectrum-swatch-background-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-swatch-border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);--spectrum-swatch-fill-border-radius-selected:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-swatch-fill-border-width:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-swatch-fill-border-color:rgba(var(--spectrum-global-color-gray-900-rgb),0.51);--spectrum-swatch-fill-border-color-light:rgba(var(--spectrum-global-color-gray-900-rgb),0.2);--spectrum-swatch-background-offset:0px;--spectrum-swatch-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);align-items:center;display:flex;justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}:host,:host:before{border-radius:var(\n--spectrum-swatch-border-radius\n)}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(\n--spectrum-swatch-background-color-selected\n)}:host([selected]) .fill{border-radius:var(--spectrum-swatch-fill-border-radius-selected);height:calc(100% - var(--spectrum-swatch-selection-padding));width:calc(100% - var(--spectrum-swatch-selection-padding))}:host([selected]) .fill:before{border-radius:var(\n--spectrum-swatch-fill-border-radius-selected\n);box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([nothing]) .fill:after{background:var(--spectrum-global-color-red-500);content:\"\";position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([nothing][size=xs]) .fill:after{height:2px}:host([nothing][size=s]) .fill:after{height:3px}:host([nothing][size=m]) .fill:after{height:4px}:host([nothing][size=l]) .fill:after{height:5px}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}:host:before{border:var(--spectrum-swatch-selection-indicator-border-width) solid var(--spectrum-swatch-selection-indicator-border-color);bottom:0;content:\"\";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}:host:after{border:var(--spectrum-global-dimension-static-size-25,2px) solid var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);border-radius:var(--spectrum-alias-focus-ring-border-radius-regular);bottom:calc(var(--spectrum-global-dimension-size-50)*-1);content:\"\";left:calc(var(--spectrum-global-dimension-size-50)*-1);opacity:0;position:absolute;right:calc(var(--spectrum-global-dimension-size-50)*-1);top:calc(var(--spectrum-global-dimension-size-50)*-1);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.fill{align-items:center;background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-background-offset) var(--spectrum-swatch-background-offset),var(--spectrum-swatch-background-offset) calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)) calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)) var(--spectrum-swatch-background-offset);background-size:calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(--spectrum-swatch-border-radius);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(--spectrum-swatch-border-radius);bottom:0;box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color);content:\"\";left:0;position:absolute;right:0;top:0;z-index:0}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color-light)}:host([border=none]) .fill:before{box-shadow:none}.mixedValueIcon{color:var(\n--spectrum-global-color-gray-700\n)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(--spectrum-swatch-disabled-icon-stroke-color);color:var(--spectrum-swatch-disabled-icon-color);position:relative;z-index:2}:host([size=xs]){height:var(--spectrum-swatch-size-xs);width:var(--spectrum-swatch-size-xs)}:host([size=xs]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-xs);width:var(\n--spectrum-swatch-disabled-icon-size-xs\n)}:host([size=s]){height:var(--spectrum-swatch-size-s);width:var(--spectrum-swatch-size-s)}:host([size=s]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-s);width:var(\n--spectrum-swatch-disabled-icon-size-s\n)}:host([size=m]){height:var(--spectrum-swatch-size-m);width:var(--spectrum-swatch-size-m)}:host([size=m]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-m);width:var(\n--spectrum-swatch-disabled-icon-size-m\n)}:host([size=l]){height:var(--spectrum-swatch-size-l);width:var(--spectrum-swatch-size-l)}:host([size=l]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-l);width:var(\n--spectrum-swatch-disabled-icon-size-l\n)}:host([shape=rectangle][size=xs]){width:calc(var(--spectrum-swatch-size-xs)*2)}:host([shape=rectangle][size=s]){width:calc(var(--spectrum-swatch-size-s)*2)}:host([shape=rectangle][size=m]){width:calc(var(--spectrum-swatch-size-m)*2)}:host([shape=rectangle][size=l]){width:calc(var(--spectrum-swatch-size-l)*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(--spectrum-global-animation-duration-100,.13s) ease-in-out,height var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:100%}@media (forced-colors:active){.fill{forced-color-adjust:none}:host{--spectrum-swatch-disabled-icon-color:grayText;--spectrum-alias-focus-ring-color:ButtonText;--spectrum-swatch-selection-indicator-border-color:Highlight;--spectrum-swatch-fill-border-color:ButtonText;--spectrum-swatch-fill-border-color-light:ButtonText;--spectrum-swatch-background-color-selected:ButtonFace}:host([disabled]) .fill{forced-color-adjust:auto}:host([nothing]) .fill:after{background:ButtonText}}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Df,eAAe;",
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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatch-focus-indicator-border-radius:8px;--spectrum-swatch-icon-border-color:rgba(0,0,0,.51);--spectrum-swatch-size:var(--spectrum-swatch-size-small);--spectrum-swatch-border-radius:var(--spectrum-corner-radius-100);--spectrum-swatch-border-thickness:var(--spectrum-border-width-100);--spectrum-swatch-border-thickness-selected:var(\n--spectrum-border-width-200\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n);--spectrum-swatch-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-swatch-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-swatch-border-color-selected:var(--spectrum-gray-900);--spectrum-swatch-inner-border-color-selected:var(--spectrum-gray-50);--spectrum-swatch-disabled-icon-border-color:var(\n--spectrum-swatch-disabled-icon-border-color\n);--spectrum-swatch-disabled-icon-color:var(--spectrum-white);--spectrum-swatch-dash-icon-color:var(--spectrum-gray-800);--spectrum-swatch-slash-icon-color:var(--spectrum-red-900);--spectrum-swatch-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n)}:host([size=xs]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-extra-small\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-extra-small\n)}:host([size=s]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-small\n);--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-small\n)}:host([size=m]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-medium\n);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-100\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-medium\n)}:host([size=l]){--spectrum-swatch-size:var(\n--spectrum-swatch-size-large\n);--spectrum-swatch-disabled-icon-size:var(\n--spectrum-workflow-icon-size-200\n);--spectrum-swatch-slash-thickness:var(\n--spectrum-swatch-slash-thickness-large\n)}@media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-indicator-color:ButtonText;--highcontrast-swatch-background-color-selected:Background;--highcontrast-swatch-border-color-selected:Highlight;--highcontrast-swatch-border-color:ButtonText;--highcontrast-swatch-fill-foreground-color:ButtonText}.fill{forced-color-adjust:none}:host([disabled]) .fill{forced-color-adjust:auto}}:host{align-items:center;display:flex;height:var(--mod-swatch-size,var(--spectrum-swatch-size));justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--mod-swatch-size,var(--spectrum-swatch-size)\n)}.disabledIcon{height:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n);width:var(\n--mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)\n)}:host,:host:before{border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n)}:host([selected]){background-color:var(\n--highcontrast-swatch-background-color-selected,var(\n--mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)\n)\n)}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2),calc(var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) calc(100% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2))}:host([selected]) .fill:before{border-radius:0;box-shadow:none}:host([selected]):before{opacity:1}:host(.is-image) .fill:before{background-color:transparent}:host([mixed-value]) .fill{background:var(\n--spectrum-picked-color,transparent\n)}:host([mixed-value]) .mixedValueIcon{color:var(\n--spectrum-swatch-dash-icon-color\n);visibility:visible}:host([nothing]) .fill{background-color:var(\n--spectrum-picked-color,transparent\n);background-image:none}:host([nothing]) .fill:after{background:var(\n--highcontrast-swatch-fill-foreground-color,var(\n--mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)\n)\n);content:\"\";height:var(\n--mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)\n);position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host:before{border-color:var(\n--highcontrast-swatch-border-color-selected,var(\n--mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)\n)\n);border-style:solid;border-width:var(\n--mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)\n);content:\"\";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(\n--highcontrast-swatch-focus-indicator-color,var(\n--mod-swatch-focus-indicator-color,var(--spectrum-swatch-focus-indicator-color)\n)\n);border-radius:var(\n--mod-swatch-focus-indicator-border-radius,var(--spectrum-swatch-focus-indicator-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-indicator-thickness,var(--spectrum-swatch-focus-indicator-thickness)\n);content:\"\";inset:calc(var(\n--mod-swatch-focus-indicator-gap,\nvar(--spectrum-swatch-focus-indicator-gap)\n)*-2);opacity:0;position:absolute;transition:opacity var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}.fill{--spectrum-swatch-checkerboard-size:8px;--spectrum-swatch-checkerboard-background-offset:0px;--spectrum-swatch-checkerboard-dark-color:#d9d9d9;--spectrum-swatch-checkerboard-light-color:#fff;align-items:center;background-color:var(--spectrum-swatch-checkerboard-light-color);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-swatch-checkerboard-dark-color) 75.5%),linear-gradient(-45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-swatch-checkerboard-dark-color) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-checkerboard-background-offset) var(--spectrum-swatch-checkerboard-background-offset),var(--spectrum-swatch-checkerboard-background-offset) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n) + var(--spectrum-swatch-checkerboard-background-offset)) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*-1 + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);background-size:calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2) calc(var(\n--mod-swatch-checkerboard-size,\nvar(--spectrum-swatch-checkerboard-size)\n)*2);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(\n--mod-swatch-border-radius,var(--spectrum-swatch-border-radius)\n);box-shadow:inset 0 0 0 var(\n--mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)\n) var(\n--highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))\n);content:\"\";inset:0;position:absolute;z-index:0}:host([border=none]) .fill:before{background-color:var(--spectrum-picked-color,transparent);box-shadow:none}.mixedValueIcon{color:var(\n--spectrum-picked-color,transparent\n)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);color:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n);position:relative;z-index:2}.disabledIcon path:first-child{fill:var(\n--highcontrast-swatch-disabled-icon-color,var(\n--mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)\n)\n)}.disabledIcon path:last-child{fill:var(\n--mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)\n)}:host([shape=rectangle]){width:calc(var(--mod-swatch-size, var(--spectrum-swatch-size))*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}:host([rounding=full][selected]:not([shape=rectangle])) .fill{clip-path:circle(calc(50% - var(\n--mod-swatch-border-thickness-selected,\nvar(--spectrum-swatch-border-thickness-selected)\n)*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out,height var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;width:100%}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqJf,eAAe;",
6
6
  "names": []
7
7
  }