@spectrum-web-components/radio 0.9.16-devmode2.0 → 0.11.0

package/src/spectrum-radio.css.js

@@ -1,116 +1,222 @@
-import { css } from "@spectrum-web-components/base";
-const styles = css`
-:host{--spectrum-radio-circle-dot-size:var(
---spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)
-);--spectrum-radio-circle-diameter:var(
---spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)
-);--spectrum-radio-circle-border-size:var(
---spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)
-);--spectrum-radio-text-size:var(
---spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)
-);--spectrum-radio-text-gap:var(
---spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)
-);--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-height:var(
---spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)
-);--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)}: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:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}: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,
-var(--spectrum-global-dimension-static-size-25)
-)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(
---spectrum-alias-focus-ring-gap,
-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{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(
---spectrum-radio-label-margin-top
-);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(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---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-alias-toggle-background-color-emphasized-selected-hover)
-)}:host([checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)
-)}#label{color:var(
---spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)
-)}#button:before{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-alias-toggle-border-color-default)
-);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(
---spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)
-);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)
+"use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
+:host{--spectrum-radio-neutral-content-color:var(
+--spectrum-neutral-content-color-default
+);--spectrum-radio-neutral-content-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-radio-neutral-content-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-radio-neutral-content-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-radio-focus-ring-thickness:var(--spectrum-focus-ring-thickness);--spectrum-radio-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-radio-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-radio-disabled-content-color:var(
+--spectrum-disabled-content-color
+);--spectrum-radio-disabled-border-color:var(--spectrum-gray-400);--spectrum-radio-emphasized-accent-color:var(--spectrum-accent-color-900);--spectrum-radio-emphasized-accent-color-hover:var(
+--spectrum-accent-color-1000
+);--spectrum-radio-emphasized-accent-color-down:var(
+--spectrum-accent-color-1100
+);--spectrum-radio-emphasized-accent-color-focus:var(
+--spectrum-accent-color-1000
+);--spectrum-radio-border-width:var(--spectrum-border-width-200);--spectrum-radio-button-background-color:var(--spectrum-gray-75);--spectrum-radio-line-height:var(--spectrum-line-height-100);--spectrum-radio-animation-duration:var(--spectrum-animation-duration-100);--spectrum-radio-height:var(--spectrum-component-height-100);--spectrum-radio-button-control-size:var(
+--spectrum-radio-button-control-size-medium
+);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-100);--spectrum-radio-label-top-to-text:var(
+--spectrum-component-top-to-text-100
+);--spectrum-radio-label-bottom-to-text:var(
+--spectrum-component-bottom-to-text-100
+);--spectrum-radio-button-top-to-control:var(
+--spectrum-radio-button-top-to-control-medium
+);--spectrum-radio-font-size:var(--spectrum-font-size-100)}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--spectrum-radio-cjk-line-height:var(
+--spectrum-CJK-line-height-100
+)}:host([size=s]){--spectrum-radio-height:var(
+--spectrum-component-height-75
+);--spectrum-radio-button-control-size:var(
+--spectrum-radio-button-control-size-small
+);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-75);--spectrum-radio-label-top-to-text:var(
+--spectrum-component-top-to-text-75
+);--spectrum-radio-label-bottom-to-text:var(
+--spectrum-component-bottom-to-text-75
+);--spectrum-radio-button-top-to-control:var(
+--spectrum-radio-button-top-to-control-small
+);--spectrum-radio-font-size:var(--spectrum-font-size-75)}:host([size=m]){--spectrum-radio-height:var(
+--spectrum-component-height-100
+);--spectrum-radio-button-control-size:var(
+--spectrum-radio-button-control-size-medium
+);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-100);--spectrum-radio-label-top-to-text:var(
+--spectrum-component-top-to-text-100
+);--spectrum-radio-label-bottom-to-text:var(
+--spectrum-component-bottom-to-text-100
+);--spectrum-radio-button-top-to-control:var(
+--spectrum-radio-button-top-to-control-medium
+);--spectrum-radio-font-size:var(--spectrum-font-size-100)}:host([size=l]){--spectrum-radio-height:var(
+--spectrum-component-height-200
+);--spectrum-radio-button-control-size:var(
+--spectrum-radio-button-control-size-large
+);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-200);--spectrum-radio-label-top-to-text:var(
+--spectrum-component-top-to-text-200
+);--spectrum-radio-label-bottom-to-text:var(
+--spectrum-component-bottom-to-text-200
+);--spectrum-radio-button-top-to-control:var(
+--spectrum-radio-button-top-to-control-large
+);--spectrum-radio-font-size:var(--spectrum-font-size-200)}:host([size=xl]){--spectrum-radio-height:var(
+--spectrum-component-height-300
+);--spectrum-radio-button-control-size:var(
+--spectrum-radio-button-control-size-extra-large
+);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-300);--spectrum-radio-label-top-to-text:var(
+--spectrum-component-top-to-text-300
+);--spectrum-radio-label-bottom-to-text:var(
+--spectrum-component-bottom-to-text-300
+);--spectrum-radio-button-top-to-control:var(
+--spectrum-radio-button-top-to-control-extra-large
+);--spectrum-radio-font-size:var(--spectrum-font-size-300)}@media (forced-colors:active){:host{--highcontrast-radio-neutral-content-color:CanvasText;--highcontrast-radio-neutral-content-color-hover:CanvasText;--highcontrast-radio-neutral-content-color-down:CanvasText;--highcontrast-radio-neutral-content-color-focus:CanvasText;--highcontrast-radio-button-border-color-default:ButtonText;--highcontrast-radio-button-border-color-hover:Highlight;--highcontrast-radio-button-border-color-down:ButtonText;--highcontrast-radio-button-border-color-focus:Highlight;--highcontrast-radio-emphasized-accent-color:ButtonText;--highcontrast-radio-emphasized-accent-color-hover:Highlight;--highcontrast-radio-emphasized-accent-color-down:ButtonText;--highcontrast-radio-emphasized-accent-color-focus:Highlight;--highcontrast-radio-button-checked-border-color-default:Highlight;--highcontrast-radio-button-checked-border-color-hover:Highlight;--highcontrast-radio-button-checked-border-color-down:Highlight;--highcontrast-radio-button-checked-border-color-focus:Highlight;--highcontrast-radio-disabled-content-color:GrayText;--highcontrast-radio-disabled-border-color:GrayText;--highcontrast-radio-focus-ring-color:CanvasText}#button:after{forced-color-adjust:none}}:host{align-items:flex-start;display:inline-flex;max-inline-size:100%;min-block-size:var(--mod-radio-height,var(--spectrum-radio-height));position:relative;vertical-align:top}:host(:hover) #button:before{border-color:var(
+--highcontrast-radio-button-border-color-hover,var(
+--mod-radio-button-border-color-hover,var(--spectrum-radio-button-border-color-hover)
+)
+)}:host(:hover[checked]) #input+#button:before{border-color:var(
+--highcontrast-radio-button-checked-border-color-hover,var(
+--mod-radio-button-checked-border-color-hover,var(--spectrum-radio-button-checked-border-color-hover)
+)
 )}:host(:hover) #label{color:var(
---spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)
+--highcontrast-radio-neutral-content-color-hover,var(
+--mod-radio-neutral-content-color-hover,var(--spectrum-radio-neutral-content-color-hover)
+)
 )}:host(:active) #button:before{border-color:var(
---spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)
+--highcontrast-radio-button-border-color-down,var(
+--mod-radio-button-border-color-down,var(--spectrum-radio-button-border-color-down)
+)
 )}:host(:active[checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)
+--highcontrast-radio-button-checked-border-color-down,var(
+--mod-radio-button-checked-border-color-down,var(--spectrum-radio-button-checked-border-color-down)
+)
 )}:host(:active) #label{color:var(
---spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)
-)}:host([emphasized][checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-emphasized-circle-border-color-selected,var(
---spectrum-alias-toggle-background-color-emphasized-selected-default
+--highcontrast-radio-neutral-content-color-down,var(
+--mod-radio-neutral-content-color-down,var(--spectrum-radio-neutral-content-color-down)
+)
+)}:host(:focus) #button:before{border-color:var(
+--highcontrast-radio-button-border-color-focus,var(
+--mod-radio-button-border-color-focus,var(--spectrum-radio-button-border-color-focus)
+)
+)}:host(:focus) #button:after{border-color:var(
+--highcontrast-radio-focus-ring-color,var(
+--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)
+)
+);border-style:solid;border-width:var(
+--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)
+);height:calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-ring-gap)*2);width:calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-ring-gap)*2)}:host(:focus[checked]) #input+#button:before{border-color:var(
+--highcontrast-radio-button-checked-border-color-focus,var(
+--mod-radio-button-checked-border-color-focus,var(--spectrum-radio-button-checked-border-color-focus)
+)
+)}:host(:focus) #label{color:var(
+--highcontrast-radio-neutral-content-color-focus,var(
+--mod-radio-neutral-content-color-focus,var(--spectrum-radio-neutral-content-color-focus)
+)
+)}:host([invalid]) #label{color:var(
+--highcontrast-radio-neutral-content-color,var(
+--mod-radio-neutral-content-color,var(--spectrum-radio-neutral-content-color)
+)
+)}:host(.is-readOnly) #input:read-only{cursor:auto}:host(.is-readOnly) #button{clip:rect(1px,1px,1px,1px);bottom:100%;clip-path:inset(50%);position:fixed;right:100%}:host(.is-readOnly),:host(.is-readOnly) #label,:host(.is-readOnly[checked][disabled]) #input~#label,:host(.is-readOnly[disabled]) #input~#label{color:inherit;margin-inline-start:auto}:host([emphasized][checked]) #input+#button:before{border-color:var(
+--highcontrast-radio-emphasized-accent-color,var(
+--mod-radio-emphasized-accent-color,var(--spectrum-radio-emphasized-accent-color)
 )
 )}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(
---spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)
+--highcontrast-radio-emphasized-accent-color-hover,var(
+--mod-radio-emphasized-accent-color-hover,var(--spectrum-radio-emphasized-accent-color-hover)
+)
 )}:host([emphasized][checked]:active) #input+#button:before{border-color:var(
---spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)
-)}: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-alias-component-text-color-error-hover)
-)}: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-alias-component-text-color-error-hover)
-)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(
---spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)
-)}: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-alias-component-text-color-error-default)
+--highcontrast-radio-emphasized-accent-color-down,var(
+--mod-radio-emphasized-accent-color-down,var(--spectrum-radio-emphasized-accent-color-down)
+)
+)}:host([emphasized][checked]:focus) #input+#button:before{border-color:var(
+--highcontrast-radio-emphasized-accent-color-focus,var(
+--mod-radio-emphasized-accent-color-focus,var(--spectrum-radio-emphasized-accent-color-focus)
+)
 )}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)
+--highcontrast-radio-disabled-border-color,var(
+--mod-radio-disabled-border-color,var(--spectrum-radio-disabled-border-color)
+)
 )}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(
---spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
-)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
-)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)
-)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(
---spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
-) var(
---spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
-);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(
---spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)
-) var(
---spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)
-);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
-)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)
-)}: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-alias-toggle-background-color-emphasized-selected-key-focus
-)
-)}: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-alias-toggle-background-color-emphasized-selected-key-focus
-)
-)}@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-disabled:GrayText;--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-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--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-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;--spectrum-radio-m-text-color-disabled:GrayText}:host([invalid][checked]) #input+#button:before{border-color:var(
---spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)
-)}}
-`;
-export default styles;
+--highcontrast-radio-disabled-content-color,var(
+--mod-radio-disabled-content-color,var(--spectrum-radio-disabled-content-color)
+)
+)}#input{block-size:100%;box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;inline-size:100%;line-height:var(
+--mod-radio-line-height,var(--spectrum-radio-line-height)
+);margin:0;opacity:0;overflow:visible;padding:0;position:absolute;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-color:var(
+--highcontrast-radio-button-checked-border-color-default,var(
+--mod-radio-button-checked-border-color-default,var(--spectrum-radio-button-checked-border-color-default)
+)
+);border-width:calc(var(--spectrum-radio-button-control-size)/2 - var(--spectrum-radio-button-selection-indicator)/2)}:host(.focus-visible) #input+#button:after{border-color:var(
+--highcontrast-radio-focus-ring-color,var(
+--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)
+)
+);border-width:var(
+--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)
+)}:host(:focus-visible) #input+#button:after{border-color:var(
+--highcontrast-radio-focus-ring-color,var(
+--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)
+)
+);border-width:var(
+--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)
+)}#label{color:var(
+--highcontrast-radio-neutral-content-color,var(
+--mod-radio-neutral-content-color,var(--spectrum-radio-neutral-content-color)
+)
+);font-size:var(--mod-radio-font-size,var(--spectrum-radio-font-size));line-height:var(
+--mod-radio-line-height,var(--spectrum-radio-line-height)
+);margin-block-end:var(--spectrum-radio-label-bottom-to-text);margin-block-start:var(--spectrum-radio-label-top-to-text);margin-inline-start:var(
+--mod-radio-text-to-control,var(--spectrum-radio-text-to-control)
+);text-align:start;transition:color var(
+--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)
+) ease-in-out}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(
+--spectrum-radio-cjk-line-height
+)}#button{block-size:var(
+--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)
+);box-sizing:border-box;flex-grow:0;flex-shrink:0;inline-size:var(
+--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)
+);margin-block-start:var(
+--mod-radio-button-top-to-control,var(--spectrum-radio-button-top-to-control)
+);position:relative}#button:before{background-color:var(
+--highcontrast-radio-button-background-color,var(
+--mod-radio-button-background-color,var(--spectrum-radio-button-background-color)
+)
+);border-color:var(
+--highcontrast-radio-button-border-color-default,var(
+--mod-radio-button-border-color-default,var(--spectrum-radio-button-border-color-default)
+)
+);border-radius:50%;border-style:solid;border-width:var(
+--mod-radio-border-width,var(--spectrum-radio-border-width)
+);box-sizing:border-box;content:"";display:block;height:var(
+--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)
+);position:absolute;transition:border var(
+--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)
+) ease-in-out,box-shadow var(
+--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)
+) ease-in-out;width:var(
+--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)
+);z-index:0}#button:after{border-radius:50%;content:"";display:block;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);transition:opacity var(
+--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)
+) ease-out,margin var(
+--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)
+) ease-out}:host{--spectrum-radio-button-border-color-default:var(
+--system-spectrum-radio-button-border-color-default
+);--spectrum-radio-button-border-color-hover:var(
+--system-spectrum-radio-button-border-color-hover
+);--spectrum-radio-button-border-color-down:var(
+--system-spectrum-radio-button-border-color-down
+);--spectrum-radio-button-border-color-focus:var(
+--system-spectrum-radio-button-border-color-focus
+);--spectrum-radio-button-checked-border-color-default:var(
+--system-spectrum-radio-button-checked-border-color-default
+);--spectrum-radio-button-checked-border-color-hover:var(
+--system-spectrum-radio-button-checked-border-color-hover
+);--spectrum-radio-button-checked-border-color-down:var(
+--system-spectrum-radio-button-checked-border-color-down
+);--spectrum-radio-button-checked-border-color-focus:var(
+--system-spectrum-radio-button-checked-border-color-focus
+)}:host([emphasized]){--spectrum-radio-button-checked-border-color-default:var(
+--system-spectrum-radio-emphasized-button-checked-border-color-default
+);--spectrum-radio-button-checked-border-color-hover:var(
+--system-spectrum-radio-emphasized-button-checked-border-color-hover
+);--spectrum-radio-button-checked-border-color-down:var(
+--system-spectrum-radio-emphasized-button-checked-border-color-down
+);--spectrum-radio-button-checked-border-color-focus:var(
+--system-spectrum-radio-emphasized-button-checked-border-color-focus
+)}
+`;export default r;
 //# sourceMappingURL=spectrum-radio.css.js.map

package/src/spectrum-radio.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-radio.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2022 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-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\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-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\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:0;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-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\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-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\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-alias-component-text-color-error-hover)\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-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\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-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-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-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,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{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,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{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}: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(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}: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(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\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-disabled:GrayText;--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-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--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-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;--spectrum-radio-m-text-color-disabled:GrayText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}\n`;\nexport default styles;"],
-  "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiHf,eAAe;",
-  "names": []
+  "sourcesContent": ["/*\nCopyright 2022 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-neutral-content-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-radio-neutral-content-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-radio-neutral-content-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-radio-neutral-content-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-radio-focus-ring-thickness:var(--spectrum-focus-ring-thickness);--spectrum-radio-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-radio-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-radio-disabled-content-color:var(\n--spectrum-disabled-content-color\n);--spectrum-radio-disabled-border-color:var(--spectrum-gray-400);--spectrum-radio-emphasized-accent-color:var(--spectrum-accent-color-900);--spectrum-radio-emphasized-accent-color-hover:var(\n--spectrum-accent-color-1000\n);--spectrum-radio-emphasized-accent-color-down:var(\n--spectrum-accent-color-1100\n);--spectrum-radio-emphasized-accent-color-focus:var(\n--spectrum-accent-color-1000\n);--spectrum-radio-border-width:var(--spectrum-border-width-200);--spectrum-radio-button-background-color:var(--spectrum-gray-75);--spectrum-radio-line-height:var(--spectrum-line-height-100);--spectrum-radio-animation-duration:var(--spectrum-animation-duration-100);--spectrum-radio-height:var(--spectrum-component-height-100);--spectrum-radio-button-control-size:var(\n--spectrum-radio-button-control-size-medium\n);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-100);--spectrum-radio-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-radio-label-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-radio-button-top-to-control:var(\n--spectrum-radio-button-top-to-control-medium\n);--spectrum-radio-font-size:var(--spectrum-font-size-100)}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--spectrum-radio-cjk-line-height:var(\n--spectrum-CJK-line-height-100\n)}:host([size=s]){--spectrum-radio-height:var(\n--spectrum-component-height-75\n);--spectrum-radio-button-control-size:var(\n--spectrum-radio-button-control-size-small\n);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-75);--spectrum-radio-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-radio-label-bottom-to-text:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-radio-button-top-to-control:var(\n--spectrum-radio-button-top-to-control-small\n);--spectrum-radio-font-size:var(--spectrum-font-size-75)}:host([size=m]){--spectrum-radio-height:var(\n--spectrum-component-height-100\n);--spectrum-radio-button-control-size:var(\n--spectrum-radio-button-control-size-medium\n);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-100);--spectrum-radio-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-radio-label-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-radio-button-top-to-control:var(\n--spectrum-radio-button-top-to-control-medium\n);--spectrum-radio-font-size:var(--spectrum-font-size-100)}:host([size=l]){--spectrum-radio-height:var(\n--spectrum-component-height-200\n);--spectrum-radio-button-control-size:var(\n--spectrum-radio-button-control-size-large\n);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-200);--spectrum-radio-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-radio-label-bottom-to-text:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-radio-button-top-to-control:var(\n--spectrum-radio-button-top-to-control-large\n);--spectrum-radio-font-size:var(--spectrum-font-size-200)}:host([size=xl]){--spectrum-radio-height:var(\n--spectrum-component-height-300\n);--spectrum-radio-button-control-size:var(\n--spectrum-radio-button-control-size-extra-large\n);--spectrum-radio-text-to-control:var(--spectrum-text-to-control-300);--spectrum-radio-label-top-to-text:var(\n--spectrum-component-top-to-text-300\n);--spectrum-radio-label-bottom-to-text:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-radio-button-top-to-control:var(\n--spectrum-radio-button-top-to-control-extra-large\n);--spectrum-radio-font-size:var(--spectrum-font-size-300)}@media (forced-colors:active){:host{--highcontrast-radio-neutral-content-color:CanvasText;--highcontrast-radio-neutral-content-color-hover:CanvasText;--highcontrast-radio-neutral-content-color-down:CanvasText;--highcontrast-radio-neutral-content-color-focus:CanvasText;--highcontrast-radio-button-border-color-default:ButtonText;--highcontrast-radio-button-border-color-hover:Highlight;--highcontrast-radio-button-border-color-down:ButtonText;--highcontrast-radio-button-border-color-focus:Highlight;--highcontrast-radio-emphasized-accent-color:ButtonText;--highcontrast-radio-emphasized-accent-color-hover:Highlight;--highcontrast-radio-emphasized-accent-color-down:ButtonText;--highcontrast-radio-emphasized-accent-color-focus:Highlight;--highcontrast-radio-button-checked-border-color-default:Highlight;--highcontrast-radio-button-checked-border-color-hover:Highlight;--highcontrast-radio-button-checked-border-color-down:Highlight;--highcontrast-radio-button-checked-border-color-focus:Highlight;--highcontrast-radio-disabled-content-color:GrayText;--highcontrast-radio-disabled-border-color:GrayText;--highcontrast-radio-focus-ring-color:CanvasText}#button:after{forced-color-adjust:none}}:host{align-items:flex-start;display:inline-flex;max-inline-size:100%;min-block-size:var(--mod-radio-height,var(--spectrum-radio-height));position:relative;vertical-align:top}:host(:hover) #button:before{border-color:var(\n--highcontrast-radio-button-border-color-hover,var(\n--mod-radio-button-border-color-hover,var(--spectrum-radio-button-border-color-hover)\n)\n)}:host(:hover[checked]) #input+#button:before{border-color:var(\n--highcontrast-radio-button-checked-border-color-hover,var(\n--mod-radio-button-checked-border-color-hover,var(--spectrum-radio-button-checked-border-color-hover)\n)\n)}:host(:hover) #label{color:var(\n--highcontrast-radio-neutral-content-color-hover,var(\n--mod-radio-neutral-content-color-hover,var(--spectrum-radio-neutral-content-color-hover)\n)\n)}:host(:active) #button:before{border-color:var(\n--highcontrast-radio-button-border-color-down,var(\n--mod-radio-button-border-color-down,var(--spectrum-radio-button-border-color-down)\n)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--highcontrast-radio-button-checked-border-color-down,var(\n--mod-radio-button-checked-border-color-down,var(--spectrum-radio-button-checked-border-color-down)\n)\n)}:host(:active) #label{color:var(\n--highcontrast-radio-neutral-content-color-down,var(\n--mod-radio-neutral-content-color-down,var(--spectrum-radio-neutral-content-color-down)\n)\n)}:host(:focus) #button:before{border-color:var(\n--highcontrast-radio-button-border-color-focus,var(\n--mod-radio-button-border-color-focus,var(--spectrum-radio-button-border-color-focus)\n)\n)}:host(:focus) #button:after{border-color:var(\n--highcontrast-radio-focus-ring-color,var(\n--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)\n)\n);border-style:solid;border-width:var(\n--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)\n);height:calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-ring-gap)*2);width:calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-ring-gap)*2)}:host(:focus[checked]) #input+#button:before{border-color:var(\n--highcontrast-radio-button-checked-border-color-focus,var(\n--mod-radio-button-checked-border-color-focus,var(--spectrum-radio-button-checked-border-color-focus)\n)\n)}:host(:focus) #label{color:var(\n--highcontrast-radio-neutral-content-color-focus,var(\n--mod-radio-neutral-content-color-focus,var(--spectrum-radio-neutral-content-color-focus)\n)\n)}:host([invalid]) #label{color:var(\n--highcontrast-radio-neutral-content-color,var(\n--mod-radio-neutral-content-color,var(--spectrum-radio-neutral-content-color)\n)\n)}:host(.is-readOnly) #input:read-only{cursor:auto}:host(.is-readOnly) #button{clip:rect(1px,1px,1px,1px);bottom:100%;clip-path:inset(50%);position:fixed;right:100%}:host(.is-readOnly),:host(.is-readOnly) #label,:host(.is-readOnly[checked][disabled]) #input~#label,:host(.is-readOnly[disabled]) #input~#label{color:inherit;margin-inline-start:auto}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--highcontrast-radio-emphasized-accent-color,var(\n--mod-radio-emphasized-accent-color,var(--spectrum-radio-emphasized-accent-color)\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--highcontrast-radio-emphasized-accent-color-hover,var(\n--mod-radio-emphasized-accent-color-hover,var(--spectrum-radio-emphasized-accent-color-hover)\n)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--highcontrast-radio-emphasized-accent-color-down,var(\n--mod-radio-emphasized-accent-color-down,var(--spectrum-radio-emphasized-accent-color-down)\n)\n)}:host([emphasized][checked]:focus) #input+#button:before{border-color:var(\n--highcontrast-radio-emphasized-accent-color-focus,var(\n--mod-radio-emphasized-accent-color-focus,var(--spectrum-radio-emphasized-accent-color-focus)\n)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--highcontrast-radio-disabled-border-color,var(\n--mod-radio-disabled-border-color,var(--spectrum-radio-disabled-border-color)\n)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--highcontrast-radio-disabled-content-color,var(\n--mod-radio-disabled-content-color,var(--spectrum-radio-disabled-content-color)\n)\n)}#input{block-size:100%;box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;inline-size:100%;line-height:var(\n--mod-radio-line-height,var(--spectrum-radio-line-height)\n);margin:0;opacity:0;overflow:visible;padding:0;position:absolute;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-color:var(\n--highcontrast-radio-button-checked-border-color-default,var(\n--mod-radio-button-checked-border-color-default,var(--spectrum-radio-button-checked-border-color-default)\n)\n);border-width:calc(var(--spectrum-radio-button-control-size)/2 - var(--spectrum-radio-button-selection-indicator)/2)}:host(.focus-visible) #input+#button:after{border-color:var(\n--highcontrast-radio-focus-ring-color,var(\n--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)\n)\n);border-width:var(\n--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)\n)}:host(:focus-visible) #input+#button:after{border-color:var(\n--highcontrast-radio-focus-ring-color,var(\n--mod-radio-focus-ring-color,var(--spectrum-radio-focus-ring-color)\n)\n);border-width:var(\n--mod-radio-focus-ring-thickness,var(--spectrum-radio-focus-ring-thickness)\n)}#label{color:var(\n--highcontrast-radio-neutral-content-color,var(\n--mod-radio-neutral-content-color,var(--spectrum-radio-neutral-content-color)\n)\n);font-size:var(--mod-radio-font-size,var(--spectrum-radio-font-size));line-height:var(\n--mod-radio-line-height,var(--spectrum-radio-line-height)\n);margin-block-end:var(--spectrum-radio-label-bottom-to-text);margin-block-start:var(--spectrum-radio-label-top-to-text);margin-inline-start:var(\n--mod-radio-text-to-control,var(--spectrum-radio-text-to-control)\n);text-align:start;transition:color var(\n--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)\n) ease-in-out}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(\n--spectrum-radio-cjk-line-height\n)}#button{block-size:var(\n--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)\n);box-sizing:border-box;flex-grow:0;flex-shrink:0;inline-size:var(\n--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)\n);margin-block-start:var(\n--mod-radio-button-top-to-control,var(--spectrum-radio-button-top-to-control)\n);position:relative}#button:before{background-color:var(\n--highcontrast-radio-button-background-color,var(\n--mod-radio-button-background-color,var(--spectrum-radio-button-background-color)\n)\n);border-color:var(\n--highcontrast-radio-button-border-color-default,var(\n--mod-radio-button-border-color-default,var(--spectrum-radio-button-border-color-default)\n)\n);border-radius:50%;border-style:solid;border-width:var(\n--mod-radio-border-width,var(--spectrum-radio-border-width)\n);box-sizing:border-box;content:\"\";display:block;height:var(\n--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)\n);position:absolute;transition:border var(\n--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)\n) ease-in-out,box-shadow var(\n--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)\n) ease-in-out;width:var(\n--mod-radio-button-control-size,var(--spectrum-radio-button-control-size)\n);z-index:0}#button:after{border-radius:50%;content:\"\";display:block;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);transition:opacity var(\n--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)\n) ease-out,margin var(\n--mod-radio-animation-duration,var(--spectrum-radio-animation-duration)\n) ease-out}:host{--spectrum-radio-button-border-color-default:var(\n--system-spectrum-radio-button-border-color-default\n);--spectrum-radio-button-border-color-hover:var(\n--system-spectrum-radio-button-border-color-hover\n);--spectrum-radio-button-border-color-down:var(\n--system-spectrum-radio-button-border-color-down\n);--spectrum-radio-button-border-color-focus:var(\n--system-spectrum-radio-button-border-color-focus\n);--spectrum-radio-button-checked-border-color-default:var(\n--system-spectrum-radio-button-checked-border-color-default\n);--spectrum-radio-button-checked-border-color-hover:var(\n--system-spectrum-radio-button-checked-border-color-hover\n);--spectrum-radio-button-checked-border-color-down:var(\n--system-spectrum-radio-button-checked-border-color-down\n);--spectrum-radio-button-checked-border-color-focus:var(\n--system-spectrum-radio-button-checked-border-color-focus\n)}:host([emphasized]){--spectrum-radio-button-checked-border-color-default:var(\n--system-spectrum-radio-emphasized-button-checked-border-color-default\n);--spectrum-radio-button-checked-border-color-hover:var(\n--system-spectrum-radio-emphasized-button-checked-border-color-hover\n);--spectrum-radio-button-checked-border-color-down:var(\n--system-spectrum-radio-emphasized-button-checked-border-color-down\n);--spectrum-radio-button-checked-border-color-focus:var(\n--system-spectrum-radio-emphasized-button-checked-border-color-focus\n)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6Nf,eAAeC",
+  "names": ["css", "styles"]
 }

