@spectrum-web-components/swatch 0.2.1 → 0.3.0

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 (20) hide show
  1. package/package.json +8 -8
  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 +142 -61
  7. package/src/spectrum-swatch.css.dev.js.map +2 -2
  8. package/src/spectrum-swatch.css.js +144 -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 +142 -61
  15. package/src/swatch.css.dev.js.map +2 -2
  16. package/src/swatch.css.js +144 -63
  17. package/src/swatch.css.js.map +2 -2
  18. package/test/swatch-group.test-vrt.js.map +2 -2
  19. package/test/swatch-sizes.test-vrt.js.map +2 -2
  20. package/test/swatch.test-vrt.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.1",
3
+ "version": "0.3.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -68,15 +68,15 @@
68
68
  "dependencies": {
69
69
  "@lit-labs/observers": "^1.0.1",
70
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.0",
71
+ "@spectrum-web-components/icon": "^0.12.2",
72
+ "@spectrum-web-components/icons-ui": "^0.9.2",
73
+ "@spectrum-web-components/reactive-controllers": "^0.3.2",
74
+ "@spectrum-web-components/shared": "^0.15.1",
75
75
  "tslib": "^2.0.0"
76
76
  },
77
77
  "devDependencies": {
78
- "@spectrum-css/swatch": "^1.1.4",
79
- "@spectrum-css/swatchgroup": "^1.1.4"
78
+ "@spectrum-css/swatch": "^2.0.0",
79
+ "@spectrum-css/swatchgroup": "^2.0.1"
80
80
  },
81
81
  "types": "./src/index.d.ts",
82
82
  "customElements": "custom-elements.json",
@@ -84,5 +84,5 @@
84
84
  "./sp-*.js",
85
85
  "./**/*.dev.js"
86
86
  ],
