@spectrum-web-components/swatch 0.1.3-devmode.0 → 0.1.3

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 (14) hide show
  1. package/custom-elements.json +6 -6
  2. package/package.json +9 -9
  3. package/src/spectrum-swatch.css.dev.js +1 -1
  4. package/src/spectrum-swatch.css.dev.js.map +1 -1
  5. package/src/spectrum-swatch.css.js +1 -1
  6. package/src/spectrum-swatch.css.js.map +1 -1
  7. package/src/swatch.css.dev.js +1 -1
  8. package/src/swatch.css.dev.js.map +1 -1
  9. package/src/swatch.css.js +1 -1
  10. package/src/swatch.css.js.map +1 -1
  11. package/test/swatch-group.test.js +2 -0
  12. package/test/swatch-group.test.js.map +2 -2
  13. package/test/swatch.test.js +4 -0
  14. package/test/swatch.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-swatch-group.ts",
7
+ "path": "sp-swatch-group.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "sp-swatch.ts",
22
+ "path": "sp-swatch.js",
23
23
  "declarations": [],
24
24
  "exports": [
25
25
  {
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "kind": "javascript-module",
37
- "path": "src/Swatch.ts",
37
+ "path": "src/Swatch.js",
38
38
  "declarations": [
39
39
  {
40
40
  "kind": "class",
@@ -359,14 +359,14 @@
359
359
  "name": "Swatch",
360
360
  "declaration": {
361
361
  "name": "Swatch",
362
- "module": "src/Swatch.ts"
362
+ "module": "src/Swatch.js"
363
363
  }
364
364
  }
365
365
  ]
366
366
  },
367
367
  {
368
368
  "kind": "javascript-module",
369
- "path": "src/SwatchGroup.ts",
369
+ "path": "src/SwatchGroup.js",
370
370
  "declarations": [
371
371
  {
372
372
  "kind": "class",
@@ -591,7 +591,7 @@
591
591
  "name": "SwatchGroup",
592
592
  "declaration": {
593
593
  "name": "SwatchGroup",
594
- "module": "src/SwatchGroup.ts"
594
+ "module": "src/SwatchGroup.js"
595
595
  }
596
596
  }
597
597
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "0.1.3-devmode.0+8303f3a2a",
3
+ "version": "0.1.3",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -67,21 +67,21 @@
67
67
  ],
68
68
  "dependencies": {
69
69
  "@lit-labs/observers": "^1.0.1",
70
- "@spectrum-web-components/base": "^0.5.9-devmode.31+8303f3a2a",
71
- "@spectrum-web-components/icon": "^0.11.12-devmode.7+8303f3a2a",
72
- "@spectrum-web-components/icons-ui": "^0.8.12-devmode.7+8303f3a2a",
73
- "@spectrum-web-components/reactive-controllers": "^0.2.5-devmode.86+8303f3a2a",
74
- "@spectrum-web-components/shared": "^0.14.5-devmode.7+8303f3a2a",
70
+ "@spectrum-web-components/base": "^0.6.0",
71
+ "@spectrum-web-components/icon": "^0.11.12",
72
+ "@spectrum-web-components/icons-ui": "^0.8.12",
73
+ "@spectrum-web-components/reactive-controllers": "^0.2.5",
74
+ "@spectrum-web-components/shared": "^0.14.5",
75
75
  "tslib": "^2.0.0"
76
76
  },
77
77
  "devDependencies": {
78
- "@spectrum-css/swatch": "^1.1.3",
79
- "@spectrum-css/swatchgroup": "^1.1.3"
78
+ "@spectrum-css/swatch": "^1.1.4",
79
+ "@spectrum-css/swatchgroup": "^1.1.4"
80
80
  },
81
81
  "types": "./src/index.d.ts",
82
82
  "customElements": "custom-elements.json",
83
83
  "sideEffects": [
84
84
  "./sp-*.js"
85
85
  ],
86
- "gitHead": "8303f3a2a90b0aedc15158797662ccfa8f4a2031"
86
+ "gitHead": "50cac779bbb0d6735c2061f1eceb86b9daf9b22b"
87
87
  }
package/src/spectrum-swatch.css.dev.js CHANGED
@@ -60,7 +60,7 @@ const styles = css`
60
60
  --spectrum-swatch-disabled-icon-size-m
61
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
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%}
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
64
  `;
65
65
  export default styles;
66
66
  //# sourceMappingURL=spectrum-swatch.css.dev.js.map
package/src/spectrum-swatch.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatch-size-xs:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-size-s:var(--spectrum-global-dimension-size-300);--spectrum-swatch-size-m:var(--spectrum-global-dimension-size-400);--spectrum-swatch-size-l:var(--spectrum-global-dimension-size-500);--spectrum-swatch-disabled-icon-size-xs:var(\n--spectrum-global-dimension-size-150\n);--spectrum-swatch-disabled-icon-size-s:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-disabled-icon-size-m:var(\n--spectrum-global-dimension-size-225\n);--spectrum-swatch-disabled-icon-size-l:var(\n--spectrum-global-dimension-size-250\n);--spectrum-swatch-disabled-icon-color:var(\n--spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))\n);--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(\n--spectrum-global-dimension-size-100\n);--spectrum-swatch-selection-indicator-border-width:var(\n--spectrum-global-dimension-size-25\n);--spectrum-swatch-selection-indicator-border-color:var(\n--spectrum-global-color-gray-900\n);--spectrum-swatch-background-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-swatch-border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);--spectrum-swatch-fill-border-radius-selected:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-swatch-fill-border-width:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-swatch-fill-border-color:rgba(var(--spectrum-global-color-gray-900-rgb),0.51);--spectrum-swatch-fill-border-color-light:rgba(var(--spectrum-global-color-gray-900-rgb),0.2);--spectrum-swatch-background-offset:0px;--spectrum-swatch-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);align-items:center;display:flex;justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}:host,:host:before{border-radius:var(\n--spectrum-swatch-border-radius\n)}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(\n--spectrum-swatch-background-color-selected\n)}:host([selected]) .fill{border-radius:var(--spectrum-swatch-fill-border-radius-selected);height:calc(100% - var(--spectrum-swatch-selection-padding));width:calc(100% - var(--spectrum-swatch-selection-padding))}:host([selected]) .fill:before{border-radius:var(\n--spectrum-swatch-fill-border-radius-selected\n);box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([nothing]) .fill:after{background:var(--spectrum-global-color-red-500);content:\"\";position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([nothing][size=xs]) .fill:after{height:2px}:host([nothing][size=s]) .fill:after{height:3px}:host([nothing][size=m]) .fill:after{height:4px}:host([nothing][size=l]) .fill:after{height:5px}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}:host:before{border:var(--spectrum-swatch-selection-indicator-border-width) solid var(--spectrum-swatch-selection-indicator-border-color);bottom:0;content:\"\";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}:host:after{border:var(--spectrum-global-dimension-static-size-25,2px) solid var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);border-radius:var(--spectrum-alias-focus-ring-border-radius-regular);bottom:calc(var(--spectrum-global-dimension-size-50)*-1);content:\"\";left:calc(var(--spectrum-global-dimension-size-50)*-1);opacity:0;position:absolute;right:calc(var(--spectrum-global-dimension-size-50)*-1);top:calc(var(--spectrum-global-dimension-size-50)*-1);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.fill{align-items:center;background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-background-offset) var(--spectrum-swatch-background-offset),var(--spectrum-swatch-background-offset) calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)) calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)) var(--spectrum-swatch-background-offset);background-size:calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(--spectrum-swatch-border-radius);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(--spectrum-swatch-border-radius);bottom:0;box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color);content:\"\";left:0;position:absolute;right:0;top:0;z-index:0}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color-light)}:host([border=none]) .fill:before{box-shadow:none}.mixedValueIcon{color:var(\n--spectrum-global-color-gray-700\n)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(--spectrum-swatch-disabled-icon-stroke-color);color:var(--spectrum-swatch-disabled-icon-color);position:relative;z-index:2}:host([size=xs]){height:var(--spectrum-swatch-size-xs);width:var(--spectrum-swatch-size-xs)}:host([size=xs]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-xs);width:var(\n--spectrum-swatch-disabled-icon-size-xs\n)}:host([size=s]){height:var(--spectrum-swatch-size-s);width:var(--spectrum-swatch-size-s)}:host([size=s]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-s);width:var(\n--spectrum-swatch-disabled-icon-size-s\n)}:host([size=m]){height:var(--spectrum-swatch-size-m);width:var(--spectrum-swatch-size-m)}:host([size=m]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-m);width:var(\n--spectrum-swatch-disabled-icon-size-m\n)}:host([size=l]){height:var(--spectrum-swatch-size-l);width:var(--spectrum-swatch-size-l)}:host([size=l]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-l);width:var(\n--spectrum-swatch-disabled-icon-size-l\n)}:host([shape=rectangle][size=xs]){width:calc(var(--spectrum-swatch-size-xs)*2)}:host([shape=rectangle][size=s]){width:calc(var(--spectrum-swatch-size-s)*2)}:host([shape=rectangle][size=m]){width:calc(var(--spectrum-swatch-size-m)*2)}:host([shape=rectangle][size=l]){width:calc(var(--spectrum-swatch-size-l)*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(--spectrum-global-animation-duration-100,.13s) ease-in-out,height var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:100%}\n`;\nexport default styles;"],
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
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
6
  "names": []
7
7
  }
