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

Comparing version 0.5.5-alpha.85 to 0.5.5-alpha.169

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.5.5-alpha.85+d9ef1386",
+    "version": "0.5.5-alpha.169+a396c860",
     "description": "",
@@ -53,13 +53,13 @@ "main": "./src/index.js",
     "devDependencies": {
-        "@spectrum-css/checkbox": "^3.0.0-beta.5",
-        "@spectrum-web-components/field-group": "^0.0.2-alpha.1239+d9ef1386"
+        "@spectrum-css/checkbox": "^3.0.0-beta.6",
+        "@spectrum-web-components/field-group": "^0.0.2-alpha.1394+a396c860"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.1.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/icon": "^0.6.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/shared": "^0.7.5-alpha.85+d9ef1386",
+        "@spectrum-web-components/base": "^0.1.4-alpha.169+a396c860",
+        "@spectrum-web-components/icon": "^0.6.4-alpha.169+a396c860",
+        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.169+a396c860",
+        "@spectrum-web-components/shared": "^0.7.5-alpha.169+a396c860",
         "tslib": "^2.0.0"
     },
-    "gitHead": "d9ef13866edfb98e309914ae7582b807bee5d241"
+    "gitHead": "a396c860b62c2f94b2e9fcd015a4962a6c57af36"
 }

src/checkbox.css.js

