@spectrum-web-components/color-handle 0.4.7-react.75 → 0.4.8

package/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "sp-color-handle.ts",
+      "path": "sp-color-handle.js",
       "declarations": [],
       "exports": [
         {
@@ -19,7 +19,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/ColorHandle.ts",
+      "path": "src/ColorHandle.js",
       "declarations": [
         {
           "kind": "class",
@@ -154,7 +154,7 @@
           "name": "ColorHandle",
           "declaration": {
             "name": "ColorHandle",
-            "module": "src/ColorHandle.ts"
+            "module": "src/ColorHandle.js"
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/color-handle",
-    "version": "0.4.7-react.75+9897d0a1c",
+    "version": "0.4.8",
     "publishConfig": {
         "access": "public"
     },
@@ -57,8 +57,8 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.5-react.75+9897d0a1c",
-        "@spectrum-web-components/color-loupe": "^0.4.6-react.75+9897d0a1c"
+        "@spectrum-web-components/base": "^0.7.4",
+        "@spectrum-web-components/color-loupe": "^0.4.7"
     },
     "devDependencies": {
         "@spectrum-css/colorhandle": "^2.0.13"
@@ -69,5 +69,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "9897d0a1c48b8cee4e5a19c58acfdec2c1dc0623"
+    "gitHead": "1e25ee121f3bc838dbb99bac62f3c95857570f7a"
 }

package/src/color-handle.css.dev.js

@@ -4,7 +4,7 @@ const styles = css`
 :host{--spectrum-colorhandle-checkerboard-size:var(
 --spectrum-global-dimension-static-size-100,8px
 );--spectrum-colorhandle-animation-duration:var(
---spectrum-global-animation-duration-100,130ms
+--spectrum-global-animation-duration-100,0.13s
 );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
 --spectrum-global-dimension-size-300
 )}:host(.focus-visible),:host([focused]){height:calc(var(
@@ -87,11 +87,11 @@ var(--spectrum-global-dimension-size-200)
 --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
 );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
 --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
-) var(--spectrum-colorhandle-outer-shadow-color,rgba(0,0,0,.42))}:host([disabled]){background:var(
+) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
 --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 );border-color:var(
 --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
-);box-shadow:none}:host([disabled]) .color{display:none}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
+);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(
 --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
 ) var(
 --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)

package/src/color-handle.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["color-handle.css.ts"],
-  "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,130ms\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,rgba(0,0,0,.42))}: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}.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;"],
+  "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;"],
   "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;",
   "names": []
 }

package/src/color-handle.css.js

@@ -2,7 +2,7 @@
 :host{--spectrum-colorhandle-checkerboard-size:var(
 --spectrum-global-dimension-static-size-100,8px
 );--spectrum-colorhandle-animation-duration:var(
---spectrum-global-animation-duration-100,130ms
+--spectrum-global-animation-duration-100,0.13s
 );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
 --spectrum-global-dimension-size-300
 )}:host(.focus-visible),:host([focused]){height:calc(var(
@@ -85,11 +85,11 @@ var(--spectrum-global-dimension-size-200)
 --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
 );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
 --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
-) var(--spectrum-colorhandle-outer-shadow-color,rgba(0,0,0,.42))}:host([disabled]){background:var(
+) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
 --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 );border-color:var(
 --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
-);box-shadow:none}:host([disabled]) .color{display:none}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
+);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(
 --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
 ) var(
 --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)

package/src/color-handle.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["color-handle.css.ts"],
-  "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,130ms\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,rgba(0,0,0,.42))}: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}.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;"],
+  "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;"],
   "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",
   "names": ["css", "styles"]
 }

package/src/spectrum-color-handle.css.dev.js

@@ -4,7 +4,7 @@ const styles = css`
 :host{--spectrum-colorhandle-checkerboard-size:var(
 --spectrum-global-dimension-static-size-100,8px
 );--spectrum-colorhandle-animation-duration:var(
---spectrum-global-animation-duration-100,130ms
+--spectrum-global-animation-duration-100,0.13s
 );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
 --spectrum-global-dimension-size-300
 )}:host(.focus-visible),:host([focused]){height:calc(var(
@@ -87,11 +87,11 @@ var(--spectrum-global-dimension-size-200)
 --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
 );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
 --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
-) var(--spectrum-colorhandle-outer-shadow-color,rgba(0,0,0,.42))}:host([disabled]){background:var(
+) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
 --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 );border-color:var(
 --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
-);box-shadow:none}:host([disabled]) .color{display:none}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
+);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(
 --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
 ) var(
 --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)

package/src/spectrum-color-handle.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-color-handle.css.ts"],
-  "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,130ms\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,rgba(0,0,0,.42))}: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}.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;"],
+  "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;"],
   "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;",
   "names": []
 }

