@spectrum-web-components/checkbox - npm Package Compare versions

Comparing version 0.4.4 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/checkbox@0.4.4...@spectrum-web-components/checkbox@0.5.0) (2020-08-31)
+
+### Features
+
+-   **action-group:** add action-group pattern ([d2de766](https://github.com/adobe/spectrum-web-components/commit/d2de766efde6dfbaa1cd604f99ae3128b4fc81b5))
+-   **card:** upgrade to Spectrum CSS v3.0.0 ([84cf1a9](https://github.com/adobe/spectrum-web-components/commit/84cf1a9758b1e357f18efac5763d17d6a4db0578))
+-   use 3.0.0-beta.\* release for styles ([877b485](https://github.com/adobe/spectrum-web-components/commit/877b485f20c76ec8f77975747322f572eea88e97))
+
 ## [0.4.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/checkbox@0.4.3...@spectrum-web-components/checkbox@0.4.4) (2020-08-19)
@@ -8,0 +16,0 @@

custom-elements.json

@@ -96,2 +96,6 @@ {
           "type": "HTMLElement"
+        },
+        {
+          "name": "shadowRoot",
+          "type": "ShadowRoot"
         }
@@ -98,0 +102,0 @@ ],

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.4.4",
+    "version": "0.5.0",
     "description": "",
@@ -46,3 +46,3 @@ "main": "src/index.js",
     "scripts": {
-        "test": "karma start --coverage"
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
     },
@@ -52,13 +52,12 @@ "author": "",
     "devDependencies": {
-        "@spectrum-css/checkbox": "^2.1.0"
+        "@spectrum-css/checkbox": "^3.0.0-beta.3"
     },
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.5.2",
-        "@spectrum-web-components/icons-ui": "^0.2.2",
-        "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.1.0",
+        "@spectrum-web-components/icon": "^0.6.0",
+        "@spectrum-web-components/icons-ui": "^0.3.0",
+        "@spectrum-web-components/shared": "^0.7.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "61d6daa63fedca757761095d1e1ed6919d8a1673"
+    "gitHead": "51706b5f7aeec990c6323501aa22f8aee5827e31"
 }

src/checkbox.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/checkbox.css.js

@@ -12,17 +12,19 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#root{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*2);vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;left:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*-1);width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
+:host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #root #box:before,:host([indeterminate]) #root #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
-var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #root #box #checkmark,:host([indeterminate]) #root #input:checked+#box #checkmark{display:none}:host([indeterminate]) #root #box #partialCheckmark,:host([indeterminate]) #root #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}#label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125));margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
+var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
 var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #root #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box:before,:host([indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box:before,:host([indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #root #box:before,:host([quiet][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box:before,:host([quiet][indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box:before,:host([quiet][indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box:before,:host([invalid]) #root #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible+#box:before,:host([invalid][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible~#label,:host([invalid][indeterminate]) #root #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:hover #box:before,:host([invalid]) #root:hover #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box:before,:host([invalid]) #root:active #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}
+var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}
 `;
 export default styles;
 //# sourceMappingURL=checkbox.css.js.map

src/checkbox.css.ts

@@ -12,16 +12,18 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#root{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*2);vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;left:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*-1);width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
+:host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #root #box:before,:host([indeterminate]) #root #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
-var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #root #box #checkmark,:host([indeterminate]) #root #input:checked+#box #checkmark{display:none}:host([indeterminate]) #root #box #partialCheckmark,:host([indeterminate]) #root #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}#label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125));margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
+var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
 var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #root #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box:before,:host([indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box:before,:host([indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #root #box:before,:host([quiet][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box:before,:host([quiet][indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box:before,:host([quiet][indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box:before,:host([invalid]) #root #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible+#box:before,:host([invalid][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible~#label,:host([invalid][indeterminate]) #root #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:hover #box:before,:host([invalid]) #root:hover #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box:before,:host([invalid]) #root:active #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}
+var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}
 `;
 export default styles;

src/Checkbox.d.ts

@@ -1,2 +0,2 @@
-import { CSSResultArray, TemplateResult, PropertyValues } from 'lit-element';
+import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import { CheckboxBase } from './CheckboxBase.js';
@@ -3,0 +3,0 @@ import '@spectrum-web-components/icon/sp-icon.js';

src/Checkbox.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, property, } from 'lit-element';
+import { html, property, } from '@spectrum-web-components/base';
 import { CheckboxBase } from './CheckboxBase.js';
@@ -37,14 +37,12 @@ import '@spectrum-web-components/icon/sp-icon.js';
         return html `
-            <label id="root">
-                ${super.render()}
-                <span id="box">
-                    <sp-icon id="checkmark" size="s" class="checkmark-small">
-                        ${CheckmarkSmallIcon({ hidden: true })}
-                    </sp-icon>
-                    <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                        ${DashSmallIcon({ hidden: true })}
-                    </sp-icon>
-                </span>
-                <span id="label"><slot></slot></span>
-            </label>
+            ${super.render()}
+            <span id="box">
+                <sp-icon id="checkmark" size="s" class="checkmark-small">
+                    ${CheckmarkSmallIcon({ hidden: true })}
+                </sp-icon>
+                <sp-icon id="partialCheckmark" size="s" class="dash-small">
+                    ${DashSmallIcon({ hidden: true })}
+                </sp-icon>
+            </span>
+            <label id="label"><slot></slot></label>
         `;
@@ -51,0 +49,0 @@ }

src/Checkbox.ts

@@ -19,3 +19,3 @@ /*
     PropertyValues,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 import { CheckboxBase } from './CheckboxBase.js';
@@ -49,14 +49,12 @@ import '@spectrum-web-components/icon/sp-icon.js';
         return html`
-            <label id="root">
-                ${super.render()}
-                <span id="box">
-                    <sp-icon id="checkmark" size="s" class="checkmark-small">
-                        ${CheckmarkSmallIcon({ hidden: true })}
-                    </sp-icon>
-                    <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                        ${DashSmallIcon({ hidden: true })}
-                    </sp-icon>
-                </span>
-                <span id="label"><slot></slot></span>
-            </label>
+            ${super.render()}
+            <span id="box">
+                <sp-icon id="checkmark" size="s" class="checkmark-small">
+                    ${CheckmarkSmallIcon({ hidden: true })}
+                </sp-icon>
+                <sp-icon id="partialCheckmark" size="s" class="dash-small">
+                    ${DashSmallIcon({ hidden: true })}
+                </sp-icon>
+            </span>
+            <label id="label"><slot></slot></label>
         `;
@@ -63,0 +61,0 @@ }

src/CheckboxBase.d.ts

@@ -1,2 +0,2 @@
-import { TemplateResult, CSSResultArray } from 'lit-element';
+import { TemplateResult, CSSResultArray } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -3,0 +3,0 @@ export declare class CheckboxBase extends Focusable {

src/CheckboxBase.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { property, html, query, } from 'lit-element';
+import { property, html, query, } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -16,0 +16,0 @@ export class CheckboxBase extends Focusable {

src/CheckboxBase.ts

@@ -19,3 +19,3 @@ /*
     CSSResultArray,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -22,0 +22,0 @@

src/spectrum-checkbox.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-checkbox.css.js

@@ -12,17 +12,19 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
-#root{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*2);vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;left:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*-1);width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
+:host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #root #box:before,:host([indeterminate]) #root #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
-var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #root #box #checkmark,:host([indeterminate]) #root #input:checked+#box #checkmark{display:none}:host([indeterminate]) #root #box #partialCheckmark,:host([indeterminate]) #root #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}#label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125));margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
+var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
 var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #root #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box:before,:host([indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box:before,:host([indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #root #box:before,:host([quiet][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box:before,:host([quiet][indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box:before,:host([quiet][indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box:before,:host([invalid]) #root #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible+#box:before,:host([invalid][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible~#label,:host([invalid][indeterminate]) #root #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:hover #box:before,:host([invalid]) #root:hover #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box:before,:host([invalid]) #root:active #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}
+var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-checkbox.css.js.map

src/spectrum-checkbox.css.ts

@@ -12,16 +12,18 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
-#root{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*2);vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;left:calc(var(--spectrum-checkbox-cursor-hit-x,
-var(--spectrum-global-dimension-size-100))*-1);width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
+:host([dir=ltr]){margin-right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host([dir=rtl]){margin-left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*2)}:host{display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%;vertical-align:top;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600))}:host([dir=ltr]) #input{left:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}:host([dir=rtl]) #input{right:calc(var(--spectrum-checkbox-cursor-hit-x,
+var(--spectrum-global-dimension-size-100))*-1)}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;top:0;width:calc(100% + var(--spectrum-checkbox-cursor-hit-x,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #root #box:before,:host([indeterminate]) #root #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
-var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #root #box #checkmark,:host([indeterminate]) #root #input:checked+#box #checkmark{display:none}:host([indeterminate]) #root #box #partialCheckmark,:host([indeterminate]) #root #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}#label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125));margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
+var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
+var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:1.49;color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
 var(--spectrum-global-dimension-size-400)) - var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-checkbox-box-size,var(--spectrum-global-dimension-size-175))}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius,var(--spectrum-alias-border-radius-small));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-emphasized-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-emphasized-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
 var(--spectrum-alias-border-radius-small)) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #root #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box:before,:host([indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box:before,:host([indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #root #box:before,:host([quiet][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box:before,:host([quiet][indeterminate]) #root:hover #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box:before,:host([quiet][indeterminate]) #root:active #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box:before,:host([invalid]) #root #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #root #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible+#box:before,:host([invalid][indeterminate]) #root #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root #input.focus-visible~#label,:host([invalid][indeterminate]) #root #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:hover #box:before,:host([invalid]) #root:hover #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #root:hover #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #box:before,:host([invalid]) #root:active #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]) #root:active #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}
+var(--spectrum-global-dimension-static-size-25)));left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-icon-checkmark-small-width)/-2)}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-icon-checkmark-small-width)/-2)}#checkmark,#partialCheckmark{position:absolute;top:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height)/-2);opacity:0;transform:scale(0);transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#partialCheckmark{display:none}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-emphasized-text-color-down,var(--spectrum-alias-text-color-down))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}:host([quiet]) #input:checked+#box:before,:host([quiet][indeterminate]) #box:before,:host([quiet][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]:hover) #input:checked+#box:before,:host([quiet][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]:active) #input:checked+#box:before,:host([quiet][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}:host([invalid]) #label{color:var(--spectrum-checkbox-text-color-error,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([invalid]:hover) #label{color:var(--spectrum-checkbox-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error-down,var(--spectrum-global-color-red-700))}:host([invalid]:active) #label{color:var(--spectrum-checkbox-text-color-error-down,var(--spectrum-global-color-red-700))}
 `;
 export default styles;

src/spectrum-config.js

@@ -20,3 +20,2 @@ /*
                 selector: '.spectrum-Checkbox',
-                shadowSelector: '#root',
             },
@@ -23,0 +22,0 @@ focus: '#input',

src/spectrum-vars.json

 {
   "custom-properties": {
+    "--spectrum-checkbox-cursor-hit-x": "var(--spectrum-global-dimension-size-100)",
     "--spectrum-checkbox-height": "var(--spectrum-global-dimension-size-400)",
-    "--spectrum-checkbox-cursor-hit-x": "var(--spectrum-global-dimension-size-100)",
     "--spectrum-checkbox-box-size": "var(--spectrum-global-dimension-size-175)",
@@ -12,4 +12,4 @@ "--spectrum-alias-focus-ring-gap": "var(--spectrum-global-dimension-static-size-25)",
     "--spectrum-checkbox-box-border-size": "var(--spectrum-alias-border-size-thick)",
+    "--spectrum-icon-checkmark-small-width": "undefined",
     "--spectrum-icon-checkmark-small-height": "undefined",
-    "--spectrum-icon-checkmark-small-width": "undefined",
     "--spectrum-checkbox-text-color": "var(--spectrum-alias-text-color)",
@@ -16,0 +16,0 @@ "--spectrum-checkbox-checkmark-color": "var(--spectrum-global-color-gray-75)",

No alert changes

Improved metrics

Total package byte prevSize

136947

7.18%

Dependency count

5

-16.67%

Number of package files

35

9.38%

Lines of code

1327

8.5%

Dependency changes

• + Added

  @spectrum-web-components/base@^0.1.0

• + Added

  @spectrum-web-components/icon@0.6.3
  (transitive)

• + Added

  @spectrum-web-components/icons-ui@0.3.3
  (transitive)

• + Added

  @spectrum-web-components/shared@0.7.4
  (transitive)

• - Removed

  lit-element@^2.1.0

• - Removed

  lit-html@^1.0.0

• - Removed

  @spectrum-web-components/icon@0.5.2
  (transitive)

• - Removed

  @spectrum-web-components/icons-ui@0.2.2
  (transitive)

• - Removed

  @spectrum-web-components/shared@0.6.0
  (transitive)

• Updated

  @spectrum-web-components/icon@^0.6.0

• Updated

  @spectrum-web-components/icons-ui@^0.3.0

• Updated

  @spectrum-web-components/shared@^0.7.0