@spectrum-web-components/swatch 0.1.2 → 0.1.4-devmode.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 (56) hide show
  1. package/custom-elements.json +6 -6
  2. package/package.json +37 -16
  3. package/sp-swatch-group.dev.js +3 -0
  4. package/sp-swatch-group.dev.js.map +7 -0
  5. package/sp-swatch-group.js +3 -14
  6. package/sp-swatch-group.js.map +7 -1
  7. package/sp-swatch.dev.js +3 -0
  8. package/sp-swatch.dev.js.map +7 -0
  9. package/sp-swatch.js +3 -14
  10. package/sp-swatch.js.map +7 -1
  11. package/src/Swatch.dev.js +219 -0
  12. package/src/Swatch.dev.js.map +7 -0
  13. package/src/Swatch.js +165 -170
  14. package/src/Swatch.js.map +7 -1
  15. package/src/SwatchGroup.dev.js +220 -0
  16. package/src/SwatchGroup.dev.js.map +7 -0
  17. package/src/SwatchGroup.js +201 -216
  18. package/src/SwatchGroup.js.map +7 -1
  19. package/src/index.dev.js +3 -0
  20. package/src/index.dev.js.map +7 -0
  21. package/src/index.js +3 -14
  22. package/src/index.js.map +7 -1
  23. package/src/spectrum-swatch-group.css.dev.js +10 -0
  24. package/src/spectrum-swatch-group.css.dev.js.map +7 -0
  25. package/src/spectrum-swatch-group.css.js +3 -14
  26. package/src/spectrum-swatch-group.css.js.map +7 -1
  27. package/src/spectrum-swatch.css.dev.js +66 -0
  28. package/src/spectrum-swatch.css.dev.js.map +7 -0
  29. package/src/spectrum-swatch.css.js +4 -15
  30. package/src/spectrum-swatch.css.js.map +7 -1
  31. package/src/swatch-group.css.dev.js +10 -0
  32. package/src/swatch-group.css.dev.js.map +7 -0
  33. package/src/swatch-group.css.js +3 -14
  34. package/src/swatch-group.css.js.map +7 -1
  35. package/src/swatch.css.dev.js +66 -0
  36. package/src/swatch.css.dev.js.map +7 -0
  37. package/src/swatch.css.js +4 -15
  38. package/src/swatch.css.js.map +7 -1
  39. package/stories/swatch-group.stories.js +124 -133
  40. package/stories/swatch-group.stories.js.map +7 -1
  41. package/stories/swatch-sizes.stories.js +15 -21
  42. package/stories/swatch-sizes.stories.js.map +7 -1
  43. package/stories/swatch.stories.js +69 -73
  44. package/stories/swatch.stories.js.map +7 -1
  45. package/test/benchmark/basic-test.js +5 -16
  46. package/test/benchmark/basic-test.js.map +7 -1
  47. package/test/swatch-group.test-vrt.js +4 -15
  48. package/test/swatch-group.test-vrt.js.map +7 -1
  49. package/test/swatch-group.test.js +231 -240
  50. package/test/swatch-group.test.js.map +7 -1
  51. package/test/swatch-sizes.test-vrt.js +4 -15
  52. package/test/swatch-sizes.test-vrt.js.map +7 -1
  53. package/test/swatch.test-vrt.js +4 -15
  54. package/test/swatch.test-vrt.js.map +7 -1
  55. package/test/swatch.test.js +128 -135
  56. package/test/swatch.test.js.map +7 -1