87
- "gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
87
+ "gitHead": "31d083d1eb61a1382335030c190c85d85f41e15d"
88
88
  }
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,148 @@
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-ring-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-ring-thickness:var(
9
+ --spectrum-focus-ring-thickness
10
+ );--spectrum-swatch-focus-ring-gap:var(--spectrum-focus-ring-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-ring-color:var(--spectrum-focus-ring-color)}:host([size=xs]){--spectrum-swatch-size:var(
13
+ --spectrum-swatch-size-extra-small
14
+ );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-swatch-slash-thickness:var(
15
+ --spectrum-swatch-slash-thickness-extra-small
16
+ )}:host([size=s]){--spectrum-swatch-size:var(
17
+ --spectrum-swatch-size-small
18
+ );--spectrum-swatch-disabled-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-swatch-slash-thickness:var(
19
+ --spectrum-swatch-slash-thickness-small
20
+ )}:host([size=m]){--spectrum-swatch-size:var(
21
+ --spectrum-swatch-size-medium
22
+ );--spectrum-swatch-disabled-icon-size:var(
23
+ --spectrum-workflow-icon-size-100
24
+ );--spectrum-swatch-slash-thickness:var(
25
+ --spectrum-swatch-slash-thickness-medium
26
+ )}:host([size=l]){--spectrum-swatch-size:var(
27
+ --spectrum-swatch-size-large
28
+ );--spectrum-swatch-disabled-icon-size:var(
29
+ --spectrum-workflow-icon-size-200
30
+ );--spectrum-swatch-slash-thickness:var(
31
+ --spectrum-swatch-slash-thickness-large
32
+ )}@media (forced-colors:active){:host{--highcontrast-swatch-disabled-icon-color:GrayText;--highcontrast-swatch-focus-ring-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(
33
+ --mod-swatch-size,var(--spectrum-swatch-size)
34
+ )}.disabledIcon{height:var(
35
+ --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
36
+ );width:var(
37
+ --mod-swatch-disabled-icon-size,var(--spectrum-swatch-disabled-icon-size)
38
+ )}:host,:host:before{border-radius:var(
39
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
40
+ )}:host([selected]){background-color:var(
41
+ --highcontrast-swatch-background-color-selected,var(
42
+ --mod-swatch-inner-border-color-selected,var(--spectrum-swatch-inner-border-color-selected)
43
+ )
44
+ )}:host([selected]) .fill{border-radius:0;clip-path:polygon(calc(var(
45
+ --mod-swatch-border-thickness-selected,
46
+ var(--spectrum-swatch-border-thickness-selected)
47
+ )*2) calc(var(
48
+ --mod-swatch-border-thickness-selected,
49
+ var(--spectrum-swatch-border-thickness-selected)
50
+ )*2),calc(100% - var(
51
+ --mod-swatch-border-thickness-selected,
52
+ var(--spectrum-swatch-border-thickness-selected)
53
+ )*2) calc(var(
54
+ --mod-swatch-border-thickness-selected,
55
+ var(--spectrum-swatch-border-thickness-selected)
56
+ )*2),calc(100% - var(
57
+ --mod-swatch-border-thickness-selected,
58
+ var(--spectrum-swatch-border-thickness-selected)
59
+ )*2) calc(100% - var(
60
+ --mod-swatch-border-thickness-selected,
61
+ var(--spectrum-swatch-border-thickness-selected)
62
+ )*2),calc(var(
63
+ --mod-swatch-border-thickness-selected,
64
+ var(--spectrum-swatch-border-thickness-selected)
65
+ )*2) calc(100% - var(
66
+ --mod-swatch-border-thickness-selected,
67
+ var(--spectrum-swatch-border-thickness-selected)
68
+ )*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(
69
+ --spectrum-picked-color,transparent
70
+ )}:host([mixed-value]) .mixedValueIcon{color:var(
71
+ --spectrum-swatch-dash-icon-color
72
+ );visibility:visible}:host([nothing]) .fill{background-color:var(
73
+ --spectrum-picked-color,transparent
74
+ );background-image:none}:host([nothing]) .fill:after{background:var(
75
+ --highcontrast-swatch-fill-foreground-color,var(
76
+ --mod-swatch-slash-icon-color,var(--spectrum-swatch-slash-icon-color)
77
+ )
78
+ );content:"";height:var(
79
+ --mod-swatch-slash-thickness,var(--spectrum-swatch-slash-thickness)
80
+ );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(
81
+ --highcontrast-swatch-border-color-selected,var(
82
+ --mod-swatch-border-color-selected,var(--spectrum-swatch-border-color-selected)
83
+ )
84
+ );border-style:solid;border-width:var(
85
+ --mod-swatch-border-thickness-selected,var(--spectrum-swatch-border-thickness-selected)
86
+ );content:"";inset:0;opacity:0;pointer-events:none;position:absolute}:host:after{border-color:var(
87
+ --highcontrast-swatch-focus-ring-color,var(
88
+ --mod-swatch-focus-ring-color,var(--spectrum-swatch-focus-ring-color)
89
+ )
90
+ );border-radius:var(
91
+ --mod-swatch-focus-ring-border-radius,var(--spectrum-swatch-focus-ring-border-radius)
92
+ );border-style:solid;border-width:var(
93
+ --mod-swatch-focus-ring-thickness,var(--spectrum-swatch-focus-ring-thickness)
94
+ );content:"";inset:calc(var(--mod-swatch-focus-ring-gap, var(--spectrum-swatch-focus-ring-gap))*-2);opacity:0;position:absolute;transition:opacity var(
95
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
96
+ ) 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(
97
+ --mod-swatch-checkerboard-size,
98
+ var(--spectrum-swatch-checkerboard-size)
99
+ ) + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(
100
+ --mod-swatch-checkerboard-size,
101
+ var(--spectrum-swatch-checkerboard-size)
102
+ ) + var(--spectrum-swatch-checkerboard-background-offset)) calc(var(
103
+ --mod-swatch-checkerboard-size,
104
+ var(--spectrum-swatch-checkerboard-size)
105
+ )*-1 + var(--spectrum-swatch-checkerboard-background-offset)),calc(var(
106
+ --mod-swatch-checkerboard-size,
107
+ var(--spectrum-swatch-checkerboard-size)
108
+ )*-1 + var(--spectrum-swatch-checkerboard-background-offset)) var(--spectrum-swatch-checkerboard-background-offset);background-size:calc(var(
109
+ --mod-swatch-checkerboard-size,
110
+ var(--spectrum-swatch-checkerboard-size)
111
+ )*2) calc(var(
112
+ --mod-swatch-checkerboard-size,
113
+ var(--spectrum-swatch-checkerboard-size)
114
+ )*2);border-radius:var(
115
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
116
+ );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(
117
+ --mod-swatch-border-radius,var(--spectrum-swatch-border-radius)
118
+ );box-shadow:inset 0 0 0 var(
119
+ --mod-swatch-border-thickness,var(--spectrum-swatch-border-thickness)
120
+ ) var(
121
+ --highcontrast-swatch-border-color,var(--mod-swatch-border-color,var(--spectrum-swatch-border-color))
122
+ );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(
123
+ --spectrum-picked-color,transparent
124
+ )}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(
125
+ --highcontrast-swatch-disabled-icon-color,var(
126
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
127
+ )
128
+ );color:var(
129
+ --highcontrast-swatch-disabled-icon-color,var(
130
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
131
+ )
132
+ );position:relative;z-index:2}.disabledIcon path:first-child{fill:var(
133
+ --highcontrast-swatch-disabled-icon-color,var(
134
+ --mod-swatch-disabled-icon-color,var(--spectrum-swatch-disabled-icon-color)
135
+ )
136
+ )}.disabledIcon path:last-child{fill:var(
137
+ --mod-swatch-icon-border-color,var(--spectrum-swatch-icon-border-color)
138
+ )}: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(
139
+ --mod-swatch-border-thickness-selected,
140
+ var(--spectrum-swatch-border-thickness-selected)
141
+ )*2) at 50% 50%)}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(
142
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
143
+ ) ease-in-out,height var(
144
+ --mod-animation-duration-100,var(--spectrum-animation-duration-100)
145
+ ) ease-in-out;width:100%}
65
146
  `;
66
147
  export default styles;
67
148
  //# 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-ring-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-ring-thickness:var(\n--spectrum-focus-ring-thickness\n);--spectrum-swatch-focus-ring-gap:var(--spectrum-focus-ring-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-ring-color:var(--spectrum-focus-ring-color)}: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-ring-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-ring-color,var(\n--mod-swatch-focus-ring-color,var(--spectrum-swatch-focus-ring-color)\n)\n);border-radius:var(\n--mod-swatch-focus-ring-border-radius,var(--spectrum-swatch-focus-ring-border-radius)\n);border-style:solid;border-width:var(\n--mod-swatch-focus-ring-thickness,var(--spectrum-swatch-focus-ring-thickness)\n);content:\"\";inset:calc(var(--mod-swatch-focus-ring-gap, var(--spectrum-swatch-focus-ring-gap))*-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;AAgJf,eAAe;",
6
6
  "names": []
7
7
  }