@spectrum-web-components/radio 0.7.13-lit-next.0 → 0.7.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2 -2
- package/package.json +5 -5
- package/src/radio.css.js +103 -4
- package/src/radio.css.js.map +1 -1
- package/src/spectrum-radio.css.js +101 -4
- package/src/spectrum-radio.css.js.map +1 -1
- package/stories/radio.stories.js +4 -4
- package/stories/radio.stories.js.map +1 -1
- package/test/radio-group.test.js +0 -405
- package/test/radio-group.test.js.map +0 -1
- package/test/radio.test-vrt.js +0 -15
- package/test/radio.test-vrt.js.map +0 -1
- package/test/radio.test.js +0 -138
- package/test/radio.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -515,7 +515,7 @@
|
|
|
515
515
|
{
|
|
516
516
|
"kind": "variable",
|
|
517
517
|
"name": "styles",
|
|
518
|
-
"default": "css`\n:host{--spectrum-radio-circle-border-size:var(--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-radio-circle-dot-size:var(--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50));--spectrum-radio-text-font-style:var(--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular));--spectrum-radio-text-font-weight:var(--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-radio-text-line-height:var(--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height));--spectrum-radio-text-size:var(--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-radio-height:var(--spectrum-radio-m-height,var(--spectrum-alias-item-height-m));--spectrum-radio-circle-diameter:var(--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m));--spectrum-radio-text-gap:var(--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m));--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(--spectrum-global-dimension-size-50) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75);display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-radio-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(--spectrum-radio-border-width-checked)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:\"\";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}:host{--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75,6px)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`"
|
|
518
|
+
"default": "css`\n:host{--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`"
|
|
519
519
|
}
|
|
520
520
|
],
|
|
521
521
|
"exports": [
|
|
@@ -536,7 +536,7 @@
|
|
|
536
536
|
{
|
|
537
537
|
"kind": "variable",
|
|
538
538
|
"name": "styles",
|
|
539
|
-
"default": "css`\n:host{--spectrum-radio-circle-border-size:var(--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-radio-circle-dot-size:var(--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50));--spectrum-radio-text-font-style:var(--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular));--spectrum-radio-text-font-weight:var(--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-radio-text-line-height:var(--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height));--spectrum-radio-text-size:var(--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-radio-height:var(--spectrum-radio-m-height,var(--spectrum-alias-item-height-m));--spectrum-radio-circle-diameter:var(--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m));--spectrum-radio-text-gap:var(--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m));--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(--spectrum-global-dimension-size-50) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75);display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-radio-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(--spectrum-radio-border-width-checked)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:\"\";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}\n`"
|
|
539
|
+
"default": "css`\n:host{--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}}\n`"
|
|
540
540
|
}
|
|
541
541
|
],
|
|
542
542
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/radio",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.14",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"lit-html"
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@spectrum-web-components/base": "^0.4.
|
|
50
|
-
"@spectrum-web-components/field-group": "^0.3.9
|
|
51
|
-
"@spectrum-web-components/shared": "^0.12.9
|
|
49
|
+
"@spectrum-web-components/base": "^0.4.5",
|
|
50
|
+
"@spectrum-web-components/field-group": "^0.3.9",
|
|
51
|
+
"@spectrum-web-components/shared": "^0.12.9",
|
|
52
52
|
"tslib": "^2.0.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"sideEffects": [
|
|
60
60
|
"./sp-*.js"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "e05c867a446189df8cfbceb201ec18cd502cfe26"
|
|
63
63
|
}
|
package/src/radio.css.js
CHANGED
|
@@ -11,10 +11,109 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-radio-circle-border-size:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:"";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}:host{--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75,6px)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}
|
|
14
|
+
:host{--spectrum-radio-circle-border-size:var(
|
|
15
|
+
--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)
|
|
16
|
+
);--spectrum-radio-circle-dot-size:var(
|
|
17
|
+
--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)
|
|
18
|
+
);--spectrum-radio-text-font-style:var(
|
|
19
|
+
--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)
|
|
20
|
+
);--spectrum-radio-text-font-weight:var(
|
|
21
|
+
--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)
|
|
22
|
+
);--spectrum-radio-text-line-height:var(
|
|
23
|
+
--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
24
|
+
);--spectrum-radio-text-size:var(
|
|
25
|
+
--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)
|
|
26
|
+
);--spectrum-radio-height:var(
|
|
27
|
+
--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)
|
|
28
|
+
);--spectrum-radio-circle-diameter:var(
|
|
29
|
+
--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)
|
|
30
|
+
);--spectrum-radio-text-gap:var(
|
|
31
|
+
--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)
|
|
32
|
+
);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(
|
|
33
|
+
--spectrum-global-dimension-size-50
|
|
34
|
+
) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(
|
|
35
|
+
--spectrum-radio-border-width-checked
|
|
36
|
+
)}:host(.focus-visible) #input+#button:after{margin:calc(var(
|
|
37
|
+
--spectrum-alias-focus-ring-gap,
|
|
38
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
39
|
+
)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(
|
|
40
|
+
--spectrum-alias-focus-ring-gap,
|
|
41
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
42
|
+
)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(
|
|
43
|
+
--spectrum-radio-text-gap
|
|
44
|
+
)}:host([dir=rtl]) #label{margin-right:var(
|
|
45
|
+
--spectrum-radio-text-gap
|
|
46
|
+
)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(
|
|
47
|
+
--spectrum-radio-label-margin-top
|
|
48
|
+
);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:"";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:"";display:block;left:0;margin:var(
|
|
49
|
+
--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
|
|
50
|
+
);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(
|
|
51
|
+
--spectrum-radio-labelbelow-label-margin
|
|
52
|
+
)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(
|
|
53
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)
|
|
54
|
+
)}:host([checked]) #input+#button:before{border-color:var(
|
|
55
|
+
--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)
|
|
56
|
+
)}#label{color:var(
|
|
57
|
+
--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)
|
|
58
|
+
)}#button:before{background-color:var(
|
|
59
|
+
--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)
|
|
60
|
+
);border-color:var(
|
|
61
|
+
--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)
|
|
62
|
+
);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(
|
|
63
|
+
--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)
|
|
64
|
+
);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(
|
|
65
|
+
--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)
|
|
66
|
+
)}:host(:hover) #label{color:var(
|
|
67
|
+
--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)
|
|
68
|
+
)}:host(:active) #button:before{border-color:var(
|
|
69
|
+
--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)
|
|
70
|
+
)}:host(:active[checked]) #input+#button:before{border-color:var(
|
|
71
|
+
--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)
|
|
72
|
+
)}:host(:active) #label{color:var(
|
|
73
|
+
--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)
|
|
74
|
+
)}:host([emphasized][checked]) #input+#button:before{border-color:var(
|
|
75
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)
|
|
76
|
+
)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(
|
|
77
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)
|
|
78
|
+
)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(
|
|
79
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)
|
|
80
|
+
)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(
|
|
81
|
+
--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)
|
|
82
|
+
)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(
|
|
83
|
+
--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)
|
|
84
|
+
)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(
|
|
85
|
+
--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)
|
|
86
|
+
)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(
|
|
87
|
+
--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)
|
|
88
|
+
)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(
|
|
89
|
+
--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)
|
|
90
|
+
)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(
|
|
91
|
+
--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)
|
|
92
|
+
)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(
|
|
93
|
+
--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)
|
|
94
|
+
)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(
|
|
95
|
+
--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)
|
|
96
|
+
)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(
|
|
97
|
+
--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)
|
|
98
|
+
)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(
|
|
99
|
+
--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)
|
|
100
|
+
)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(
|
|
101
|
+
--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)
|
|
102
|
+
) var(
|
|
103
|
+
--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
|
|
104
|
+
);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(
|
|
105
|
+
--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)
|
|
106
|
+
) var(
|
|
107
|
+
--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
|
|
108
|
+
);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(
|
|
109
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)
|
|
110
|
+
)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(
|
|
111
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)
|
|
112
|
+
)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(
|
|
113
|
+
--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)
|
|
114
|
+
)}}:host{--spectrum-radio-label-margin-top:var(
|
|
115
|
+
--spectrum-global-dimension-size-75,6px
|
|
116
|
+
)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}
|
|
18
117
|
`;
|
|
19
118
|
export default styles;
|
|
20
119
|
//# sourceMappingURL=radio.css.js.map
|
package/src/radio.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.css.js","sourceRoot":"","sources":["radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-border-size:var(--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-radio-circle-dot-size:var(--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50));--spectrum-radio-text-font-style:var(--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular));--spectrum-radio-text-font-weight:var(--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-radio-text-line-height:var(--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height));--spectrum-radio-text-size:var(--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-radio-height:var(--spectrum-radio-m-height,var(--spectrum-alias-item-height-m));--spectrum-radio-circle-diameter:var(--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m));--spectrum-radio-text-gap:var(--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m));--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(--spectrum-global-dimension-size-50) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75);display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-radio-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(--spectrum-radio-border-width-checked)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:\"\";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}:host{--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75,6px)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"radio.css.js","sourceRoot":"","sources":["radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"]}
|
|
@@ -11,10 +11,107 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-radio-circle-border-size:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:"";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:"";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}
|
|
14
|
+
:host{--spectrum-radio-circle-border-size:var(
|
|
15
|
+
--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)
|
|
16
|
+
);--spectrum-radio-circle-dot-size:var(
|
|
17
|
+
--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)
|
|
18
|
+
);--spectrum-radio-text-font-style:var(
|
|
19
|
+
--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)
|
|
20
|
+
);--spectrum-radio-text-font-weight:var(
|
|
21
|
+
--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)
|
|
22
|
+
);--spectrum-radio-text-line-height:var(
|
|
23
|
+
--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
24
|
+
);--spectrum-radio-text-size:var(
|
|
25
|
+
--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)
|
|
26
|
+
);--spectrum-radio-height:var(
|
|
27
|
+
--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)
|
|
28
|
+
);--spectrum-radio-circle-diameter:var(
|
|
29
|
+
--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)
|
|
30
|
+
);--spectrum-radio-text-gap:var(
|
|
31
|
+
--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)
|
|
32
|
+
);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(
|
|
33
|
+
--spectrum-global-dimension-size-50
|
|
34
|
+
) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(
|
|
35
|
+
--spectrum-radio-border-width-checked
|
|
36
|
+
)}:host(.focus-visible) #input+#button:after{margin:calc(var(
|
|
37
|
+
--spectrum-alias-focus-ring-gap,
|
|
38
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
39
|
+
)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(
|
|
40
|
+
--spectrum-alias-focus-ring-gap,
|
|
41
|
+
var(--spectrum-global-dimension-static-size-25)
|
|
42
|
+
)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(
|
|
43
|
+
--spectrum-radio-text-gap
|
|
44
|
+
)}:host([dir=rtl]) #label{margin-right:var(
|
|
45
|
+
--spectrum-radio-text-gap
|
|
46
|
+
)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(
|
|
47
|
+
--spectrum-radio-label-margin-top
|
|
48
|
+
);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:"";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:"";display:block;left:0;margin:var(
|
|
49
|
+
--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
|
|
50
|
+
);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(
|
|
51
|
+
--spectrum-radio-labelbelow-label-margin
|
|
52
|
+
)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(
|
|
53
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)
|
|
54
|
+
)}:host([checked]) #input+#button:before{border-color:var(
|
|
55
|
+
--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)
|
|
56
|
+
)}#label{color:var(
|
|
57
|
+
--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)
|
|
58
|
+
)}#button:before{background-color:var(
|
|
59
|
+
--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)
|
|
60
|
+
);border-color:var(
|
|
61
|
+
--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)
|
|
62
|
+
);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(
|
|
63
|
+
--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)
|
|
64
|
+
);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(
|
|
65
|
+
--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)
|
|
66
|
+
)}:host(:hover) #label{color:var(
|
|
67
|
+
--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)
|
|
68
|
+
)}:host(:active) #button:before{border-color:var(
|
|
69
|
+
--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)
|
|
70
|
+
)}:host(:active[checked]) #input+#button:before{border-color:var(
|
|
71
|
+
--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)
|
|
72
|
+
)}:host(:active) #label{color:var(
|
|
73
|
+
--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)
|
|
74
|
+
)}:host([emphasized][checked]) #input+#button:before{border-color:var(
|
|
75
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)
|
|
76
|
+
)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(
|
|
77
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)
|
|
78
|
+
)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(
|
|
79
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)
|
|
80
|
+
)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(
|
|
81
|
+
--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)
|
|
82
|
+
)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(
|
|
83
|
+
--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)
|
|
84
|
+
)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(
|
|
85
|
+
--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)
|
|
86
|
+
)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(
|
|
87
|
+
--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)
|
|
88
|
+
)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(
|
|
89
|
+
--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)
|
|
90
|
+
)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(
|
|
91
|
+
--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)
|
|
92
|
+
)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(
|
|
93
|
+
--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)
|
|
94
|
+
)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(
|
|
95
|
+
--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)
|
|
96
|
+
)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(
|
|
97
|
+
--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)
|
|
98
|
+
)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(
|
|
99
|
+
--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)
|
|
100
|
+
)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(
|
|
101
|
+
--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)
|
|
102
|
+
) var(
|
|
103
|
+
--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
|
|
104
|
+
);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(
|
|
105
|
+
--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)
|
|
106
|
+
) var(
|
|
107
|
+
--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
|
|
108
|
+
);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(
|
|
109
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)
|
|
110
|
+
)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(
|
|
111
|
+
--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)
|
|
112
|
+
)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(
|
|
113
|
+
--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)
|
|
114
|
+
)}}
|
|
18
115
|
`;
|
|
19
116
|
export default styles;
|
|
20
117
|
//# sourceMappingURL=spectrum-radio.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-radio.css.js","sourceRoot":"","sources":["spectrum-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-border-size:var(--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-radio-circle-dot-size:var(--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50));--spectrum-radio-text-font-style:var(--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular));--spectrum-radio-text-font-weight:var(--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-radio-text-line-height:var(--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height));--spectrum-radio-text-size:var(--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-radio-height:var(--spectrum-radio-m-height,var(--spectrum-alias-item-height-m));--spectrum-radio-circle-diameter:var(--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m));--spectrum-radio-text-gap:var(--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m));--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(--spectrum-global-dimension-size-50) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75);display:inline-flex;align-items:flex-start;position:relative;min-height:var(--spectrum-radio-height);max-width:100%;vertical-align:top}#input{font-family:inherit;font-size:100%;line-height:1.15;margin:0;overflow:visible;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;opacity:.0001;z-index:1;cursor:pointer}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(--spectrum-radio-border-width-checked)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(.focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25))*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(--spectrum-radio-text-gap)}:host([dir=rtl]) #label{margin-right:var(--spectrum-radio-text-gap)}#label{margin-top:var(--spectrum-radio-label-margin-top);font-size:var(--spectrum-radio-text-size);font-weight:var(--spectrum-radio-text-font-weight);font-style:var(--spectrum-radio-text-font-style);line-height:var(--spectrum-radio-text-line-height);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{position:relative;box-sizing:border-box;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;flex-grow:0;flex-shrink:0}#button:before{display:block;z-index:0;content:\"\";box-sizing:border-box;position:absolute;width:var(--spectrum-radio-circle-diameter);height:var(--spectrum-radio-circle-diameter);border-radius:var(--spectrum-radio-radius);border-width:var(--spectrum-radio-circle-border-size);border-style:solid;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button:after{border-radius:100%;content:\"\";display:block;position:absolute;left:0;right:0;bottom:0;top:0;margin:var(--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25));transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){display:inline-flex;flex-direction:column;align-items:center;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(--spectrum-radio-labelbelow-label-margin)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}#label{color:var(--spectrum-radio-m-text-color,var(--spectrum-alias-text-color))}#button:before{forced-color-adjust:none;background-color:var(--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600))}:host(:hover) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700));box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800))}:host(:hover) #label{color:var(--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:active) #button:before{border-color:var(--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800))}:host(:active[checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900))}:host(:active) #label{color:var(--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down))}:host([emphasized][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600))}:host([emphasized][checked]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700))}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600))}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700))}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500))}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{forced-color-adjust:none;box-shadow:0 0 0 var(--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600))}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700))}}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"spectrum-radio.css.js","sourceRoot":"","sources":["spectrum-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-alias-item-height-m)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-item-control-2-size-m)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-alias-item-control-gap-m)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:.0001;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-text-color)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-global-color-gray-600)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-global-color-gray-700)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-global-color-gray-800)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-global-color-gray-900)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-global-color-blue-600)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-global-color-blue-700)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-global-color-red-700)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-global-color-red-600)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-emphasized-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before,:host([emphasized].focus-visible) #input+#button:before,:host([emphasized]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before,:host([emphasized]:focus-visible) #input+#button:before,:host([emphasized]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-global-color-gray-700)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after,:host([emphasized].focus-visible) #input+#button:after,:host([emphasized]:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before,:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(--spectrum-global-color-blue-600)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-disabled:GrayText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-disabled:GrayText;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-global-color-gray-700)\n)}}\n`;\nexport default styles;"]}
|