package/stories/radio-sizes.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+import { Default } from "./radio.stories.js";
+export default {
+  component: "sp-radio",
+  title: "Radio/Sizes",
+  argTypes: {
+    checked: {
+      name: "checked",
+      type: { name: "boolean", required: false },
+      description: "Represents when the input is checked",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: "boolean"
+    },
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      description: "Set the button's state to emphasized.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    invalid: {
+      name: "invalid",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    emphasized: false,
+    invalid: false
+  }
+};
+export const s = (args) => Default(args);
+s.args = {
+  size: "s"
+};
+export const m = (args) => Default(args);
+m.args = {
+  size: "m"
+};
+export const l = (args) => Default(args);
+l.args = {
+  size: "l"
+};
+export const XL = (args) => Default(args);
+XL.args = {
+  size: "xl"
+};
+//# sourceMappingURL=radio-sizes.stories.js.map

package/stories/radio-sizes.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["radio-sizes.stories.ts"],
+  "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 { TemplateResult } from '@spectrum-web-components/base';\nimport { Default, StoryArgs } from './radio.stories.js';\n\nexport default {\n    component: 'sp-radio',\n    title: 'Radio/Sizes',\n    argTypes: {\n        checked: {\n            name: 'checked',\n            type: { name: 'boolean', required: false },\n            description: 'Represents when the input is checked',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        emphasized: {\n            name: 'emphasized',\n            type: { name: 'boolean', required: false },\n            description: \"Set the button's state to emphasized.\",\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        invalid: {\n            name: 'invalid',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        checked: false,\n        disabled: false,\n        emphasized: false,\n        invalid: false,\n    },\n};\n\nexport const s = (args: StoryArgs): TemplateResult => Default(args);\ns.args = {\n    size: 's',\n};\n\nexport const m = (args: StoryArgs): TemplateResult => Default(args);\nm.args = {\n    size: 'm',\n};\n\nexport const l = (args: StoryArgs): TemplateResult => Default(args);\nl.args = {\n    size: 'l',\n};\n\nexport const XL = (args: StoryArgs): TemplateResult => Default(args);\nXL.args = {\n    size: 'xl',\n};\n"],
+  "mappings": ";AAYA,SAAS,eAA0B;AAEnC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aACI;AAAA,MACJ,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,EACb;AACJ;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,KAAK,CAAC,SAAoC,QAAQ,IAAI;AACnE,GAAG,OAAO;AAAA,EACN,MAAM;AACV;",
+  "names": []
+}