package/src/spectrum-swatch.css.js CHANGED
@@ -60,7 +60,7 @@ const styles = css`
60
60
  --spectrum-swatch-disabled-icon-size-m
61
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
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%}
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
64
  `;
65
65
  export default styles;
66
66
  //# sourceMappingURL=spectrum-swatch.css.js.map
package/src/spectrum-swatch.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-swatch.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-swatch-size-xs:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-size-s:var(--spectrum-global-dimension-size-300);--spectrum-swatch-size-m:var(--spectrum-global-dimension-size-400);--spectrum-swatch-size-l:var(--spectrum-global-dimension-size-500);--spectrum-swatch-disabled-icon-size-xs:var(\n--spectrum-global-dimension-size-150\n);--spectrum-swatch-disabled-icon-size-s:var(\n--spectrum-global-dimension-size-200\n);--spectrum-swatch-disabled-icon-size-m:var(\n--spectrum-global-dimension-size-225\n);--spectrum-swatch-disabled-icon-size-l:var(\n--spectrum-global-dimension-size-250\n);--spectrum-swatch-disabled-icon-color:var(\n--spectrum-global-color-static-gray-50,rgb(var(--spectrum-global-color-static-gray-50-rgb))\n);--spectrum-swatch-disabled-icon-stroke-color:rgba(var(--spectrum-global-color-static-black-rgb,0,0,0),0.51);--spectrum-swatch-selection-padding:var(\n--spectrum-global-dimension-size-100\n);--spectrum-swatch-selection-indicator-border-width:var(\n--spectrum-global-dimension-size-25\n);--spectrum-swatch-selection-indicator-border-color:var(\n--spectrum-global-color-gray-900\n);--spectrum-swatch-background-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-swatch-border-radius:var(\n--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50)\n);--spectrum-swatch-fill-border-radius-selected:var(\n--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25)\n);--spectrum-swatch-fill-border-width:var(\n--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-swatch-fill-border-color:rgba(var(--spectrum-global-color-gray-900-rgb),0.51);--spectrum-swatch-fill-border-color-light:rgba(var(--spectrum-global-color-gray-900-rgb),0.2);--spectrum-swatch-background-offset:0px;--spectrum-swatch-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);align-items:center;display:flex;justify-content:center;outline:none;position:relative;-webkit-user-select:none;user-select:none}:host,:host:before{border-radius:var(\n--spectrum-swatch-border-radius\n)}:host([selected]){--spectrum-swatch-background-offset:-4px;background-color:var(\n--spectrum-swatch-background-color-selected\n)}:host([selected]) .fill{border-radius:var(--spectrum-swatch-fill-border-radius-selected);height:calc(100% - var(--spectrum-swatch-selection-padding));width:calc(100% - var(--spectrum-swatch-selection-padding))}:host([selected]) .fill:before{border-radius:var(\n--spectrum-swatch-fill-border-radius-selected\n);box-shadow:none}:host([selected]):before{opacity:1}:host([mixed-value]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([mixed-value]) .mixedValueIcon{visibility:visible}:host([nothing]) .fill{background:var(\n--spectrum-swatch-background-color-selected\n)}:host([nothing]) .fill:after{background:var(--spectrum-global-color-red-500);content:\"\";position:absolute;transform:rotate(-45deg);width:200%}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([nothing][size=xs]) .fill:after{height:2px}:host([nothing][size=s]) .fill:after{height:3px}:host([nothing][size=m]) .fill:after{height:4px}:host([nothing][size=l]) .fill:after{height:5px}:host([disabled]) .disabledIcon,:host([disabled]) .disabledIcon{visibility:visible}:host(.focus-visible):after{opacity:1}:host(:focus-visible):after{opacity:1}:host:before{border:var(--spectrum-swatch-selection-indicator-border-width) solid var(--spectrum-swatch-selection-indicator-border-color);bottom:0;content:\"\";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}:host:after{border:var(--spectrum-global-dimension-static-size-25,2px) solid var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);border-radius:var(--spectrum-alias-focus-ring-border-radius-regular);bottom:calc(var(--spectrum-global-dimension-size-50)*-1);content:\"\";left:calc(var(--spectrum-global-dimension-size-50)*-1);opacity:0;position:absolute;right:calc(var(--spectrum-global-dimension-size-50)*-1);top:calc(var(--spectrum-global-dimension-size-50)*-1);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out}.fill{align-items:center;background-color:var(\n--spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)\n);background-image:linear-gradient(-45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(45deg,transparent 75.5%,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 75.5%),linear-gradient(-45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%),linear-gradient(45deg,var(\n--spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)\n) 25.5%,transparent 25.5%);background-position:var(--spectrum-swatch-background-offset) var(--spectrum-swatch-background-offset),var(--spectrum-swatch-background-offset) calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size) + var(--spectrum-swatch-background-offset)) calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)),calc(var(--spectrum-swatch-checkerboard-size)*-1 + var(--spectrum-swatch-background-offset)) var(--spectrum-swatch-background-offset);background-size:calc(var(--spectrum-swatch-checkerboard-size)*2) calc(var(--spectrum-swatch-checkerboard-size)*2);border-radius:var(--spectrum-swatch-border-radius);box-sizing:border-box;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%}.fill:before{background-color:var(--spectrum-picked-color,transparent);border-radius:var(--spectrum-swatch-border-radius);bottom:0;box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color);content:\"\";left:0;position:absolute;right:0;top:0;z-index:0}:host([border=light]) .fill:before{box-shadow:inset 0 0 0 var(--spectrum-swatch-fill-border-width) var(--spectrum-swatch-fill-border-color-light)}:host([border=none]) .fill:before{box-shadow:none}.mixedValueIcon{color:var(\n--spectrum-global-color-gray-700\n)}.disabledIcon,.mixedValueIcon{pointer-events:none;visibility:hidden}.disabledIcon{stroke:var(--spectrum-swatch-disabled-icon-stroke-color);color:var(--spectrum-swatch-disabled-icon-color);position:relative;z-index:2}:host([size=xs]){height:var(--spectrum-swatch-size-xs);width:var(--spectrum-swatch-size-xs)}:host([size=xs]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-xs);width:var(\n--spectrum-swatch-disabled-icon-size-xs\n)}:host([size=s]){height:var(--spectrum-swatch-size-s);width:var(--spectrum-swatch-size-s)}:host([size=s]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-s);width:var(\n--spectrum-swatch-disabled-icon-size-s\n)}:host([size=m]){height:var(--spectrum-swatch-size-m);width:var(--spectrum-swatch-size-m)}:host([size=m]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-m);width:var(\n--spectrum-swatch-disabled-icon-size-m\n)}:host([size=l]){height:var(--spectrum-swatch-size-l);width:var(--spectrum-swatch-size-l)}:host([size=l]) .disabledIcon{height:var(--spectrum-swatch-disabled-icon-size-l);width:var(\n--spectrum-swatch-disabled-icon-size-l\n)}:host([shape=rectangle][size=xs]){width:calc(var(--spectrum-swatch-size-xs)*2)}:host([shape=rectangle][size=s]){width:calc(var(--spectrum-swatch-size-s)*2)}:host([shape=rectangle][size=m]){width:calc(var(--spectrum-swatch-size-m)*2)}:host([shape=rectangle][size=l]){width:calc(var(--spectrum-swatch-size-l)*2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before{border-radius:0}:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before,:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before{border-radius:100%}::slotted([slot=image]){height:100%;object-fit:contain;transition:width var(--spectrum-global-animation-duration-100,.13s) ease-in-out,height var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:100%}\n`;\nexport default styles;"],
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
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
6
  "names": []
7
7
  }
