🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@spectrum-web-components/checkbox

Package Overview
Dependencies
Maintainers
5
Versions
390
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

0.5.5-alpha.60
to
0.5.5-alpha.84

19

package.json

@@ -21,6 +21,7 @@ {

],
"version": "0.5.5-alpha.60+a478c2c4",
"version": "0.5.5-alpha.84+1680fb01",
"description": "",
"main": "src/index.js",
"module": "src/index.js",
"main": "./src/index.js",
"module": "./src/index.js",
"types": "./src/index.d.ts",
"type": "module",

@@ -53,12 +54,12 @@ "exports": {

"@spectrum-css/checkbox": "^3.0.0-beta.5",
"@spectrum-web-components/field-group": "^0.0.2-alpha.1214+a478c2c4"
"@spectrum-web-components/field-group": "^0.0.2-alpha.1238+1680fb01"
},
"dependencies": {
"@spectrum-web-components/base": "^0.1.4-alpha.60+a478c2c4",
"@spectrum-web-components/icon": "^0.6.4-alpha.60+a478c2c4",
"@spectrum-web-components/icons-ui": "^0.3.4-alpha.60+a478c2c4",
"@spectrum-web-components/shared": "^0.7.5-alpha.60+a478c2c4",
"@spectrum-web-components/base": "^0.1.4-alpha.84+1680fb01",
"@spectrum-web-components/icon": "^0.6.4-alpha.84+1680fb01",
"@spectrum-web-components/icons-ui": "^0.3.4-alpha.84+1680fb01",
"@spectrum-web-components/shared": "^0.7.5-alpha.84+1680fb01",
"tslib": "^2.0.0"
},
"gitHead": "a478c2c484b45e88c5d8b5cc64a255e31d0a3829"
"gitHead": "1680fb01795050191c13f5c05f554d923ff850ae"
}

12

src/checkbox.css.js

@@ -14,13 +14,13 @@ /*

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%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;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,
: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,
var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#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);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
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));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
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}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-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(: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: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))}#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{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}
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}
`;
export default styles;
//# sourceMappingURL=checkbox.css.js.map

12

src/checkbox.css.ts

@@ -14,12 +14,12 @@ /*

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%;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;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,
: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,
var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#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);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
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));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
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}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-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(: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: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))}#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{display:inline-flex;vertical-align:top}:host(:empty) label{display:none}:host([disabled][checked]) #input+#box:before,:host([disabled][checked]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-emphasized-box-border-color-disabled,var(--spectrum-global-color-gray-400));background-color:var(--spectrum-checkbox-emphasized-box-background-color-disabled,var(--spectrum-global-color-gray-75))}:host([invalid][indeterminate]) #box:before,:host([invalid][indeterminate]) #input:checked+#box:before{border-color:var(--spectrum-checkbox-box-border-color-error,var(--spectrum-global-color-red-500))}
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}
`;
export default styles;

12

src/spectrum-checkbox.css.js

@@ -14,13 +14,13 @@ /*

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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;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,
: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,
var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#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);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
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));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
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}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-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(: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: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))}#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))}
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}}
`;
export default styles;
//# sourceMappingURL=spectrum-checkbox.css.js.map

12

src/spectrum-checkbox.css.ts

@@ -14,12 +14,12 @@ /*

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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color));border-color:var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600))}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;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,
: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,
var(--spectrum-global-dimension-static-size-25))*-1);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}#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);box-shadow:0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-checkbox-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-width:calc(var(--spectrum-checkbox-box-size,
var(--spectrum-global-dimension-size-175))/2)}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{display:block;transform:scale(1);opacity:1}:host([dir=ltr]) #label{text-align:left;margin-left:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) #label{text-align:right;margin-right:var(--spectrum-checkbox-text-gap,var(--spectrum-global-dimension-size-125))}#label{margin-top:var(--spectrum-global-dimension-size-65);font-size:var(--spectrum-checkbox-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-checkbox-text-font-weight,var(--spectrum-global-font-weight-regular));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;color:var(--spectrum-checkbox-text-color,var(--spectrum-alias-text-color))}#box{position:relative;margin:calc((var(--spectrum-checkbox-height,
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));transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;forced-color-adjust:none;border:var(--spectrum-checkbox-box-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-checkbox-box-border-color,var(--spectrum-global-color-gray-600));background-color:var(--spectrum-checkbox-box-background-color,var(--spectrum-global-color-gray-75))}#box:after,#box:before{display:block;content:"";position:absolute}#box:after{border-radius:calc(var(--spectrum-checkbox-box-border-radius,
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}#checkmark,#partialCheckmark{color:var(--spectrum-checkbox-checkmark-color,var(--spectrum-global-color-gray-75))}#input:checked+#box:before,:host([indeterminate]) #box:before{border-color:var(--spectrum-checkbox-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(: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: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))}#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))}
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}}
`;
export default styles;
src/checkbox.css

Sorry, the diff of this file is not supported yet

src/checkbox.css.js.map

Sorry, the diff of this file is not supported yet

src/spectrum-checkbox.css

Sorry, the diff of this file is not supported yet

src/spectrum-checkbox.css.js.map

Sorry, the diff of this file is not supported yet