package/stories/radio.stories.js

@@ -1,3 +1,4 @@
+"use strict";
 import { html } from "@spectrum-web-components/base";
 import "@spectrum-web-components/radio/sp-radio.js";
 import "@spectrum-web-components/radio/sp-radio-group.js";

package/stories/radio.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["radio.stories.ts"],
-  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n    component: 'sp-radio',\n    title: 'Radio',\n    argTypes: {\n        checked: {\n            name: 'checked',\n            type: { name: 'boolean', required: false },\n            description: 'Represents when the input is checked',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        emphasized: {\n            name: 'emphasized',\n            type: { name: 'boolean', required: false },\n            description: \"Set the button's state to emphasized.\",\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        invalid: {\n            name: 'invalid',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        checked: false,\n        disabled: false,\n        emphasized: false,\n        invalid: false,\n    },\n};\n\ninterface StoryArgs {\n    checked?: boolean;\n    disabled?: boolean;\n    emphasized?: boolean;\n    invalid?: boolean;\n    readonly?: boolean;\n    [prop: string]: unknown;\n}\n\nfunction renderRadio(args: StoryArgs): TemplateResult {\n    return html`\n        <sp-radio ${spreadProps(args)}>Radio</sp-radio>\n    `;\n}\nexport const Default = (args: StoryArgs): TemplateResult => renderRadio(args);\n\nexport const readonly = (args: StoryArgs): TemplateResult =>\n    renderRadio({\n        ...args,\n        readonly: true,\n    });\nreadonly.args = {\n    checked: true,\n};\n\nexport const Emphasized = (args: StoryArgs): TemplateResult =>\n    renderRadio(args);\nEmphasized.args = {\n    checked: true,\n    emphasized: true,\n};\n\nexport const Autofocus = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-radio autofocus ${spreadProps(args)}>Radio</sp-radio>\n    `;\n};\n\nexport const Invalid = (args: StoryArgs): TemplateResult => renderRadio(args);\nInvalid.args = {\n    invalid: true,\n};\n\nexport const Disabled = (args: StoryArgs): TemplateResult => renderRadio(args);\nDisabled.args = {\n    disabled: true,\n};\n\nexport const labelBelow = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-radio label-below ${spreadProps(args)}>Radio</sp-radio>\n    `;\n};\nlabelBelow.storyName = 'Label below';\n\nconst values = {\n    first: 1,\n    second: 2,\n    third: 3,\n    fourth: 4,\n};\n\nexport const groupExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group vertical selected=\"1\" name=\"group-example\">\n            <sp-radio value=${values.first}>Option 1</sp-radio>\n            <sp-radio value=${values.second}>Option 2</sp-radio>\n            <sp-radio value=${values.third}>Option 3</sp-radio>\n            <sp-radio value=${values.fourth}>Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalGroup = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n            <sp-radio value=\"first\">Option 1</sp-radio>\n            <sp-radio value=\"second\">Option 2</sp-radio>\n            <sp-radio value=\"third\">Option 3</sp-radio>\n            <sp-radio value=\"fourth\">Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalLabelBelowGroup = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n            <sp-radio value=\"first\" label-below>Option 1</sp-radio>\n            <sp-radio value=\"second\" label-below>Option 2</sp-radio>\n            <sp-radio value=\"third\" label-below>Option 3</sp-radio>\n            <sp-radio value=\"fourth\" label-below>Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group vertical name=\"group-example\">\n            <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n                Tab Index 0\n            </sp-radio>\n            <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n            <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n            <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n            <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalTabIndexExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal name=\"group-example\">\n            <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n                Tab Index 0\n            </sp-radio>\n            <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n            <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n            <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n            <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\ntabIndexExample.storyName = 'Tab index example';\n"],
-  "mappings": "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",
+  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n    component: 'sp-radio',\n    title: 'Radio',\n    argTypes: {\n        checked: {\n            name: 'checked',\n            type: { name: 'boolean', required: false },\n            description: 'Represents when the input is checked',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        emphasized: {\n            name: 'emphasized',\n            type: { name: 'boolean', required: false },\n            description: \"Set the button's state to emphasized.\",\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        invalid: {\n            name: 'invalid',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n    args: {\n        checked: false,\n        disabled: false,\n        emphasized: false,\n        invalid: false,\n    },\n};\n\nexport interface StoryArgs {\n    checked?: boolean;\n    disabled?: boolean;\n    emphasized?: boolean;\n    invalid?: boolean;\n    readonly?: boolean;\n    size?: 's' | 'm' | 'l' | 'xl';\n    [prop: string]: unknown;\n}\n\nfunction renderRadio(args: StoryArgs): TemplateResult {\n    return html`\n        <sp-radio ${spreadProps(args)}>Radio</sp-radio>\n    `;\n}\nexport const Default = (args: StoryArgs): TemplateResult => renderRadio(args);\n\nexport const readonly = (args: StoryArgs): TemplateResult =>\n    renderRadio({\n        ...args,\n        readonly: true,\n    });\nreadonly.args = {\n    checked: true,\n};\n\nexport const Emphasized = (args: StoryArgs): TemplateResult =>\n    renderRadio(args);\nEmphasized.args = {\n    checked: true,\n    emphasized: true,\n};\n\nexport const Autofocus = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-radio autofocus ${spreadProps(args)}>Radio</sp-radio>\n    `;\n};\n\nexport const Invalid = (args: StoryArgs): TemplateResult => renderRadio(args);\nInvalid.args = {\n    invalid: true,\n};\n\nexport const Disabled = (args: StoryArgs): TemplateResult => renderRadio(args);\nDisabled.args = {\n    disabled: true,\n};\n\nexport const labelBelow = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-radio label-below ${spreadProps(args)}>Radio</sp-radio>\n    `;\n};\nlabelBelow.storyName = 'Label below';\n\nconst values = {\n    first: 1,\n    second: 2,\n    third: 3,\n    fourth: 4,\n};\n\nexport const groupExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group vertical selected=\"1\" name=\"group-example\">\n            <sp-radio value=${values.first}>Option 1</sp-radio>\n            <sp-radio value=${values.second}>Option 2</sp-radio>\n            <sp-radio value=${values.third}>Option 3</sp-radio>\n            <sp-radio value=${values.fourth}>Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalGroup = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n            <sp-radio value=\"first\">Option 1</sp-radio>\n            <sp-radio value=\"second\">Option 2</sp-radio>\n            <sp-radio value=\"third\">Option 3</sp-radio>\n            <sp-radio value=\"fourth\">Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalLabelBelowGroup = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n            <sp-radio value=\"first\" label-below>Option 1</sp-radio>\n            <sp-radio value=\"second\" label-below>Option 2</sp-radio>\n            <sp-radio value=\"third\" label-below>Option 3</sp-radio>\n            <sp-radio value=\"fourth\" label-below>Option 4</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group vertical name=\"group-example\">\n            <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n                Tab Index 0\n            </sp-radio>\n            <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n            <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n            <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n            <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\nexport const horizontalTabIndexExample = (): TemplateResult => {\n    return html`\n        <sp-radio-group horizontal name=\"group-example\">\n            <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n                Tab Index 0\n            </sp-radio>\n            <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n            <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n            <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n            <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n        </sp-radio-group>\n    `;\n};\n\ntabIndexExample.storyName = 'Tab index example';\n"],
+  "mappings": "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",
   "names": []
 }

package/test/benchmark/test-basic.js

@@ -1,3 +1,4 @@
+"use strict";
 import "@spectrum-web-components/radio/sp-radio-group.js";
 import "@spectrum-web-components/radio/sp-radio.js";
 import { html } from "lit";

package/test/benchmark/test-basic.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["test-basic.ts"],
   "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*/\n\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-radio-group id=\"test-default\">\n        <sp-radio value=\"first\" checked>Option 1</sp-radio>\n        <sp-radio value=\"second\">Option 2</sp-radio>\n        <sp-radio value=\"third\">Option 3</sp-radio>\n    </sp-radio-group>\n`);\n"],
-  "mappings": "AAYA;AACA;AACA;AACA;AAEA,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAMtB;",
+  "mappings": ";AAYA,OAAO;AACP,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAMtB;",
   "names": []
 }