package/src/spectrum-swatch.css.dev.js ADDED
@@ -0,0 +1,66 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :host{--spectrum-swatch-size-xs:var(
4
+ --spectrum-global-dimension-size-200
5
+ );--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(
6
+ --spectrum-global-dimension-size-150
7
+ );--spectrum-swatch-disabled-icon-size-s:var(
8
+ --spectrum-global-dimension-size-200
9
+ );--spectrum-swatch-disabled-icon-size-m:var(
10
+ --spectrum-global-dimension-size-225
11
+ );--spectrum-swatch-disabled-icon-size-l:var(
12
+ --spectrum-global-dimension-size-250
13
+ );--spectrum-swatch-disabled-icon-color:var(
14
+ --spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))
15
+ );--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(
16
+ --spectrum-global-dimension-size-100
17
+ );--spectrum-swatch-selection-indicator-border-width:var(
18
+ --spectrum-global-dimension-size-25
19
+ );--spectrum-swatch-selection-indicator-border-color:var(
20
+ --spectrum-global-color-gray-900
21
+ );--spectrum-swatch-background-color-selected:var(
22
+ --spectrum-global-color-gray-50
23
+ );--spectrum-swatch-border-radius:var(
24
+ --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
25
+ );--spectrum-swatch-fill-border-radius-selected:var(
26
+ --spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)
27
+ );--spectrum-swatch-fill-border-width:var(
28
+ --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
29
+ );--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(
30
+ --spectrum-global-dimension-static-size-100,8px
31
+ );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(
32
+ --spectrum-swatch-border-radius
33
+ )}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(
34
+ --spectrum-swatch-background-color-selected
35
+ )}: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(
36
+ --spectrum-swatch-fill-border-radius-selected
37
+ );box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(
38
+ --spectrum-swatch-background-color-selected
39
+ )}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(
40
+ --spectrum-swatch-background-color-selected
41
+ )}: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(
42
+ --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
43
+ );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(
44
+ --spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
45
+ );background-image:linear-gradient(-45deg,transparent 75.5%,var(
46
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
47
+ ) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
48
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
49
+ ) 75.5%),linear-gradient(-45deg,var(
50
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
51
+ ) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
52
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
53
+ ) 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(
54
+ --spectrum-global-color-gray-700
55
+ )}.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(
56
+ --spectrum-swatch-disabled-icon-size-xs
57
+ )}: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(
58
+ --spectrum-swatch-disabled-icon-size-s
59
+ )}: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(
60
+ --spectrum-swatch-disabled-icon-size-m
61
+ )}: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(
62
+ --spectrum-swatch-disabled-icon-size-l
63
+ )}: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}}
64
+ `;
65
+ export default styles;
66
+ //# sourceMappingURL=spectrum-swatch.css.dev.js.map
package/src/spectrum-swatch.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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;AACA,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;",
6
+ "names": []
7
+ }
package/src/spectrum-swatch.css.js CHANGED
@@ -1,16 +1,5 @@
1
- /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
14
3
  :host{--spectrum-swatch-size-xs:var(
15
4
  --spectrum-global-dimension-size-200
16
5
  );--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(
@@ -71,7 +60,7 @@ const styles = css `
71
60
  --spectrum-swatch-disabled-icon-size-m
72
61
  )}: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(
73
62
  --spectrum-swatch-disabled-icon-size-l
74
- )}: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%}
63
+ )}: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}}
75
64
  `;
76
65
  export default styles;
77
- //# sourceMappingURL=spectrum-swatch.css.js.map
66
+ //# sourceMappingURL=spectrum-swatch.css.js.map
package/src/spectrum-swatch.css.js.map CHANGED
@@ -1 +1,7 @@
1
- {"version":3,"file":"spectrum-swatch.css.js","sourceRoot":"","sources":["spectrum-swatch.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,CAAC;AACF,eAAe,MAAM,CAAC","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%}\n`;\nexport default styles;"]}
1
+ {
2
+ "version": 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;AACA,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;",
6
+ "names": []
7
+ }
package/src/swatch-group.css.dev.js ADDED
@@ -0,0 +1,10 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :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(
4
+ --spectrum-global-dimension-size-25
5
+ )}:host([density=spacious]){gap:var(
6
+ --spectrum-global-dimension-size-100
7
+ )}
8
+ `;
9
+ export default styles;
10
+ //# sourceMappingURL=swatch-group.css.dev.js.map
package/src/swatch-group.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["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;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOf,eAAe;",
6
+ "names": []
7
+ }
package/src/swatch-group.css.js CHANGED
@@ -1,16 +1,5 @@
1
- /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
14
3
  :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(
15
4
  --spectrum-global-dimension-size-25
16
5
  )}:host([density=spacious]){gap:var(
@@ -18,4 +7,4 @@ const styles = css `
18
7
  )}
19
8
  `;
20
9
  export default styles;
21
- //# sourceMappingURL=swatch-group.css.js.map
10
+ //# sourceMappingURL=swatch-group.css.js.map
package/src/swatch-group.css.js.map CHANGED
@@ -1 +1,7 @@
1
- {"version":3,"file":"swatch-group.css.js","sourceRoot":"","sources":["swatch-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;CAMjB,CAAC;AACF,eAAe,MAAM,CAAC","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;"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["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;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOf,eAAe;",
6
+ "names": []
7
+ }
package/src/swatch.css.dev.js ADDED
@@ -0,0 +1,66 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :host{--spectrum-swatch-size-xs:var(
4
+ --spectrum-global-dimension-size-200
5
+ );--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(
6
+ --spectrum-global-dimension-size-150
7
+ );--spectrum-swatch-disabled-icon-size-s:var(
8
+ --spectrum-global-dimension-size-200
9
+ );--spectrum-swatch-disabled-icon-size-m:var(
10
+ --spectrum-global-dimension-size-225
11
+ );--spectrum-swatch-disabled-icon-size-l:var(
12
+ --spectrum-global-dimension-size-250
13
+ );--spectrum-swatch-disabled-icon-color:var(
14
+ --spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))
15
+ );--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(
16
+ --spectrum-global-dimension-size-100
17
+ );--spectrum-swatch-selection-indicator-border-width:var(
18
+ --spectrum-global-dimension-size-25
19
+ );--spectrum-swatch-selection-indicator-border-color:var(
20
+ --spectrum-global-color-gray-900
21
+ );--spectrum-swatch-background-color-selected:var(
22
+ --spectrum-global-color-gray-50
23
+ );--spectrum-swatch-border-radius:var(
24
+ --spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)
25
+ );--spectrum-swatch-fill-border-radius-selected:var(
26
+ --spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)
27
+ );--spectrum-swatch-fill-border-width:var(
28
+ --spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)
29
+ );--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(
30
+ --spectrum-global-dimension-static-size-100,8px
31
+ );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(
32
+ --spectrum-swatch-border-radius
33
+ )}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(
34
+ --spectrum-swatch-background-color-selected
35
+ )}: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(
36
+ --spectrum-swatch-fill-border-radius-selected
37
+ );box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(
38
+ --spectrum-swatch-background-color-selected
39
+ )}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(
40
+ --spectrum-swatch-background-color-selected
41
+ )}: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(
42
+ --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
43
+ );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(
44
+ --spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
45
+ );background-image:linear-gradient(-45deg,transparent 75.5%,var(
46
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
47
+ ) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
48
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
49
+ ) 75.5%),linear-gradient(-45deg,var(
50
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
51
+ ) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
52
+ --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
53
+ ) 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(
54
+ --spectrum-global-color-gray-700
55
+ )}.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(
56
+ --spectrum-swatch-disabled-icon-size-xs
57
+ )}: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(
58
+ --spectrum-swatch-disabled-icon-size-s
59
+ )}: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(
60
+ --spectrum-swatch-disabled-icon-size-m
61
+ )}: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(
62
+ --spectrum-swatch-disabled-icon-size-l
63
+ )}: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}}
64
+ `;
65
+ export default styles;
66
+ //# sourceMappingURL=swatch.css.dev.js.map
package/src/swatch.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["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;AACA,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;",
6
+ "names": []
7
+ }
package/src/swatch.css.js CHANGED
@@ -1,16 +1,5 @@
1
- /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
14
3
  :host{--spectrum-swatch-size-xs:var(
15
4
  --spectrum-global-dimension-size-200
16
5
  );--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(
@@ -71,7 +60,7 @@ const styles = css `
71
60
  --spectrum-swatch-disabled-icon-size-m
72
61
  )}: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(
73
62
  --spectrum-swatch-disabled-icon-size-l
74
- )}: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%}
63
+ )}: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}}
75
64
  `;
76
65
  export default styles;
77
- //# sourceMappingURL=swatch.css.js.map
66
+ //# sourceMappingURL=swatch.css.js.map
package/src/swatch.css.js.map CHANGED
@@ -1 +1,7 @@
1
- {"version":3,"file":"swatch.css.js","sourceRoot":"","sources":["swatch.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,CAAC;AACF,eAAe,MAAM,CAAC","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%}\n`;\nexport default styles;"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["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;AACA,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;",
6
+ "names": []
7
+ }