package/src/spectrum-color-handle.css.js

@@ -2,7 +2,7 @@
 :host{--spectrum-colorhandle-checkerboard-size:var(
 --spectrum-global-dimension-static-size-100,8px
 );--spectrum-colorhandle-animation-duration:var(
---spectrum-global-animation-duration-100,130ms
+--spectrum-global-animation-duration-100,0.13s
 );--spectrum-colorhandle-animation-easing:ease-in-out;--spectrum-colorhandle-hitarea-size:var(
 --spectrum-global-dimension-size-300
 )}:host(.focus-visible),:host([focused]){height:calc(var(
@@ -85,11 +85,11 @@ var(--spectrum-global-dimension-size-200)
 --spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white)
 );box-shadow:0 0 var(--spectrum-colorhandle-outer-shadow-blur,0) var(
 --spectrum-colorhandle-outer-shadow-spread,var(--spectrum-alias-border-size-thin)
-) var(--spectrum-colorhandle-outer-shadow-color,rgba(0,0,0,.42))}:host([disabled]){background:var(
+) var(--spectrum-colorhandle-outer-shadow-color,#0000006b)}:host([disabled]){background:var(
 --spectrum-colorhandle-fill-color-disabled,var(--spectrum-alias-track-color-disabled)
 );border-color:var(
 --spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400)
-);box-shadow:none}:host([disabled]) .color{display:none}.color{background-color:var(--spectrum-picked-color);box-shadow:inset 0 0 0 var(
+);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(
 --spectrum-colorhandle-outer-border-size,var(--spectrum-alias-border-size-thin)
 ) var(
 --spectrum-colorhandle-inner-shadow-color,var(--spectrum-colorhandle-outer-shadow-color)

package/src/spectrum-color-handle.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-color-handle.css.ts"],
-  "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,130ms\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,rgba(0,0,0,.42))}: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}.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;"],
+  "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;"],
   "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",
   "names": ["css", "styles"]
 }

package/src/spectrum-config.js

@@ -1,40 +1,34 @@
+// @ts-check
 /*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the 'License');
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
 
+import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+
+const converter = converterFor('spectrum-ColorHandle');
+
+/**
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
+ */
 const config = {
-    spectrum: 'colorhandle',
-    components: [
+    conversions: [
         {
-            name: 'color-handle',
-            host: {
-                selector: '.spectrum-ColorHandle',
-            },
-            attributes: [
-                {
-                    name: 'disabled',
-                    type: 'boolean',
-                    selector: '.is-disabled',
-                },
-                {
-                    name: 'focused',
-                    type: 'boolean',
-                    selector: '.is-focused',
-                },
-            ],
-            classes: [
-                {
-                    name: 'color',
-                    selector: '.spectrum-ColorHandle-color',
-                },
+            inPackage: '@spectrum-css/colorhandle',
+            outPackage: 'color-handle',
+            fileName: 'color-handle',
+            components: [
+                converter.classToHost(),
+                converter.classToAttribute('is-focused', 'focused'),
+                converter.classToAttribute('is-disabled', 'disabled'),
+                converter.classToClass('spectrum-ColorHandle-color'),
             ],
         },
     ],