@@ -14,13 +14,8 @@ /*
 const styles = css `
-:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+:host{--spectrum-checkbox-text-font-style:var(--spectrum-global-font-style-regular,normal);--spectrum-checkbox-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-checkbox-text-line-height:var(--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small));--spectrum-checkbox-box-border-radius:var(--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25));--spectrum-checkbox-box-border-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-checkbox-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-checkbox-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-checkbox-box-size:var(--spectrum-alias-item-control-2-size-m,var(--spectrum-global-dimension-size-175));--spectrum-checkbox-text-gap:var(--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125));--spectrum-checkbox-label-margin-top:6px;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height);max-width:100%}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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)/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*-1)}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1)}: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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{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));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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));border-width:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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;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}:host{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#box:before{forced-color-adjust:none;border-color: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))}#label{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host{border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-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-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:after,#input.focus-visible+#box:after{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))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{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))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}: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]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #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+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #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))}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{--spectrum-checkbox-emphasized-box-background-color:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-background-color-disabled:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-border-color-disabled:GrayText;--spectrum-checkbox-text-color-disabled:GrayText;--spectrum-checkbox-box-border-color-key-focus:FieldText;--spectrum-checkbox-emphasized-box-border-color:FieldText;--spectrum-checkbox-quiet-box-border-color:FieldText;--spectrum-checkbox-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-quiet-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-quiet-box-border-color-selected:Highlight;--spectrum-checkbox-checkmark-color:HighlightText;--spectrum-checkbox-focus-ring-color-key-focus:Highlight;--spectrum-checkbox-focus-ring-gap-key-focus:var(--spectrum-global-dimension-static-size-25,2px);--spectrum-checkbox-focus-ring-size-key-focus:var(--spectrum-global-dimension-static-size-40,3px);--spectrum-checkbox-box-border-color-error:FieldText;--spectrum-checkbox-box-border-color-error-hover:FieldText;--spectrum-checkbox-box-border-color-error-selected:FieldText;--spectrum-checkbox-text-color-error:FieldText}}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}
+var(--spectrum-global-dimension-static-size-25))*-1)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-checkbox-text-gap)}#label{margin-top:var(--spectrum-checkbox-label-margin-top);font-size:var(--spectrum-checkbox-text-size);font-weight:var(--spectrum-checkbox-text-font-weight);font-style:var(--spectrum-checkbox-text-font-style);line-height:var(--spectrum-checkbox-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{position:relative;margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size);height:var(--spectrum-checkbox-box-size)}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius);border-width:var(--spectrum-checkbox-box-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + 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;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{position:absolute;top:50%;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}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#checkmark,#partialCheckmark{color:var(--spectrum-global-color-gray-75)}#box:before{forced-color-adjust:none;border-color:var(--spectrum-global-color-gray-600);background-color:var(--spectrum-global-color-gray-75)}#label{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-900)}:host{border-color:var(--spectrum-global-color-gray-600)}:host(:hover) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host(:active) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #label{color:var(--spectrum-alias-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-75)}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:after,#input.focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-global-color-blue-600)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-global-color-blue-700)}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-500)}:host([invalid]) #label{color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]:hover) #label{color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #label{color:var(--spectrum-global-color-red-700)}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}}:host{display:inline-flex;vertical-align:top;--spectrum-checkbox-label-margin-top:var(--spectrum-global-dimension-size-75,6px)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-size-100, 8px)/-2);display:none}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-size-100, 8px)/-2)}:host(:empty) label{display:none}
 `;
 export default styles;
 //# sourceMappingURL=checkbox.css.js.map

src/checkbox.css.ts

@@ -14,12 +14,7 @@ /*
 const styles = css`
-:host{align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height,var(--spectrum-global-dimension-size-400));max-width:100%}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+:host{--spectrum-checkbox-text-font-style:var(--spectrum-global-font-style-regular,normal);--spectrum-checkbox-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-checkbox-text-line-height:var(--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small));--spectrum-checkbox-box-border-radius:var(--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25));--spectrum-checkbox-box-border-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-checkbox-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-checkbox-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-checkbox-box-size:var(--spectrum-alias-item-control-2-size-m,var(--spectrum-global-dimension-size-175));--spectrum-checkbox-text-gap:var(--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125));--spectrum-checkbox-label-margin-top:6px;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height);max-width:100%}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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)/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*-1)}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1)}: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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{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));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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));border-width:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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;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}:host{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#box:before{forced-color-adjust:none;border-color: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))}#label{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host{border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-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-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:after,#input.focus-visible+#box:after{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))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{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))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}: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]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #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+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #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))}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{--spectrum-checkbox-emphasized-box-background-color:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-background-color-disabled:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-border-color-disabled:GrayText;--spectrum-checkbox-text-color-disabled:GrayText;--spectrum-checkbox-box-border-color-key-focus:FieldText;--spectrum-checkbox-emphasized-box-border-color:FieldText;--spectrum-checkbox-quiet-box-border-color:FieldText;--spectrum-checkbox-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-quiet-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-quiet-box-border-color-selected:Highlight;--spectrum-checkbox-checkmark-color:HighlightText;--spectrum-checkbox-focus-ring-color-key-focus:Highlight;--spectrum-checkbox-focus-ring-gap-key-focus:var(--spectrum-global-dimension-static-size-25,2px);--spectrum-checkbox-focus-ring-size-key-focus:var(--spectrum-global-dimension-static-size-40,3px);--spectrum-checkbox-box-border-color-error:FieldText;--spectrum-checkbox-box-border-color-error-hover:FieldText;--spectrum-checkbox-box-border-color-error-selected:FieldText;--spectrum-checkbox-text-color-error:FieldText}}:host{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}
+var(--spectrum-global-dimension-static-size-25))*-1)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-checkbox-text-gap)}#label{margin-top:var(--spectrum-checkbox-label-margin-top);font-size:var(--spectrum-checkbox-text-size);font-weight:var(--spectrum-checkbox-text-font-weight);font-style:var(--spectrum-checkbox-text-font-style);line-height:var(--spectrum-checkbox-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{position:relative;margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size);height:var(--spectrum-checkbox-box-size)}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius);border-width:var(--spectrum-checkbox-box-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + 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;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{position:absolute;top:50%;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}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#checkmark,#partialCheckmark{color:var(--spectrum-global-color-gray-75)}#box:before{forced-color-adjust:none;border-color:var(--spectrum-global-color-gray-600);background-color:var(--spectrum-global-color-gray-75)}#label{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-900)}:host{border-color:var(--spectrum-global-color-gray-600)}:host(:hover) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host(:active) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #label{color:var(--spectrum-alias-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-75)}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:after,#input.focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-global-color-blue-600)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-global-color-blue-700)}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-500)}:host([invalid]) #label{color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]:hover) #label{color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #label{color:var(--spectrum-global-color-red-700)}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}}:host{display:inline-flex;vertical-align:top;--spectrum-checkbox-label-margin-top:var(--spectrum-global-dimension-size-75,6px)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-size-100, 8px)/-2);display:none}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-size-100, 8px)/-2)}:host(:empty) label{display:none}
 `;
 export default styles;

src/Checkbox.js

@@ -16,6 +16,6 @@ /*
 import '@spectrum-web-components/icon/sp-icon.js';
-import { CheckmarkSmallIcon, DashSmallIcon, } from '@spectrum-web-components/icons-ui';
+import { Checkmark75Icon, Dash75Icon } from '@spectrum-web-components/icons-ui';
 import checkboxStyles from './checkbox.css.js';
-import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js';
-import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.js';
+import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
+import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
 export class Checkbox extends CheckboxBase {
@@ -35,7 +35,7 @@ constructor() {
             <span id="box">
-                <sp-icon id="checkmark" size="s" class="checkmark-small">
-                    ${CheckmarkSmallIcon({ hidden: true })}
+                <sp-icon id="checkmark" class="spectrum-UIIcon-Checkmark75">
+                    ${Checkmark75Icon()}
                 </sp-icon>
-                <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                    ${DashSmallIcon({ hidden: true })}
+                <sp-icon id="partialCheckmark" class="spectrum-UIIcon-Dash75">
+                    ${Dash75Icon()}
                 </sp-icon>
@@ -42,0 +42,0 @@ </span>

src/Checkbox.ts

@@ -22,9 +22,6 @@ /*
 import '@spectrum-web-components/icon/sp-icon.js';
-import {
-    CheckmarkSmallIcon,
-    DashSmallIcon,
-} from '@spectrum-web-components/icons-ui';
+import { Checkmark75Icon, Dash75Icon } from '@spectrum-web-components/icons-ui';
 import checkboxStyles from './checkbox.css.js';
-import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js';
-import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.js';
+import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
+import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
 
@@ -49,7 +46,7 @@ export class Checkbox extends CheckboxBase {
             <span id="box">
-                <sp-icon id="checkmark" size="s" class="checkmark-small">
-                    ${CheckmarkSmallIcon({ hidden: true })}
+                <sp-icon id="checkmark" class="spectrum-UIIcon-Checkmark75">
+                    ${Checkmark75Icon()}
                 </sp-icon>
-                <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                    ${DashSmallIcon({ hidden: true })}
+                <sp-icon id="partialCheckmark" class="spectrum-UIIcon-Dash75">
+                    ${Dash75Icon()}
                 </sp-icon>
@@ -56,0 +53,0 @@ </span>

src/spectrum-checkbox.css.js

@@ -14,13 +14,8 @@ /*
 const styles = css `
-: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}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+:host{--spectrum-checkbox-text-font-style:var(--spectrum-global-font-style-regular,normal);--spectrum-checkbox-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-checkbox-text-line-height:var(--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small));--spectrum-checkbox-box-border-radius:var(--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25));--spectrum-checkbox-box-border-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-checkbox-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-checkbox-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-checkbox-box-size:var(--spectrum-alias-item-control-2-size-m,var(--spectrum-global-dimension-size-175));--spectrum-checkbox-text-gap:var(--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125));--spectrum-checkbox-label-margin-top:6px;display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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)/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*-1)}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1)}: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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{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));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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));border-width:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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;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}:host{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#box:before{forced-color-adjust:none;border-color: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))}#label{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host{border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-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-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:after,#input.focus-visible+#box:after{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))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{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))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}: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]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #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+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #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))}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{--spectrum-checkbox-emphasized-box-background-color:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-background-color-disabled:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-border-color-disabled:GrayText;--spectrum-checkbox-text-color-disabled:GrayText;--spectrum-checkbox-box-border-color-key-focus:FieldText;--spectrum-checkbox-emphasized-box-border-color:FieldText;--spectrum-checkbox-quiet-box-border-color:FieldText;--spectrum-checkbox-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-quiet-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-quiet-box-border-color-selected:Highlight;--spectrum-checkbox-checkmark-color:HighlightText;--spectrum-checkbox-focus-ring-color-key-focus:Highlight;--spectrum-checkbox-focus-ring-gap-key-focus:var(--spectrum-global-dimension-static-size-25,2px);--spectrum-checkbox-focus-ring-size-key-focus:var(--spectrum-global-dimension-static-size-40,3px);--spectrum-checkbox-box-border-color-error:FieldText;--spectrum-checkbox-box-border-color-error-hover:FieldText;--spectrum-checkbox-box-border-color-error-selected:FieldText;--spectrum-checkbox-text-color-error:FieldText}}
+var(--spectrum-global-dimension-static-size-25))*-1)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-checkbox-text-gap)}#label{margin-top:var(--spectrum-checkbox-label-margin-top);font-size:var(--spectrum-checkbox-text-size);font-weight:var(--spectrum-checkbox-text-font-weight);font-style:var(--spectrum-checkbox-text-font-style);line-height:var(--spectrum-checkbox-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{position:relative;margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size);height:var(--spectrum-checkbox-box-size)}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius);border-width:var(--spectrum-checkbox-box-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + 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;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{position:absolute;top:50%;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}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2);display:none}:host{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#checkmark,#partialCheckmark{color:var(--spectrum-global-color-gray-75)}#box:before{forced-color-adjust:none;border-color:var(--spectrum-global-color-gray-600);background-color:var(--spectrum-global-color-gray-75)}#label{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-900)}:host{border-color:var(--spectrum-global-color-gray-600)}:host(:hover) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host(:active) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #label{color:var(--spectrum-alias-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-75)}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:after,#input.focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-global-color-blue-600)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-global-color-blue-700)}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-500)}:host([invalid]) #label{color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]:hover) #label{color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #label{color:var(--spectrum-global-color-red-700)}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-checkbox.css.js.map

src/spectrum-checkbox.css.ts

@@ -14,12 +14,7 @@ /*
 const styles = css`
-: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}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
+:host{--spectrum-checkbox-text-font-style:var(--spectrum-global-font-style-regular,normal);--spectrum-checkbox-text-font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));--spectrum-checkbox-text-line-height:var(--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small));--spectrum-checkbox-box-border-radius:var(--spectrum-alias-border-radius-small,var(--spectrum-global-dimension-size-25));--spectrum-checkbox-box-border-size:var(--spectrum-alias-border-size-thick,var(--spectrum-global-dimension-static-size-25));--spectrum-checkbox-text-size:var(--spectrum-alias-item-text-size-m,var(--spectrum-global-dimension-font-size-100));--spectrum-checkbox-height:var(--spectrum-alias-item-height-m,var(--spectrum-global-dimension-size-400));--spectrum-checkbox-box-size:var(--spectrum-alias-item-control-2-size-m,var(--spectrum-global-dimension-size-175));--spectrum-checkbox-text-gap:var(--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125));--spectrum-checkbox-label-margin-top:6px;display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-checkbox-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;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)/2)}#input:checked+#box #checkmark{transform:scale(1);opacity:1}#input.focus-visible+#box:after,#input.focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*-1)}#input.focus-visible+#box:after,#input:focus-visible+#box:after{margin:calc(var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*-1)}: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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{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));font-style:var(--spectrum-checkbox-text-font-style,var(--spectrum-global-font-style-regular));line-height:var(--spectrum-checkbox-text-line-height,var(--spectrum-alias-body-text-line-height));transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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));border-width:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick));border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#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;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}:host{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#box:before{forced-color-adjust:none;border-color: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))}#label{color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected,var(--spectrum-global-color-gray-700))}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host{border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #box:before{border-color:var(--spectrum-checkbox-box-border-color-hover,var(--spectrum-global-color-gray-700))}:host(:hover) #label{color:var(--spectrum-checkbox-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #box:before{border-color:var(--spectrum-checkbox-box-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active) #label{color:var(--spectrum-checkbox-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-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-checkbox-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-key-focus,var(--spectrum-global-color-gray-700))}#input.focus-visible+#box:after,#input.focus-visible+#box:after{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))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{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))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-box-border-color-selected-key-focus,var(--spectrum-global-color-gray-800))}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-checkbox-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-selected-down,var(--spectrum-global-color-blue-700))}: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]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #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+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid][indeterminate]) #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]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #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))}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color));outline-style:auto;outline-offset:var(--spectrum-checkbox-focus-ring-gap-key-focus,var(--spectrum-alias-focus-ring-gap));outline-width:var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size))}:host{--spectrum-checkbox-emphasized-box-background-color:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-background-color-disabled:var(--spectrum-alias-background-color-transparent,transparent);--spectrum-checkbox-emphasized-box-border-color-disabled:GrayText;--spectrum-checkbox-text-color-disabled:GrayText;--spectrum-checkbox-box-border-color-key-focus:FieldText;--spectrum-checkbox-emphasized-box-border-color:FieldText;--spectrum-checkbox-quiet-box-border-color:FieldText;--spectrum-checkbox-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected-hover:Highlight;--spectrum-checkbox-quiet-box-border-color-selected-hover:Highlight;--spectrum-checkbox-emphasized-box-border-color-selected:Highlight;--spectrum-checkbox-quiet-box-border-color-selected:Highlight;--spectrum-checkbox-checkmark-color:HighlightText;--spectrum-checkbox-focus-ring-color-key-focus:Highlight;--spectrum-checkbox-focus-ring-gap-key-focus:var(--spectrum-global-dimension-static-size-25,2px);--spectrum-checkbox-focus-ring-size-key-focus:var(--spectrum-global-dimension-static-size-40,3px);--spectrum-checkbox-box-border-color-error:FieldText;--spectrum-checkbox-box-border-color-error-hover:FieldText;--spectrum-checkbox-box-border-color-error-selected:FieldText;--spectrum-checkbox-text-color-error:FieldText}}
+var(--spectrum-global-dimension-static-size-25))*-1)}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size)/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}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-checkbox-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-checkbox-text-gap)}#label{margin-top:var(--spectrum-checkbox-label-margin-top);font-size:var(--spectrum-checkbox-text-size);font-weight:var(--spectrum-checkbox-text-font-weight);font-style:var(--spectrum-checkbox-text-font-style);line-height:var(--spectrum-checkbox-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box{position:relative;margin:calc((var(--spectrum-checkbox-height) - var(--spectrum-checkbox-box-size))/2) 0;flex-grow:0;flex-shrink:0}#box,#box:before{box-sizing:border-box;width:var(--spectrum-checkbox-box-size);height:var(--spectrum-checkbox-box-size)}#box:before{z-index:0;border-radius:var(--spectrum-checkbox-box-border-radius);border-width:var(--spectrum-checkbox-box-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius) + 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;transform:translate(0)}:host([dir=ltr]) #checkmark,:host([dir=ltr]) #partialCheckmark{left:50%}:host([dir=rtl]) #checkmark,:host([dir=rtl]) #partialCheckmark{right:50%}#checkmark,#partialCheckmark{position:absolute;top:50%;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}:host([dir=ltr]) #checkmark{margin-left:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=rtl]) #checkmark{margin-right:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}#checkmark{margin-top:calc(var(--spectrum-global-dimension-static-size-125, 10px)/-2)}:host([dir=ltr]) #partialCheckmark{margin-left:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}:host([dir=rtl]) #partialCheckmark{margin-right:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2)}#partialCheckmark{margin-top:calc(var(--spectrum-global-dimension-static-size-100, 8px)/-2);display:none}:host{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#checkmark,#partialCheckmark{color:var(--spectrum-global-color-gray-75)}#box:before{forced-color-adjust:none;border-color:var(--spectrum-global-color-gray-600);background-color:var(--spectrum-global-color-gray-75)}#label{color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #input:checked+#box:before,:host(:hover[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #input:checked+#box:before,:host(:active[indeterminate]) #box:before{border-color:var(--spectrum-global-color-gray-900)}:host{border-color:var(--spectrum-global-color-gray-600)}:host(:hover) #box:before{border-color:var(--spectrum-global-color-gray-700)}:host(:hover) #label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host(:active) #box:before{border-color:var(--spectrum-global-color-gray-800)}:host(:active) #label{color:var(--spectrum-alias-text-color-down,var(--spectrum-global-color-gray-900))}:host([disabled]) #input+#box:before,:host([disabled]) #input:checked+#box:before{border-color:var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-75)}:host([disabled]) #input:checked~#label,:host([disabled]) #input~#label{forced-color-adjust:none;color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}#input.focus-visible+#box:before,#input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:before,#input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-700)}#input.focus-visible+#box:after,#input.focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input.focus-visible+#box:after,#input:focus-visible+#box:after{box-shadow:0 0 0 var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)) var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color))}#input:checked.focus-visible+#box:before,#input:checked.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input:checked.focus-visible+#box:before,#input:checked:focus-visible+#box:before,:host([indeterminate]) #input.focus-visible+#box:before,:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-gray-800)}#input.focus-visible~#label,#input.focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}#input.focus-visible~#label,#input:focus-visible~#label{color:var(--spectrum-alias-text-color-hover,var(--spectrum-global-color-gray-900))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input.focus-visible+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-blue-500)}:host([emphasized]:hover) #input:checked+#box:before,:host([emphasized][indeterminate]:hover) #box:before{border-color:var(--spectrum-global-color-blue-600)}:host([emphasized]:active) #input:checked+#box:before,:host([emphasized][indeterminate]:active) #box:before{border-color:var(--spectrum-global-color-blue-700)}:host([invalid]) #box:before,:host([invalid]) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-500)}:host([invalid]) #label{color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible+#box:before,:host([invalid]) #input:focus-visible+#box:before,:host([invalid][indeterminate]) #input.focus-visible+#box:before,:host([invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]) #input.focus-visible~#label,:host([invalid]) #input:focus-visible~#label,:host([invalid][indeterminate]) #input.focus-visible~#label,:host([invalid][indeterminate]) #input:focus-visible~#label{color:var(--spectrum-global-color-red-700)}:host([invalid]:hover) #box:before,:host([invalid]:hover) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-600)}:host([invalid]:hover) #label{color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #box:before,:host([invalid]:active) #input:checked+#box:before{border-color:var(--spectrum-global-color-red-700)}:host([invalid]:active) #label{color:var(--spectrum-global-color-red-700)}@media (forced-colors:active){#input.focus-visible+#box,#input.focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}#input.focus-visible+#box,#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color));outline-style:auto;outline-offset:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));outline-width:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25))}}
 `;
 export default styles;

src/spectrum-vars.json

 {
   "custom-properties": {
-    "--spectrum-checkbox-height": "var(--spectrum-global-dimension-size-400)",
-    "--spectrum-checkbox-box-size": "var(--spectrum-global-dimension-size-175)",
+    "--spectrum-alias-body-text-font-weight": "var(--spectrum-global-font-weight-regular)",
+    "--spectrum-alias-component-text-line-height": "var(--spectrum-global-font-line-height-small)",
+    "--spectrum-alias-border-radius-small": "var(--spectrum-global-dimension-size-25)",
+    "--spectrum-alias-border-size-thick": "var(--spectrum-global-dimension-static-size-25)",
+    "--spectrum-alias-item-text-size-m": "var(--spectrum-global-dimension-font-size-100)",
+    "--spectrum-alias-item-height-m": "var(--spectrum-global-dimension-size-400)",
+    "--spectrum-alias-item-control-2-size-m": "var(--spectrum-global-dimension-size-175)",
+    "--spectrum-alias-item-control-gap-m": "var(--spectrum-global-dimension-size-125)",
     "--spectrum-alias-focus-ring-gap": "var(--spectrum-global-dimension-static-size-25)",
-    "--spectrum-checkbox-text-gap": "var(--spectrum-global-dimension-size-125)",
-    "--spectrum-checkbox-text-size": "var(--spectrum-alias-font-size-default)",
-    "--spectrum-checkbox-text-font-weight": "var(--spectrum-global-font-weight-regular)",
-    "--spectrum-checkbox-text-font-style": "var(--spectrum-global-font-style-regular)",
-    "--spectrum-checkbox-text-line-height": "var(--spectrum-alias-body-text-line-height)",
-    "--spectrum-checkbox-box-border-radius": "var(--spectrum-alias-border-radius-small)",
-    "--spectrum-checkbox-box-border-size": "var(--spectrum-alias-border-size-thick)",
-    "--spectrum-icon-checkmark-small-width": "undefined",
-    "--spectrum-icon-checkmark-small-height": "undefined",
-    "--spectrum-checkbox-text-color": "var(--spectrum-alias-text-color)",
-    "--spectrum-checkbox-checkmark-color": "var(--spectrum-global-color-gray-75)",
-    "--spectrum-checkbox-box-border-color": "var(--spectrum-global-color-gray-600)",
-    "--spectrum-checkbox-box-background-color": "var(--spectrum-global-color-gray-75)",
-    "--spectrum-checkbox-box-border-color-selected": "var(--spectrum-global-color-gray-700)",
-    "--spectrum-checkbox-box-border-color-selected-hover": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-checkbox-box-border-color-selected-down": "var(--spectrum-global-color-gray-900)",
-    "--spectrum-checkbox-box-border-color-hover": "var(--spectrum-global-color-gray-700)",
-    "--spectrum-checkbox-text-color-hover": "var(--spectrum-alias-text-color-hover)",
-    "--spectrum-checkbox-box-border-color-down": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-checkbox-text-color-down": "var(--spectrum-alias-text-color-down)",
-    "--spectrum-checkbox-box-border-color-disabled": "var(--spectrum-global-color-gray-400)",
-    "--spectrum-checkbox-box-background-color-disabled": "var(--spectrum-global-color-gray-75)",
-    "--spectrum-checkbox-text-color-disabled": "var(--spectrum-alias-text-color-disabled)",
-    "--spectrum-checkbox-box-border-color-key-focus": "var(--spectrum-global-color-gray-700)",
-    "--spectrum-checkbox-focus-ring-size-key-focus": "var(--spectrum-alias-focus-ring-size)",
-    "--spectrum-checkbox-focus-ring-color-key-focus": "var(--spectrum-alias-focus-ring-color)",
-    "--spectrum-checkbox-box-border-color-selected-key-focus": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-checkbox-text-color-key-focus": "var(--spectrum-alias-text-color-hover)",
-    "--spectrum-checkbox-emphasized-box-border-color-selected": "var(--spectrum-global-color-blue-500)",
-    "--spectrum-checkbox-emphasized-box-border-color-selected-hover": "var(--spectrum-global-color-blue-600)",
-    "--spectrum-checkbox-emphasized-box-border-color-selected-down": "var(--spectrum-global-color-blue-700)",
-    "--spectrum-checkbox-box-border-color-error": "var(--spectrum-global-color-red-500)",
-    "--spectrum-checkbox-text-color-error": "var(--spectrum-global-color-red-600)",
-    "--spectrum-checkbox-box-border-color-error-hover": "var(--spectrum-global-color-red-600)",
-    "--spectrum-checkbox-text-color-error-hover": "var(--spectrum-global-color-red-700)",
-    "--spectrum-checkbox-box-border-color-error-down": "var(--spectrum-global-color-red-700)",
-    "--spectrum-checkbox-text-color-error-down": "var(--spectrum-global-color-red-700)",
-    "--spectrum-checkbox-focus-ring-gap-key-focus": "var(--spectrum-alias-focus-ring-gap)",
-    "--spectrum-alias-background-color-transparent": "transparent"
+    "--spectrum-alias-text-color": "var(--spectrum-global-color-gray-800)",
+    "--spectrum-alias-text-color-hover": "var(--spectrum-global-color-gray-900)",
+    "--spectrum-alias-text-color-down": "var(--spectrum-global-color-gray-900)",
+    "--spectrum-alias-text-color-disabled": "var(--spectrum-global-color-gray-500)",
+    "--spectrum-alias-focus-ring-size": "var(--spectrum-global-dimension-static-size-25)",
+    "--spectrum-alias-focus-ring-color": "var(--spectrum-alias-focus-color)"
   }
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

149526

-9.96%

Lines of code

1267

-9.76%

Number of low quality alerts

3

200%

Dependency changes

• Updated

  @spectrum-web-components/base@^0.1.4-alpha.169+a396c860

• Updated

  @spectrum-web-components/icon@^0.6.4-alpha.169+a396c860

• Updated

  @spectrum-web-components/icons-ui@^0.3.4-alpha.169+a396c860

• Updated

  @spectrum-web-components/shared@^0.7.5-alpha.169+a396c860