@spectrum-web-components/color-handle 0.4.9 → 0.5.1-overlay.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/README.md +1 -1
  2. package/package.json +5 -5
  3. package/src/ColorHandle.dev.js +1 -1
  4. package/src/ColorHandle.dev.js.map +1 -1
  5. package/src/ColorHandle.js +2 -2
  6. package/src/ColorHandle.js.map +1 -1
  7. package/src/color-handle.css.dev.js +93 -91
  8. package/src/color-handle.css.dev.js.map +2 -2
  9. package/src/color-handle.css.js +95 -93
  10. package/src/color-handle.css.js.map +2 -2
  11. package/src/spectrum-color-handle.css.dev.js +93 -91
  12. package/src/spectrum-color-handle.css.dev.js.map +2 -2
  13. package/src/spectrum-color-handle.css.js +95 -93
  14. package/src/spectrum-color-handle.css.js.map +2 -2
  15. package/src/spectrum-config.js +1 -1
  16. package/custom-elements.json +0 -163
package/src/color-handle.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["color-handle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-global-animation-duration-100,0.13s\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(\n--spectrum-global-dimension-size-300\n)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(:focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host{background-position:var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n),var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)),calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))),calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-style:solid;border-width:var(\n--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25)\n);box-sizing:border-box;display:block;height:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);position:absolute;transition:width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);width:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{content:\"\";display:block;height:var(--spectrum-colorhandle-hitarea-size);left:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);position:absolute;top:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);width:var(--spectrum-colorhandle-hitarea-size)}:host([disabled]){pointer-events:none}.color{border-radius:100%;height:100%;width:100%}:host{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%);border-color:var(\n--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)\n);box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(\n--spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)\n) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(\n--spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n);border-color:var(\n--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)\n);box-shadow:none}:host([disabled]) .color{display:none}.\uD83E\uDD2B{--spectrum-picked-color:0}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(\n--spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)\n)}@media (forced-colors:active){:host{--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:Canvas;--spectrum-colorhandle-inner-border-color:CanvasText}:host([disabled]){forced-color-adjust:none}}:host{touch-action:none}:host(:focus){outline:none}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiGf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-size:var(--spectrum-color-handle-size-interim);--spectrum-colorhandle-focused-size:var(\n--spectrum-color-handle-size-key-focus-interim\n);--spectrum-colorhandle-hitarea-size:var(\n--spectrum-color-control-track-width\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-outer-border-width:var(\n--spectrum-color-handle-outer-border-width\n);--spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-inner-border-width:var(\n--spectrum-color-handle-inner-border-width\n);--spectrum-colorhandle-border-width:var(\n--spectrum-color-handle-border-width\n);--spectrum-colorhandle-border-color:var(--spectrum-white);--spectrum-colorhandle-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-colorhandle-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-colorhandle-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-colorhandle-border-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-colorhandle-fill-color-disabled:var(\n--spectrum-disabled-background-color\n)}:host{background:repeating-conic-gradient(var(\n--mod-colorhandle-checkerboard-light-color,var(--spectrum-colorhandle-checkerboard-light-color)\n) 0 25%,var(\n--mod-colorhandle-checkerboard-dark-color,var(--spectrum-colorhandle-checkerboard-dark-color)\n) 0 50%) 50% /calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2) calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2);block-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));border-color:var(\n--highcontrast-colorhandle-border-color,var(\n--mod-colorhandle-border-color,var(--spectrum-colorhandle-border-color)\n)\n);border-style:solid;border-width:var(\n--mod-colorhandle-border-width,var(--spectrum-colorhandle-border-width)\n);box-shadow:0 0 0 var(\n--mod-colorhandle-outer-border-width,var(--spectrum-colorhandle-outer-border-width)\n) var(\n--mod-colorhandle-outer-border-color,var(--spectrum-colorhandle-outer-border-color)\n);box-sizing:border-box;display:block;inline-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);position:absolute;transition:inline-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),block-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),border-width var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-inline var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-block var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{block-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);content:\"\";display:block;inline-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);inset-block:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);inset-inline:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);position:absolute}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(:focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host([disabled]){background:var(\n--highcontrast-colorhandle-fill-color-disabled,var(\n--mod-colorhandle-fill-color-disabled,var(--spectrum-colorhandle-fill-color-disabled)\n)\n);border-color:var(\n--highcontrast-colorhandle-border-color-disabled,var(\n--mod-colorhandle-border-color-disabled,var(--spectrum-colorhandle-border-color-disabled)\n)\n);box-shadow:none;pointer-events:none}:host([disabled]) .inner{display:none}.inner{background-color:var(--spectrum-picked-color);block-size:100%;border-radius:100%;box-shadow:inset 0 0 0 var(\n--mod-colorhandle-inner-border-width,var(--spectrum-colorhandle-inner-border-width)\n) var(\n--mod-colorhandle-inner-border-color,var(--spectrum-colorhandle-inner-border-color)\n);inline-size:100%}.\uD83E\uDD2B{--spectrum-picked-color:0}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-colorhandle-border-color-disabled:GrayText;--highcontrast-colorhandle-fill-color-disabled:Canvas}}:host{touch-action:none}:host(:focus){outline:none}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-color-handle.css.dev.js CHANGED
@@ -1,101 +1,103 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{--spectrum-colorhandle-checkerboard-size:var(
5
- --spectrum-global-dimension-static-size-100,8px
4
+ :host{--spectrum-colorhandle-size:var(--spectrum-color-handle-size-interim);--spectrum-colorhandle-focused-size:var(
5
+ --spectrum-color-handle-size-key-focus-interim
6
+ );--spectrum-colorhandle-hitarea-size:var(
7
+ --spectrum-color-control-track-width
6
8
  );--spectrum-colorhandle-animation-duration:var(
7
- --spectrum-global-animation-duration-100,0.13s
8
- );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
9
- --spectrum-global-dimension-size-300
10
- )}:host(.focus-visible),:host([focused]){height:calc(var(
11
- --spectrum-colorhandle-size,
12
- var(--spectrum-global-dimension-size-200)
13
- )*2);margin-left:calc(var(
14
- --spectrum-colorhandle-size,
15
- var(--spectrum-global-dimension-size-200)
16
- )*-1);margin-top:calc(var(
17
- --spectrum-colorhandle-size,
18
- var(--spectrum-global-dimension-size-200)
19
- )*-1);width:calc(var(
20
- --spectrum-colorhandle-size,
21
- var(--spectrum-global-dimension-size-200)
22
- )*2)}:host(.focus-visible),:host([focused]){height:calc(var(
23
- --spectrum-colorhandle-size,
24
- var(--spectrum-global-dimension-size-200)
25
- )*2);margin-left:calc(var(
26
- --spectrum-colorhandle-size,
27
- var(--spectrum-global-dimension-size-200)
28
- )*-1);margin-top:calc(var(
29
- --spectrum-colorhandle-size,
30
- var(--spectrum-global-dimension-size-200)
31
- )*-1);width:calc(var(
32
- --spectrum-colorhandle-size,
33
- var(--spectrum-global-dimension-size-200)
34
- )*2)}:host(:focus-visible),:host([focused]){height:calc(var(
35
- --spectrum-colorhandle-size,
36
- var(--spectrum-global-dimension-size-200)
37
- )*2);margin-left:calc(var(
38
- --spectrum-colorhandle-size,
39
- var(--spectrum-global-dimension-size-200)
40
- )*-1);margin-top:calc(var(
41
- --spectrum-colorhandle-size,
42
- var(--spectrum-global-dimension-size-200)
43
- )*-1);width:calc(var(
44
- --spectrum-colorhandle-size,
45
- var(--spectrum-global-dimension-size-200)
46
- )*2)}:host{background-position:var(
47
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
9
+ --spectrum-animation-duration-100
10
+ );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-outer-border-width:var(
11
+ --spectrum-color-handle-outer-border-width
12
+ );--spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-inner-border-width:var(
13
+ --spectrum-color-handle-inner-border-width
14
+ );--spectrum-colorhandle-border-width:var(
15
+ --spectrum-color-handle-border-width
16
+ );--spectrum-colorhandle-border-color:var(--spectrum-white);--spectrum-colorhandle-checkerboard-dark-color:var(
17
+ --spectrum-opacity-checkerboard-square-dark
18
+ );--spectrum-colorhandle-checkerboard-light-color:var(
19
+ --spectrum-opacity-checkerboard-square-light
20
+ );--spectrum-colorhandle-checkerboard-size:var(
21
+ --spectrum-opacity-checkerboard-square-size
22
+ );--spectrum-colorhandle-border-color-disabled:var(
23
+ --spectrum-disabled-content-color
24
+ );--spectrum-colorhandle-fill-color-disabled:var(
25
+ --spectrum-disabled-background-color
26
+ )}:host{background:repeating-conic-gradient(var(
27
+ --mod-colorhandle-checkerboard-light-color,var(--spectrum-colorhandle-checkerboard-light-color)
28
+ ) 0 25%,var(
29
+ --mod-colorhandle-checkerboard-dark-color,var(--spectrum-colorhandle-checkerboard-dark-color)
30
+ ) 0 50%) 50% /calc(var(
31
+ --mod-colorhandle-checkerboard-size,
32
+ var(--spectrum-colorhandle-checkerboard-size)
33
+ )*2) calc(var(
34
+ --mod-colorhandle-checkerboard-size,
35
+ var(--spectrum-colorhandle-checkerboard-size)
36
+ )*2);block-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));border-color:var(
37
+ --highcontrast-colorhandle-border-color,var(
38
+ --mod-colorhandle-border-color,var(--spectrum-colorhandle-border-color)
39
+ )
40
+ );border-style:solid;border-width:var(
41
+ --mod-colorhandle-border-width,var(--spectrum-colorhandle-border-width)
42
+ );box-shadow:0 0 0 var(
43
+ --mod-colorhandle-outer-border-width,var(--spectrum-colorhandle-outer-border-width)
48
44
  ) var(
49
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
50
- ),var(
51
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
52
- ) calc(var(--spectrum-colorhandle-checkerboard-size) + var(
53
- --spectrum-colorhandle-background-offset,
54
- calc(-1 * var(--spectrum-global-dimension-static-size-25))
55
- )),calc(var(--spectrum-colorhandle-checkerboard-size) + var(
56
- --spectrum-colorhandle-background-offset,
57
- calc(-1 * var(--spectrum-global-dimension-static-size-25))
58
- )) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(
59
- --spectrum-global-dimension-static-size-25
60
- )))),calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(
61
- --spectrum-global-dimension-static-size-25
62
- )))) var(
63
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
64
- );background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-style:solid;border-width:var(
65
- --spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25)
66
- );box-sizing:border-box;display:block;height:var(
67
- --spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)
68
- );margin-left:calc(var(
69
- --spectrum-colorhandle-size,
70
- var(--spectrum-global-dimension-size-200)
71
- )*-1/2);margin-top:calc(var(
72
- --spectrum-colorhandle-size,
73
- var(--spectrum-global-dimension-size-200)
74
- )*-1/2);position:absolute;transition:width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);width:var(
75
- --spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)
76
- );z-index:1}:host,:host:after{border-radius:100%}:host:after{content:"";display:block;height:var(--spectrum-colorhandle-hitarea-size);left:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);position:absolute;top:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);width:var(--spectrum-colorhandle-hitarea-size)}:host([disabled]){pointer-events:none}.color{border-radius:100%;height:100%;width:100%}:host{background-color:var(
77
- --spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
78
- );background-image:linear-gradient(-45deg,transparent 75.5%,var(
79
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
80
- ) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
81
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
82
- ) 75.5%),linear-gradient(-45deg,var(
83
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
84
- ) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
85
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
86
- ) 25.5%,transparent 25.5%);border-color:var(
87
- --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
88
- );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
89
- --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
90
- ) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
91
- --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
45
+ --mod-colorhandle-outer-border-color,var(--spectrum-colorhandle-outer-border-color)
46
+ );box-sizing:border-box;display:block;inline-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);position:absolute;transition:inline-size var(
47
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
48
+ ) var(
49
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
50
+ ),block-size var(
51
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
52
+ ) var(
53
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
54
+ ),border-width var(
55
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
56
+ ) var(
57
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
58
+ ),margin-inline var(
59
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
60
+ ) var(
61
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
62
+ ),margin-block var(
63
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
64
+ ) var(
65
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
66
+ );z-index:1}:host,:host:after{border-radius:100%}:host:after{block-size:var(
67
+ --mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)
68
+ );content:"";display:block;inline-size:var(
69
+ --mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)
70
+ );inset-block:calc(50% - var(
71
+ --mod-colorhandle-hitarea-size,
72
+ var(--spectrum-colorhandle-hitarea-size)
73
+ )/2);inset-inline:calc(50% - var(
74
+ --mod-colorhandle-hitarea-size,
75
+ var(--spectrum-colorhandle-hitarea-size)
76
+ )/2);position:absolute}:host(.focus-visible),:host([focused]){block-size:var(
77
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
78
+ );inline-size:var(
79
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
80
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(.focus-visible),:host([focused]){block-size:var(
81
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
82
+ );inline-size:var(
83
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
84
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(:focus-visible),:host([focused]){block-size:var(
85
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
86
+ );inline-size:var(
87
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
88
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host([disabled]){background:var(
89
+ --highcontrast-colorhandle-fill-color-disabled,var(
90
+ --mod-colorhandle-fill-color-disabled,var(--spectrum-colorhandle-fill-color-disabled)
91
+ )
92
92
  );border-color:var(
93
- --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
94
- );box-shadow:none}:host([disabled]) .color{display:none}.🤫{--spectrum-picked-color:0}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
95
- --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
93
+ --highcontrast-colorhandle-border-color-disabled,var(
94
+ --mod-colorhandle-border-color-disabled,var(--spectrum-colorhandle-border-color-disabled)
95
+ )
96
+ );box-shadow:none;pointer-events:none}:host([disabled]) .inner{display:none}.inner{background-color:var(--spectrum-picked-color);block-size:100%;border-radius:100%;box-shadow:inset 0 0 0 var(
97
+ --mod-colorhandle-inner-border-width,var(--spectrum-colorhandle-inner-border-width)
96
98
  ) var(
97
- --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)
98
- )}@media (forced-colors:active){:host{--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:Canvas;--spectrum-colorhandle-inner-border-color:CanvasText}:host([disabled]){forced-color-adjust:none}}
99
+ --mod-colorhandle-inner-border-color,var(--spectrum-colorhandle-inner-border-color)
100
+ );inline-size:100%}.🤫{--spectrum-picked-color:0}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-colorhandle-border-color-disabled:GrayText;--highcontrast-colorhandle-fill-color-disabled:Canvas}}
99
101
  `;
100
102
  export default styles;
101
103
  //# sourceMappingURL=spectrum-color-handle.css.dev.js.map
package/src/spectrum-color-handle.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-color-handle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-global-animation-duration-100,0.13s\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(\n--spectrum-global-dimension-size-300\n)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(:focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host{background-position:var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n),var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)),calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))),calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-style:solid;border-width:var(\n--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25)\n);box-sizing:border-box;display:block;height:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);position:absolute;transition:width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);width:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{content:\"\";display:block;height:var(--spectrum-colorhandle-hitarea-size);left:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);position:absolute;top:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);width:var(--spectrum-colorhandle-hitarea-size)}:host([disabled]){pointer-events:none}.color{border-radius:100%;height:100%;width:100%}:host{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%);border-color:var(\n--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)\n);box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(\n--spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)\n) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(\n--spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n);border-color:var(\n--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)\n);box-shadow:none}:host([disabled]) .color{display:none}.\uD83E\uDD2B{--spectrum-picked-color:0}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(\n--spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)\n)}@media (forced-colors:active){:host{--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:Canvas;--spectrum-colorhandle-inner-border-color:CanvasText}:host([disabled]){forced-color-adjust:none}}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGf,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-size:var(--spectrum-color-handle-size-interim);--spectrum-colorhandle-focused-size:var(\n--spectrum-color-handle-size-key-focus-interim\n);--spectrum-colorhandle-hitarea-size:var(\n--spectrum-color-control-track-width\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-outer-border-width:var(\n--spectrum-color-handle-outer-border-width\n);--spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-inner-border-width:var(\n--spectrum-color-handle-inner-border-width\n);--spectrum-colorhandle-border-width:var(\n--spectrum-color-handle-border-width\n);--spectrum-colorhandle-border-color:var(--spectrum-white);--spectrum-colorhandle-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-colorhandle-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-colorhandle-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-colorhandle-border-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-colorhandle-fill-color-disabled:var(\n--spectrum-disabled-background-color\n)}:host{background:repeating-conic-gradient(var(\n--mod-colorhandle-checkerboard-light-color,var(--spectrum-colorhandle-checkerboard-light-color)\n) 0 25%,var(\n--mod-colorhandle-checkerboard-dark-color,var(--spectrum-colorhandle-checkerboard-dark-color)\n) 0 50%) 50% /calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2) calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2);block-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));border-color:var(\n--highcontrast-colorhandle-border-color,var(\n--mod-colorhandle-border-color,var(--spectrum-colorhandle-border-color)\n)\n);border-style:solid;border-width:var(\n--mod-colorhandle-border-width,var(--spectrum-colorhandle-border-width)\n);box-shadow:0 0 0 var(\n--mod-colorhandle-outer-border-width,var(--spectrum-colorhandle-outer-border-width)\n) var(\n--mod-colorhandle-outer-border-color,var(--spectrum-colorhandle-outer-border-color)\n);box-sizing:border-box;display:block;inline-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);position:absolute;transition:inline-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),block-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),border-width var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-inline var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-block var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{block-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);content:\"\";display:block;inline-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);inset-block:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);inset-inline:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);position:absolute}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(:focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host([disabled]){background:var(\n--highcontrast-colorhandle-fill-color-disabled,var(\n--mod-colorhandle-fill-color-disabled,var(--spectrum-colorhandle-fill-color-disabled)\n)\n);border-color:var(\n--highcontrast-colorhandle-border-color-disabled,var(\n--mod-colorhandle-border-color-disabled,var(--spectrum-colorhandle-border-color-disabled)\n)\n);box-shadow:none;pointer-events:none}:host([disabled]) .inner{display:none}.inner{background-color:var(--spectrum-picked-color);block-size:100%;border-radius:100%;box-shadow:inset 0 0 0 var(\n--mod-colorhandle-inner-border-width,var(--spectrum-colorhandle-inner-border-width)\n) var(\n--mod-colorhandle-inner-border-color,var(--spectrum-colorhandle-inner-border-color)\n);inline-size:100%}.\uD83E\uDD2B{--spectrum-picked-color:0}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-colorhandle-border-color-disabled:GrayText;--highcontrast-colorhandle-fill-color-disabled:Canvas}}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmGf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-color-handle.css.js CHANGED
@@ -1,98 +1,100 @@
1
- "use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
2
- :host{--spectrum-colorhandle-checkerboard-size:var(
3
- --spectrum-global-dimension-static-size-100,8px
1
+ "use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
2
+ :host{--spectrum-colorhandle-size:var(--spectrum-color-handle-size-interim);--spectrum-colorhandle-focused-size:var(
3
+ --spectrum-color-handle-size-key-focus-interim
4
+ );--spectrum-colorhandle-hitarea-size:var(
5
+ --spectrum-color-control-track-width
4
6
  );--spectrum-colorhandle-animation-duration:var(
5
- --spectrum-global-animation-duration-100,0.13s
6
- );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
7
- --spectrum-global-dimension-size-300
8
- )}:host(.focus-visible),:host([focused]){height:calc(var(
9
- --spectrum-colorhandle-size,
10
- var(--spectrum-global-dimension-size-200)
11
- )*2);margin-left:calc(var(
12
- --spectrum-colorhandle-size,
13
- var(--spectrum-global-dimension-size-200)
14
- )*-1);margin-top:calc(var(
15
- --spectrum-colorhandle-size,
16
- var(--spectrum-global-dimension-size-200)
17
- )*-1);width:calc(var(
18
- --spectrum-colorhandle-size,
19
- var(--spectrum-global-dimension-size-200)
20
- )*2)}:host(.focus-visible),:host([focused]){height:calc(var(
21
- --spectrum-colorhandle-size,
22
- var(--spectrum-global-dimension-size-200)
23
- )*2);margin-left:calc(var(
24
- --spectrum-colorhandle-size,
25
- var(--spectrum-global-dimension-size-200)
26
- )*-1);margin-top:calc(var(
27
- --spectrum-colorhandle-size,
28
- var(--spectrum-global-dimension-size-200)
29
- )*-1);width:calc(var(
30
- --spectrum-colorhandle-size,
31
- var(--spectrum-global-dimension-size-200)
32
- )*2)}:host(:focus-visible),:host([focused]){height:calc(var(
33
- --spectrum-colorhandle-size,
34
- var(--spectrum-global-dimension-size-200)
35
- )*2);margin-left:calc(var(
36
- --spectrum-colorhandle-size,
37
- var(--spectrum-global-dimension-size-200)
38
- )*-1);margin-top:calc(var(
39
- --spectrum-colorhandle-size,
40
- var(--spectrum-global-dimension-size-200)
41
- )*-1);width:calc(var(
42
- --spectrum-colorhandle-size,
43
- var(--spectrum-global-dimension-size-200)
44
- )*2)}:host{background-position:var(
45
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
7
+ --spectrum-animation-duration-100
8
+ );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-outer-border-width:var(
9
+ --spectrum-color-handle-outer-border-width
10
+ );--spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-inner-border-width:var(
11
+ --spectrum-color-handle-inner-border-width
12
+ );--spectrum-colorhandle-border-width:var(
13
+ --spectrum-color-handle-border-width
14
+ );--spectrum-colorhandle-border-color:var(--spectrum-white);--spectrum-colorhandle-checkerboard-dark-color:var(
15
+ --spectrum-opacity-checkerboard-square-dark
16
+ );--spectrum-colorhandle-checkerboard-light-color:var(
17
+ --spectrum-opacity-checkerboard-square-light
18
+ );--spectrum-colorhandle-checkerboard-size:var(
19
+ --spectrum-opacity-checkerboard-square-size
20
+ );--spectrum-colorhandle-border-color-disabled:var(
21
+ --spectrum-disabled-content-color
22
+ );--spectrum-colorhandle-fill-color-disabled:var(
23
+ --spectrum-disabled-background-color
24
+ )}:host{background:repeating-conic-gradient(var(
25
+ --mod-colorhandle-checkerboard-light-color,var(--spectrum-colorhandle-checkerboard-light-color)
26
+ ) 0 25%,var(
27
+ --mod-colorhandle-checkerboard-dark-color,var(--spectrum-colorhandle-checkerboard-dark-color)
28
+ ) 0 50%) 50% /calc(var(
29
+ --mod-colorhandle-checkerboard-size,
30
+ var(--spectrum-colorhandle-checkerboard-size)
31
+ )*2) calc(var(
32
+ --mod-colorhandle-checkerboard-size,
33
+ var(--spectrum-colorhandle-checkerboard-size)
34
+ )*2);block-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));border-color:var(
35
+ --highcontrast-colorhandle-border-color,var(
36
+ --mod-colorhandle-border-color,var(--spectrum-colorhandle-border-color)
37
+ )
38
+ );border-style:solid;border-width:var(
39
+ --mod-colorhandle-border-width,var(--spectrum-colorhandle-border-width)
40
+ );box-shadow:0 0 0 var(
41
+ --mod-colorhandle-outer-border-width,var(--spectrum-colorhandle-outer-border-width)
46
42
  ) var(
47
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
48
- ),var(
49
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
50
- ) calc(var(--spectrum-colorhandle-checkerboard-size) + var(
51
- --spectrum-colorhandle-background-offset,
52
- calc(-1 * var(--spectrum-global-dimension-static-size-25))
53
- )),calc(var(--spectrum-colorhandle-checkerboard-size) + var(
54
- --spectrum-colorhandle-background-offset,
55
- calc(-1 * var(--spectrum-global-dimension-static-size-25))
56
- )) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(
57
- --spectrum-global-dimension-static-size-25
58
- )))),calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(
59
- --spectrum-global-dimension-static-size-25
60
- )))) var(
61
- --spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))
62
- );background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-style:solid;border-width:var(
63
- --spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25)
64
- );box-sizing:border-box;display:block;height:var(
65
- --spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)
66
- );margin-left:calc(var(
67
- --spectrum-colorhandle-size,
68
- var(--spectrum-global-dimension-size-200)
69
- )*-1/2);margin-top:calc(var(
70
- --spectrum-colorhandle-size,
71
- var(--spectrum-global-dimension-size-200)
72
- )*-1/2);position:absolute;transition:width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);width:var(
73
- --spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)
74
- );z-index:1}:host,:host:after{border-radius:100%}:host:after{content:"";display:block;height:var(--spectrum-colorhandle-hitarea-size);left:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);position:absolute;top:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);width:var(--spectrum-colorhandle-hitarea-size)}:host([disabled]){pointer-events:none}.color{border-radius:100%;height:100%;width:100%}:host{background-color:var(
75
- --spectrum-colorcontrol-checkerboard-light-color,var(--spectrum-global-color-static-white)
76
- );background-image:linear-gradient(-45deg,transparent 75.5%,var(
77
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
78
- ) 75.5%),linear-gradient(45deg,transparent 75.5%,var(
79
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
80
- ) 75.5%),linear-gradient(-45deg,var(
81
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
82
- ) 25.5%,transparent 25.5%),linear-gradient(45deg,var(
83
- --spectrum-colorcontrol-checkerboard-dark-color,var(--spectrum-global-color-static-gray-300)
84
- ) 25.5%,transparent 25.5%);border-color:var(
85
- --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
86
- );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
87
- --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
88
- ) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
89
- --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
43
+ --mod-colorhandle-outer-border-color,var(--spectrum-colorhandle-outer-border-color)
44
+ );box-sizing:border-box;display:block;inline-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);position:absolute;transition:inline-size var(
45
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
46
+ ) var(
47
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
48
+ ),block-size var(
49
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
50
+ ) var(
51
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
52
+ ),border-width var(
53
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
54
+ ) var(
55
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
56
+ ),margin-inline var(
57
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
58
+ ) var(
59
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
60
+ ),margin-block var(
61
+ --mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)
62
+ ) var(
63
+ --mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)
64
+ );z-index:1}:host,:host:after{border-radius:100%}:host:after{block-size:var(
65
+ --mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)
66
+ );content:"";display:block;inline-size:var(
67
+ --mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)
68
+ );inset-block:calc(50% - var(
69
+ --mod-colorhandle-hitarea-size,
70
+ var(--spectrum-colorhandle-hitarea-size)
71
+ )/2);inset-inline:calc(50% - var(
72
+ --mod-colorhandle-hitarea-size,
73
+ var(--spectrum-colorhandle-hitarea-size)
74
+ )/2);position:absolute}:host(.focus-visible),:host([focused]){block-size:var(
75
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
76
+ );inline-size:var(
77
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
78
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(.focus-visible),:host([focused]){block-size:var(
79
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
80
+ );inline-size:var(
81
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
82
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(:focus-visible),:host([focused]){block-size:var(
83
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
84
+ );inline-size:var(
85
+ --mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)
86
+ );margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host([disabled]){background:var(
87
+ --highcontrast-colorhandle-fill-color-disabled,var(
88
+ --mod-colorhandle-fill-color-disabled,var(--spectrum-colorhandle-fill-color-disabled)
89
+ )
90
90
  );border-color:var(
91
- --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
92
- );box-shadow:none}:host([disabled]) .color{display:none}.🤫{--spectrum-picked-color:0}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
93
- --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
91
+ --highcontrast-colorhandle-border-color-disabled,var(
92
+ --mod-colorhandle-border-color-disabled,var(--spectrum-colorhandle-border-color-disabled)
93
+ )
94
+ );box-shadow:none;pointer-events:none}:host([disabled]) .inner{display:none}.inner{background-color:var(--spectrum-picked-color);block-size:100%;border-radius:100%;box-shadow:inset 0 0 0 var(
95
+ --mod-colorhandle-inner-border-width,var(--spectrum-colorhandle-inner-border-width)
94
96
  ) var(
95
- --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)
96
- )}@media (forced-colors:active){:host{--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:Canvas;--spectrum-colorhandle-inner-border-color:CanvasText}:host([disabled]){forced-color-adjust:none}}
97
- `;export default o;
97
+ --mod-colorhandle-inner-border-color,var(--spectrum-colorhandle-inner-border-color)
98
+ );inline-size:100%}.🤫{--spectrum-picked-color:0}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-colorhandle-border-color-disabled:GrayText;--highcontrast-colorhandle-fill-color-disabled:Canvas}}
99
+ `;export default r;
98
100
  //# sourceMappingURL=spectrum-color-handle.css.js.map
package/src/spectrum-color-handle.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-color-handle.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-checkerboard-size:var(\n--spectrum-global-dimension-static-size-100,8px\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-global-animation-duration-100,0.13s\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(\n--spectrum-global-dimension-size-300\n)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(.focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host(:focus-visible),:host([focused]){height:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1);width:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*2)}:host{background-position:var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n),var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n) calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)),calc(var(--spectrum-colorhandle-checkerboard-size) + var(\n--spectrum-colorhandle-background-offset,\ncalc(-1 * var(--spectrum-global-dimension-static-size-25))\n)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))),calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 * var(\n--spectrum-global-dimension-static-size-25\n)))) var(\n--spectrum-colorhandle-background-offset,calc(-1 * var(--spectrum-global-dimension-static-size-25))\n);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);border-style:solid;border-width:var(\n--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25)\n);box-sizing:border-box;display:block;height:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);margin-left:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);margin-top:calc(var(\n--spectrum-colorhandle-size,\nvar(--spectrum-global-dimension-size-200)\n)*-1/2);position:absolute;transition:width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing),margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing);width:var(\n--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{content:\"\";display:block;height:var(--spectrum-colorhandle-hitarea-size);left:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);position:absolute;top:calc(50% - var(--spectrum-colorhandle-hitarea-size)/2);width:var(--spectrum-colorhandle-hitarea-size)}:host([disabled]){pointer-events:none}.color{border-radius:100%;height:100%;width:100%}:host{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%);border-color:var(\n--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)\n);box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(\n--spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)\n) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(\n--spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)\n);border-color:var(\n--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)\n);box-shadow:none}:host([disabled]) .color{display:none}.\uD83E\uDD2B{--spectrum-picked-color:0}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(\n--spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)\n) var(\n--spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)\n)}@media (forced-colors:active){:host{--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:Canvas;--spectrum-colorhandle-inner-border-color:CanvasText}:host([disabled]){forced-color-adjust:none}}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiGf,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 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-colorhandle-size:var(--spectrum-color-handle-size-interim);--spectrum-colorhandle-focused-size:var(\n--spectrum-color-handle-size-key-focus-interim\n);--spectrum-colorhandle-hitarea-size:var(\n--spectrum-color-control-track-width\n);--spectrum-colorhandle-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-outer-border-width:var(\n--spectrum-color-handle-outer-border-width\n);--spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb),0.42);--spectrum-colorhandle-inner-border-width:var(\n--spectrum-color-handle-inner-border-width\n);--spectrum-colorhandle-border-width:var(\n--spectrum-color-handle-border-width\n);--spectrum-colorhandle-border-color:var(--spectrum-white);--spectrum-colorhandle-checkerboard-dark-color:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-colorhandle-checkerboard-light-color:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-colorhandle-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-colorhandle-border-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-colorhandle-fill-color-disabled:var(\n--spectrum-disabled-background-color\n)}:host{background:repeating-conic-gradient(var(\n--mod-colorhandle-checkerboard-light-color,var(--spectrum-colorhandle-checkerboard-light-color)\n) 0 25%,var(\n--mod-colorhandle-checkerboard-dark-color,var(--spectrum-colorhandle-checkerboard-dark-color)\n) 0 50%) 50% /calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2) calc(var(\n--mod-colorhandle-checkerboard-size,\nvar(--spectrum-colorhandle-checkerboard-size)\n)*2);block-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));border-color:var(\n--highcontrast-colorhandle-border-color,var(\n--mod-colorhandle-border-color,var(--spectrum-colorhandle-border-color)\n)\n);border-style:solid;border-width:var(\n--mod-colorhandle-border-width,var(--spectrum-colorhandle-border-width)\n);box-shadow:0 0 0 var(\n--mod-colorhandle-outer-border-width,var(--spectrum-colorhandle-outer-border-width)\n) var(\n--mod-colorhandle-outer-border-color,var(--spectrum-colorhandle-outer-border-color)\n);box-sizing:border-box;display:block;inline-size:var(--mod-colorhandle-size,var(--spectrum-colorhandle-size));margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1/2);position:absolute;transition:inline-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),block-size var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),border-width var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-inline var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n),margin-block var(\n--mod-colorhandle-animation-duration,var(--spectrum-colorhandle-animation-duration)\n) var(\n--mod-colorhandle-animation-easing,var(--spectrum-colorhandle-animation-easing)\n);z-index:1}:host,:host:after{border-radius:100%}:host:after{block-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);content:\"\";display:block;inline-size:var(\n--mod-colorhandle-hitarea-size,var(--spectrum-colorhandle-hitarea-size)\n);inset-block:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);inset-inline:calc(50% - var(\n--mod-colorhandle-hitarea-size,\nvar(--spectrum-colorhandle-hitarea-size)\n)/2);position:absolute}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(.focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host(:focus-visible),:host([focused]){block-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);inline-size:var(\n--mod-colorhandle-focused-size,var(--spectrum-colorhandle-focused-size)\n);margin-block:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);margin-inline:calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size))*-1);outline:none}:host([disabled]){background:var(\n--highcontrast-colorhandle-fill-color-disabled,var(\n--mod-colorhandle-fill-color-disabled,var(--spectrum-colorhandle-fill-color-disabled)\n)\n);border-color:var(\n--highcontrast-colorhandle-border-color-disabled,var(\n--mod-colorhandle-border-color-disabled,var(--spectrum-colorhandle-border-color-disabled)\n)\n);box-shadow:none;pointer-events:none}:host([disabled]) .inner{display:none}.inner{background-color:var(--spectrum-picked-color);block-size:100%;border-radius:100%;box-shadow:inset 0 0 0 var(\n--mod-colorhandle-inner-border-width,var(--spectrum-colorhandle-inner-border-width)\n) var(\n--mod-colorhandle-inner-border-color,var(--spectrum-colorhandle-inner-border-color)\n);inline-size:100%}.\uD83E\uDD2B{--spectrum-picked-color:0}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-colorhandle-border-color-disabled:GrayText;--highcontrast-colorhandle-fill-color-disabled:Canvas}}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmGf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -28,7 +28,7 @@ const config = {
28
28
  converter.classToHost(),
29
29
  converter.classToAttribute('is-focused', 'focused'),
30
30
  converter.classToAttribute('is-disabled', 'disabled'),
31
- converter.classToClass('spectrum-ColorHandle-color'),
31
+ converter.classToClass('spectrum-ColorHandle-inner'),
32
32
  ],
33
33
  },
34
34
  ],