package/src/swatch.css.dev.js CHANGED
@@ -60,7 +60,7 @@ const styles = css`
60
60
  --spectrum-swatch-disabled-icon-size-m
61
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
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%}
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
64
  `;
65
65
  export default styles;
66
66
  //# sourceMappingURL=swatch.css.dev.js.map
package/src/swatch.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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%}\n`;\nexport default styles;"],
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
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
6
  "names": []
7
7
  }
package/src/swatch.css.js CHANGED
@@ -60,7 +60,7 @@ const styles = css`
60
60
  --spectrum-swatch-disabled-icon-size-m
61
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
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%}
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
64
  `;
65
65
  export default styles;
66
66
  //# sourceMappingURL=swatch.css.js.map
package/src/swatch.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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%}\n`;\nexport default styles;"],
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
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
6
  "names": []
7
7
  }
package/test/swatch-group.test.js CHANGED
@@ -4,12 +4,14 @@ import "../sp-swatch.js";
4
4
  import { Default } from "../stories/swatch-group.stories.js";
5
5
  import { spy } from "sinon";
6
6
  import { html } from "@spectrum-web-components/base";
7
+ import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
7
8
  describe("Swatch Group", () => {
8
9
  let el;
9
10
  beforeEach(async () => {
10
11
  el = await fixture(Default(Default.args));
11
12
  await elementUpdated(el);
12
13
  });
14
+ testForLitDevWarnings(async () => await fixture(Default(Default.args)));
13
15
  it("loads default swatch accessibly", async () => {
14
16
  await expect(el).to.be.accessible();
15
17
  });
package/test/swatch-group.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch-group.test.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 { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch, SwatchGroup } from '../';\nimport { Default } from '../stories/swatch-group.stories.js';\nimport { spy } from 'sinon';\nimport { html } from '@spectrum-web-components/base';\n\ndescribe('Swatch Group', () => {\n let el: SwatchGroup;\n beforeEach(async () => {\n el = await fixture<SwatchGroup>(Default(Default.args));\n\n await elementUpdated(el);\n });\n it('loads default swatch accessibly', async () => {\n await expect(el).to.be.accessible();\n });\n it('forwards `border` to children', async () => {\n el.border = 'light';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal('light');\n });\n });\n it('forwards `rounding` to children', async () => {\n el.rounding = 'full';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.rounding).to.equal('full');\n });\n });\n it('forwards `size` to children', async () => {\n el.size = 'xs';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.size).to.equal('xs');\n });\n });\n it('forwards `shape` to children', async () => {\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.shape).to.equal('rectangle');\n });\n });\n it('unsets forwarding', async () => {\n el.border = 'light';\n el.rounding = 'full';\n el.size = 'xs';\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.not.be.undefined;\n expect(child.rounding).to.not.be.undefined;\n expect(child.size).to.not.equal('m');\n expect(child.shape).to.not.be.undefined;\n });\n\n el.border = undefined;\n el.rounding = undefined;\n el.removeAttribute('size');\n el.shape = undefined;\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal(undefined);\n expect(child.rounding).to.equal(undefined);\n expect(child.size).to.equal('m');\n expect(child.shape).to.equal(undefined);\n });\n });\n it('does not dispatch `change` events without `selects` attribute', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild.click();\n\n expect(changeSpy.called).to.be.false;\n expect(el.selected).to.deep.equal([]);\n });\n it('dispatches `change` events as [selects=\"single\"]', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n });\n it('can have `change` events prevented', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n });\n it('dispatches `change` events as [selects=\"multiple\"]', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(changeSpy.callCount).to.equal(3);\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n });\n it('filters `selected` when a selected Swatch is removed from the DOM', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild0.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild2.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([selectedChild1.value]);\n\n selectedChild1.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([]);\n });\n it('maintains a single tab stop', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('makes the first selected child the single tab stop', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n });\n it('focus()es to the first Swatch', async () => {\n el.focus();\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('focus()es to the first selected Swatch', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n el.focus();\n expect(document.activeElement === selectedChild).to.be.true;\n });\n});\n\ndescribe('Swatch Group - DOM selected', () => {\n it('accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\" selected></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('merges `selected` and selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('lazily accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n const color1 = el.querySelector('[value=\"color-1\"]') as Swatch;\n\n expect(el.selected).to.deep.equal(['color-3']);\n\n color1.selected = true;\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-3', 'color-1']);\n });\n});\n"],
5
- "mappings": "AAWA;AACA;AAEA;AAEA;AACA;AACA;AAEA,SAAS,gBAAgB,MAAM;AAC3B,MAAI;AACJ,aAAW,YAAY;AACnB,SAAK,MAAM,QAAqB,QAAQ,QAAQ,IAAI,CAAC;AAErD,UAAM,eAAe,EAAE;AAAA,EAC3B,CAAC;AACD,KAAG,mCAAmC,YAAY;AAC9C,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,OAAG,SAAS;AACZ,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,MAAM,EAAE,GAAG,MAAM,OAAO;AAAA,IACzC,CAAC;AAAA,EACL,CAAC;AACD,KAAG,mCAAmC,YAAY;AAC9C,OAAG,WAAW;AACd,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,MAAM;AAAA,IAC1C,CAAC;AAAA,EACL,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,OAAG,OAAO;AACV,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI;AAAA,IACpC,CAAC;AAAA,EACL,CAAC;AACD,KAAG,gCAAgC,YAAY;AAC3C,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,KAAK,EAAE,GAAG,MAAM,WAAW;AAAA,IAC5C,CAAC;AAAA,EACL,CAAC;AACD,KAAG,qBAAqB,YAAY;AAChC,OAAG,SAAS;AACZ,OAAG,WAAW;AACd,OAAG,OAAO;AACV,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,MAAM,EAAE,GAAG,IAAI,GAAG;AAC/B,aAAO,MAAM,QAAQ,EAAE,GAAG,IAAI,GAAG;AACjC,aAAO,MAAM,IAAI,EAAE,GAAG,IAAI,MAAM,GAAG;AACnC,aAAO,MAAM,KAAK,EAAE,GAAG,IAAI,GAAG;AAAA,IAClC,CAAC;AAED,OAAG,SAAS;AACZ,OAAG,WAAW;AACd,OAAG,gBAAgB,MAAM;AACzB,OAAG,QAAQ;AACX,UAAM,eAAe,EAAE;AAEvB,IAAC,CAAC,GAAG,GAAG,QAAQ,EAAe,QAAQ,CAAC,UAAU;AAC9C,aAAO,MAAM,MAAM,EAAE,GAAG,MAAM,MAAS;AACvC,aAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,MAAS;AACzC,aAAO,MAAM,IAAI,EAAE,GAAG,MAAM,GAAG;AAC/B,aAAO,MAAM,KAAK,EAAE,GAAG,MAAM,MAAS;AAAA,IAC1C,CAAC;AAAA,EACL,CAAC;AACD,KAAG,iEAAiE,YAAY;AAC5E,UAAM,gBAAgB,GAAG,cACrB,iCACJ;AAEA,UAAM,YAAY,IAAI;AAEtB,OAAG,iBAAiB,UAAU,MAAM,UAAU,CAAC;AAE/C,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AAEpC,kBAAc,MAAM;AAEpB,WAAO,UAAU,MAAM,EAAE,GAAG,GAAG;AAC/B,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AAAA,EACxC,CAAC;AACD,KAAG,oDAAoD,YAAY;AAC/D,OAAG,UAAU;AACb,UAAM,gBAAgB,GAAG,cACrB,iCACJ;AAEA,UAAM,YAAY,IAAI;AAEtB,OAAG,iBAAiB,UAAU,MAAM,UAAU,CAAC;AAE/C,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AACpC,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAErC,kBAAc,MAAM;AAEpB,WAAO,UAAU,UAAU,EAAE,GAAG,GAAG;AACnC,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,cAAc,KAAK,CAAC;AACvD,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAAA,EACzC,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,OAAG,UAAU;AACb,UAAM,gBAAgB,GAAG,cACrB,iCACJ;AAEA,OAAG,iBAAiB,UAAU,CAAC,UAAiB,MAAM,eAAe,CAAC;AAEtE,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AACpC,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAErC,kBAAc,MAAM;AAEpB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AACpC,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAAA,EACzC,CAAC;AACD,KAAG,sDAAsD,YAAY;AACjE,OAAG,UAAU;AACb,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AACA,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AACA,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AAEA,UAAM,eAAe,cAAc;AAEnC,UAAM,YAAY,IAAI;AAEtB,OAAG,iBAAiB,UAAU,MAAM,UAAU,CAAC;AAE/C,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AAEpC,mBAAe,MAAM;AACrB,mBAAe,MAAM;AACrB,mBAAe,MAAM;AAErB,WAAO,UAAU,SAAS,EAAE,GAAG,MAAM,CAAC;AACtC,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM;AAAA,MAC9B,eAAe;AAAA,MACf,eAAe;AAAA,MACf,eAAe;AAAA,IACnB,CAAC;AAAA,EACL,CAAC;AACD,KAAG,qEAAqE,YAAY;AAChF,OAAG,UAAU;AACb,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AACA,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AACA,UAAM,iBAAiB,GAAG,cACtB,iCACJ;AAEA,UAAM,eAAe,cAAc;AAEnC,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AAEpC,mBAAe,MAAM;AACrB,mBAAe,MAAM;AACrB,mBAAe,MAAM;AAErB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM;AAAA,MAC9B,eAAe;AAAA,MACf,eAAe;AAAA,MACf,eAAe;AAAA,IACnB,CAAC;AAED,mBAAe,OAAO;AACtB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM;AAAA,MAC9B,eAAe;AAAA,MACf,eAAe;AAAA,IACnB,CAAC;AAED,mBAAe,OAAO;AACtB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,eAAe,KAAK,CAAC;AAExD,mBAAe,OAAO;AACtB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,CAAC;AAAA,EACxC,CAAC;AACD,KAAG,+BAA+B,YAAY;AAC1C,UAAM,cAAc,SAAS,cAAc,OAAO;AAClD,UAAM,aAAa,SAAS,cAAc,OAAO;AACjD,OAAG,sBAAsB,eAAe,WAAW;AACnD,OAAG,sBAAsB,YAAY,UAAU;AAC/C,gBAAY,MAAM;AAClB,WAAO,SAAS,kBAAkB,GAAG,SAAS,EAAE,EAAE,GAAG,GAAG;AACxD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,GAAG,SAAS,EAAE,EAAE,GAAG,GAAG;AACxD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,GAAG,SAAS,EAAE,EAAE,GAAG,GAAG;AACxD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,GAAG,SAAS,EAAE,EAAE,GAAG,GAAG;AAAA,EAC5D,CAAC;AACD,KAAG,sDAAsD,YAAY;AACjE,UAAM,gBAAgB,GAAG,cACrB,iCACJ;AACA,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAErC,UAAM,cAAc,SAAS,cAAc,OAAO;AAClD,UAAM,aAAa,SAAS,cAAc,OAAO;AACjD,OAAG,sBAAsB,eAAe,WAAW;AACnD,OAAG,sBAAsB,YAAY,UAAU;AAC/C,gBAAY,MAAM;AAClB,OAAG,UAAU;AACb,OAAG,WAAW,CAAC,cAAc,KAAK;AAClC,UAAM,eAAe,EAAE;AACvB,UAAM,UAAU;AAEhB,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AAErC,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AACvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AACvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AACvD,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAAA,EAC3D,CAAC;AACD,KAAG,iCAAiC,YAAY;AAC5C,OAAG,MAAM;AACT,WAAO,SAAS,kBAAkB,GAAG,SAAS,EAAE,EAAE,GAAG,GAAG;AAAA,EAC5D,CAAC;AACD,KAAG,0CAA0C,YAAY;AACrD,UAAM,gBAAgB,GAAG,cACrB,iCACJ;AACA,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AACrC,OAAG,UAAU;AACb,OAAG,WAAW,CAAC,cAAc,KAAK;AAClC,UAAM,eAAe,EAAE;AACvB,UAAM,UAAU;AAEhB,WAAO,cAAc,QAAQ,EAAE,GAAG,GAAG;AACrC,OAAG,MAAM;AACT,WAAO,SAAS,kBAAkB,aAAa,EAAE,GAAG,GAAG;AAAA,EAC3D,CAAC;AACL,CAAC;AAED,SAAS,+BAA+B,MAAM;AAC1C,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOrC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,WAAW,SAAS,CAAC;AAAA,EAC5D,CAAC;AACD,KAAG,4CAA4C,YAAY;AACvD,UAAM,KAAK,MAAM,QAAqB;AAAA,4DACc,CAAC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM7D;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,WAAW,SAAS,CAAC;AAAA,EAC5D,CAAC;AACD,KAAG,qCAAqC,YAAY;AAChD,UAAM,KAAK,MAAM,QAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOrC;AAED,UAAM,eAAe,EAAE;AACvB,UAAM,SAAS,GAAG,cAAc,mBAAmB;AAEnD,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,SAAS,CAAC;AAE7C,WAAO,WAAW;AAClB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,MAAM,CAAC,WAAW,SAAS,CAAC;AAAA,EAC5D,CAAC;AACL,CAAC;",
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 { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch, SwatchGroup } from '../';\nimport { Default } from '../stories/swatch-group.stories.js';\nimport { spy } from 'sinon';\nimport { html } from '@spectrum-web-components/base';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Swatch Group', () => {\n let el: SwatchGroup;\n beforeEach(async () => {\n el = await fixture<SwatchGroup>(Default(Default.args));\n\n await elementUpdated(el);\n });\n testForLitDevWarnings(\n async () => await fixture<SwatchGroup>(Default(Default.args))\n );\n it('loads default swatch accessibly', async () => {\n await expect(el).to.be.accessible();\n });\n it('forwards `border` to children', async () => {\n el.border = 'light';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal('light');\n });\n });\n it('forwards `rounding` to children', async () => {\n el.rounding = 'full';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.rounding).to.equal('full');\n });\n });\n it('forwards `size` to children', async () => {\n el.size = 'xs';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.size).to.equal('xs');\n });\n });\n it('forwards `shape` to children', async () => {\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.shape).to.equal('rectangle');\n });\n });\n it('unsets forwarding', async () => {\n el.border = 'light';\n el.rounding = 'full';\n el.size = 'xs';\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.not.be.undefined;\n expect(child.rounding).to.not.be.undefined;\n expect(child.size).to.not.equal('m');\n expect(child.shape).to.not.be.undefined;\n });\n\n el.border = undefined;\n el.rounding = undefined;\n el.removeAttribute('size');\n el.shape = undefined;\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal(undefined);\n expect(child.rounding).to.equal(undefined);\n expect(child.size).to.equal('m');\n expect(child.shape).to.equal(undefined);\n });\n });\n it('does not dispatch `change` events without `selects` attribute', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild.click();\n\n expect(changeSpy.called).to.be.false;\n expect(el.selected).to.deep.equal([]);\n });\n it('dispatches `change` events as [selects=\"single\"]', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n });\n it('can have `change` events prevented', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n });\n it('dispatches `change` events as [selects=\"multiple\"]', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(changeSpy.callCount).to.equal(3);\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n });\n it('filters `selected` when a selected Swatch is removed from the DOM', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild0.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild2.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([selectedChild1.value]);\n\n selectedChild1.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([]);\n });\n it('maintains a single tab stop', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('makes the first selected child the single tab stop', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n });\n it('focus()es to the first Swatch', async () => {\n el.focus();\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('focus()es to the first selected Swatch', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n el.focus();\n expect(document.activeElement === selectedChild).to.be.true;\n });\n});\n\ndescribe('Swatch Group - DOM selected', () => {\n it('accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\" selected></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('merges `selected` and selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('lazily accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n const color1 = el.querySelector('[value=\"color-1\"]') as Swatch;\n\n expect(el.selected).to.deep.equal(['color-3']);\n\n color1.selected = true;\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-3', 'color-1']);\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/test/swatch.test.js CHANGED
@@ -2,6 +2,7 @@ import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
2
2
  import { spy } from "sinon";
3
3
  import { sendKeys } from "@web/test-runner-commands";
4
4
  import "../sp-swatch.js";
5
+ import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
5
6
  describe("Swatch", () => {
6
7
  let el;
7
8
  beforeEach(async () => {
@@ -10,6 +11,9 @@ describe("Swatch", () => {
10
11
  `);
11
12
  await elementUpdated(el);
12
13
  });
14
+ testForLitDevWarnings(async () => await fixture(html`
15
+ <sp-swatch color="red" label="Red"></sp-swatch>
16
+ `));
13
17
  it(`loads default swatch accessibly`, async () => {
14
18
  await expect(el).to.be.accessible();
15
19
  });
package/test/swatch.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch.test.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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch } from '../src/Swatch.js';\nimport { ElementSize } from '@spectrum-web-components/base';\n\ndescribe('Swatch', () => {\n let el: Swatch;\n beforeEach(async () => {\n el = await fixture<Swatch>(\n html`\n <sp-swatch color=\"red\" label=\"Red\"></sp-swatch>\n `\n );\n\n await elementUpdated(el);\n });\n it(`loads default swatch accessibly`, async () => {\n await expect(el).to.be.accessible();\n });\n it('loads [nothing] swatch accessibly', async () => {\n el.nothing = true;\n el.removeAttribute('color');\n el.label = 'Transparent';\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Transparent');\n });\n (['xs', 's', 'm', 'l'] as ElementSize[]).map((size) => {\n it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {\n el.mixedValue = true;\n el.removeAttribute('color');\n el.label = 'Mixed Value';\n el.size = size;\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Mixed Value');\n });\n });\n it('toggles on `click`', async () => {\n expect(el.selected).to.be.false;\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `click` as [role=\"checkbox\"]', async () => {\n el.role = 'checkbox';\n await elementUpdated(el);\n\n expect(el.selected).to.be.false;\n await expect(el).to.be.accessible();\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `Space`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Space',\n });\n\n expect(el.selected).to.be.true;\n });\n it('toggles on `Enter`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Enter',\n });\n\n expect(el.selected).to.be.true;\n\n await sendKeys({\n press: 'NumpadEnter',\n });\n\n expect(el.selected).to.be.false;\n });\n it('dispatches `change`', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n });\n it('does not dispatch `change` when [disabled]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.disabled = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('does not dispatch `change` when [mixed-value]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.mixedValue = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('can have `change` prevented', async () => {\n el.addEventListener('change', (event: Event) => {\n event.preventDefault();\n });\n\n expect(el.selected).to.false;\n\n el.click();\n\n expect(el.selected).to.false;\n });\n it('is in the tab order', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.true;\n });\n it('is not in the tab order when [disabled]', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.disabled = true;\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.false;\n });\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch } from '../src/Swatch.js';\nimport { ElementSize } from '@spectrum-web-components/base';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Swatch', () => {\n let el: Swatch;\n beforeEach(async () => {\n el = await fixture<Swatch>(\n html`\n <sp-swatch color=\"red\" label=\"Red\"></sp-swatch>\n `\n );\n\n await elementUpdated(el);\n });\n testForLitDevWarnings(\n async () =>\n await fixture<Swatch>(\n html`\n <sp-swatch color=\"red\" label=\"Red\"></sp-swatch>\n `\n )\n );\n it(`loads default swatch accessibly`, async () => {\n await expect(el).to.be.accessible();\n });\n it('loads [nothing] swatch accessibly', async () => {\n el.nothing = true;\n el.removeAttribute('color');\n el.label = 'Transparent';\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Transparent');\n });\n (['xs', 's', 'm', 'l'] as ElementSize[]).map((size) => {\n it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {\n el.mixedValue = true;\n el.removeAttribute('color');\n el.label = 'Mixed Value';\n el.size = size;\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Mixed Value');\n });\n });\n it('toggles on `click`', async () => {\n expect(el.selected).to.be.false;\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `click` as [role=\"checkbox\"]', async () => {\n el.role = 'checkbox';\n await elementUpdated(el);\n\n expect(el.selected).to.be.false;\n await expect(el).to.be.accessible();\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `Space`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Space',\n });\n\n expect(el.selected).to.be.true;\n });\n it('toggles on `Enter`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Enter',\n });\n\n expect(el.selected).to.be.true;\n\n await sendKeys({\n press: 'NumpadEnter',\n });\n\n expect(el.selected).to.be.false;\n });\n it('dispatches `change`', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n });\n it('does not dispatch `change` when [disabled]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.disabled = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('does not dispatch `change` when [mixed-value]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.mixedValue = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('can have `change` prevented', async () => {\n el.addEventListener('change', (event: Event) => {\n event.preventDefault();\n });\n\n expect(el.selected).to.false;\n\n el.click();\n\n expect(el.selected).to.false;\n });\n it('is in the tab order', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.true;\n });\n it('is not in the tab order when [disabled]', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.disabled = true;\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.false;\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }