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

Comparing version 0.1.5 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/checkbox@0.1.5...@spectrum-web-components/checkbox@0.2.0) (2019-11-19)
+
+### Features
+
+-   use :focus-visable (via polyfill) instead of :focus ([11c6fc7](https://github.com/adobe/spectrum-web-components/commit/11c6fc7))
+-   use @adobe/spectrum-css@2.15.1 ([3918888](https://github.com/adobe/spectrum-web-components/commit/3918888))
+
 ## [0.1.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/checkbox@0.1.4...@spectrum-web-components/checkbox@0.1.5) (2019-11-01)
@@ -8,0 +15,0 @@

lib/checkbox.css.js

@@ -15,13 +15,11 @@ /*
 #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;border-color:var(--spectrum-checkbox-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))*2);vertical-align:top;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,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}:host([indeterminate]) #root #box,:host([indeterminate]) #root #input:checked+#box{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));font-size:var(--spectrum-checkbox-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-checkbox-text-font-weight,400);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-text-color,var(--spectrum-global-color-gray-800))}#box{position:relative;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));margin:calc((var(--spectrum-checkbox-height,
+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));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));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;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));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;border-radius:var(--spectrum-checkbox-box-border-radius,2px);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,2px) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height,
-var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-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,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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}#label{overflow:visible}
+var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink: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))}#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}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box{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))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-emphasized-checkmark-color,var(--spectrum-global-color-gray-75))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-key-focus))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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}#label{overflow:visible}
 `;
 export default styles;
 //# sourceMappingURL=checkbox.css.js.map

lib/spectrum-checkbox.css.js

@@ -15,13 +15,11 @@ /*
 #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;border-color:var(--spectrum-checkbox-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))*2);vertical-align:top;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,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}:host([indeterminate]) #root #box,:host([indeterminate]) #root #input:checked+#box{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));font-size:var(--spectrum-checkbox-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-checkbox-text-font-weight,400);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-text-color,var(--spectrum-global-color-gray-800))}#box{position:relative;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));margin:calc((var(--spectrum-checkbox-height,
+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));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));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;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));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;border-radius:var(--spectrum-checkbox-box-border-radius,2px);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,2px) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height,
-var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-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,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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-size-175)))/2) 0;flex-grow:0;flex-shrink: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))}#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}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box{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))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-emphasized-checkmark-color,var(--spectrum-global-color-gray-75))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-key-focus))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-checkbox.css.js.map

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.5",
+    "version": "0.2.0",
     "description": "",
@@ -39,9 +39,12 @@ "main": "lib/index.js",
     },
+    "devDependencies": {
+        "@spectrum-css/checkbox": "^2.0.2"
+    },
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.3.0",
-        "@spectrum-web-components/icons": "^0.1.5",
-        "@spectrum-web-components/shared": "^0.2.0",
+        "@spectrum-web-components/icon": "^0.4.0",
+        "@spectrum-web-components/icons": "^0.2.0",
+        "@spectrum-web-components/shared": "^0.3.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "2157014e1c3f8cf184663261e4095eef59011b37"
+    "gitHead": "bfedd73cfc7ba9b30346ac5dd53013f7630648b0"
 }

src/checkbox.css.ts

@@ -15,12 +15,10 @@ /*
 #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;border-color:var(--spectrum-checkbox-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))*2);vertical-align:top;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,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}:host([indeterminate]) #root #box,:host([indeterminate]) #root #input:checked+#box{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));font-size:var(--spectrum-checkbox-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-checkbox-text-font-weight,400);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-text-color,var(--spectrum-global-color-gray-800))}#box{position:relative;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));margin:calc((var(--spectrum-checkbox-height,
+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));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));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;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));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;border-radius:var(--spectrum-checkbox-box-border-radius,2px);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,2px) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height,
-var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-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,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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}#label{overflow:visible}
+var(--spectrum-global-dimension-size-175)))/2) 0;flex-grow:0;flex-shrink: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))}#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}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box{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))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-emphasized-checkmark-color,var(--spectrum-global-color-gray-75))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-key-focus))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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}#label{overflow:visible}
 `;
 export default styles;

src/spectrum-checkbox.css.ts

@@ -15,12 +15,10 @@ /*
 #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;border-color:var(--spectrum-checkbox-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))*2);vertical-align:top;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,
 var(--spectrum-global-dimension-size-100))*2);height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}#input:checked+#box{border-width:calc(var(--spectrum-checkbox-box-size,
 var(--spectrum-global-dimension-size-175))/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}:host([indeterminate]) #root #box,:host([indeterminate]) #root #input:checked+#box{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));font-size:var(--spectrum-checkbox-text-size,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-checkbox-text-font-weight,400);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-text-color,var(--spectrum-global-color-gray-800))}#box{position:relative;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));margin:calc((var(--spectrum-checkbox-height,
+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));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));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out;margin-top:var(--spectrum-global-dimension-size-75);color:var(--spectrum-checkbox-emphasized-text-color,var(--spectrum-alias-text-color))}#box{position:relative;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));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;border-radius:var(--spectrum-checkbox-box-border-radius,2px);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,2px) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#checkmark,#partialCheckmark{position:absolute;top:50%;left:50%;margin-top:calc(var(--spectrum-icon-checkmark-small-height,
-var(--spectrum-global-dimension-font-size-25))/-2);margin-left:calc(var(--spectrum-icon-checkmark-small-width,
-var(--spectrum-global-dimension-font-size-25))/-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,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-global-color-gray-900))}#root:active #box{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}#root:active #label{color:var(--spectrum-checkbox-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-global-color-gray-500))}#input:focus+#box{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-blue-400))!important}#input:focus~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-global-color-blue-600))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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-size-175)))/2) 0;flex-grow:0;flex-shrink: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))}#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}#input:checked+#box,:host([indeterminate]) #root #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}#root:hover #input:checked+#box,:host([indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}#root:active #input:checked+#box,:host([indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}#root:hover #box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}#root:hover #label{color:var(--spectrum-checkbox-emphasized-text-color-hover,var(--spectrum-alias-text-color-hover))}#root:active #box{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))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-emphasized-checkmark-color,var(--spectrum-global-color-gray-75))}:host([disabled]) #input+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400))!important;background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input~#label{color:var(--spectrum-checkbox-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box{border-color:var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important;box-shadow:0 0 0 1px var(--spectrum-checkbox-emphasized-box-border-color-key-focus,var(--spectrum-alias-border-color-focus))!important}#input.focus-visible~#label{color:var(--spectrum-checkbox-emphasized-text-color-key-focus,var(--spectrum-alias-text-color-key-focus))!important}:host([quiet]) #input:checked+#box,:host([quiet][indeterminate]) #root #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host([quiet]) #root:hover #input:checked+#box,:host([quiet][indeterminate]) #root:hover #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host([quiet]) #root:active #input:checked+#box,:host([quiet][indeterminate]) #root:active #box{border-color:var(--spectrum-checkbox-quiet-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host([invalid]) #root #box,:host([invalid]) #root #input:checked+#box{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:hover #box,:host([invalid]) #root:hover #input:checked+#box{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,:host([invalid]) #root:active #input:checked+#box{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))}
 `;
 export default styles;

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96962

2.07%

Worsened metrics

Dev dependency count

1

Infinity%

Lines of code

911

-0.44%

Dependency changes

• + Added

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

• + Added

  @spectrum-web-components/icons@0.2.3
  (transitive)

• + Added

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

• + Added

  focus-visible@5.2.1
  (transitive)

• - Removed

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

• - Removed

  @spectrum-web-components/icons@0.1.5
  (transitive)

• - Removed

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

• Updated

  @spectrum-web-components/icon@^0.4.0

• Updated

  @spectrum-web-components/icons@^0.2.0

• Updated

  @spectrum-web-components/shared@^0.3.0