@spectrum-web-components/radio 0.9.0 → 0.9.1

package/README.md

@@ -131,6 +131,64 @@ Event handlers for clicks and other user actions can be registered on an `<sp-ra
 </sp-radio>
 ```
 
+## Help text
+
+Help text can be accessibly associated with an `<sp-radio-group>` element by using the `help-text` or `negative-help-text` slots. When using the `negative-help-text` slot, `<sp-radio-group>` will self manage the presence of this content based on the value of the `invalid` property on your `<sp-radio-group>` element. Content within the `help-text` slot will be show by default. When your `<sp-radio-group>` should receive help text based on state outside of the complexity of `invalid` or not, manage the content addressed to the `help-text` from above to ensure that it displays the right messaging and possesses the right `variant`.
+
+<sp-tabs selected="self" auto label="Help text usage in radio groups">
+<sp-tab value="self">Self managed</sp-tab>
+<sp-tab-panel value="self">
+
+```html
+<sp-field-label for="self">
+    What is your favorite ice cream flavor?
+</sp-field-label>
+<sp-radio-group
+    is="self"
+    onchange="
+        this.invalid = this.selected === 'fourth';
+    "
+>
+    <sp-radio value="first">Vanilla</sp-radio>
+    <sp-radio value="second">Chocolate</sp-radio>
+    <sp-radio value="third">Strawberry</sp-radio>
+    <sp-radio value="fourth">I don't like ice cream</sp-radio>
+    <sp-help-text slot="help-text">Everyone likes ice cream.</sp-help-text>
+    <sp-help-text slot="negative-help-text" icon>
+        You can't not like ice cream.
+    </sp-help-text>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="above">Managed from above</sp-tab>
+<sp-tab-panel value="above">
+
+```html
+<sp-field-label for="managed">
+    What is your favorite ice cream flavor?
+</sp-field-label>
+<sp-radio-group
+    is="managed"
+    onchange="
+        const helpText = this.querySelector(`[slot='help-text']`);
+        const isInvalid = this.selected === 'fourth';
+        helpText.icon = isInvalid;
+        helpText.textContent = isInvalid ? 'You can\'t not like ice cream.' : 'Everyone likes ice cream.';
+        helpText.variant = isInvalid ? 'negative' : 'neutral';
+    "
+>
+    <sp-radio value="first">Vanilla</sp-radio>
+    <sp-radio value="second">Chocolate</sp-radio>
+    <sp-radio value="third">Strawberry</sp-radio>
+    <sp-radio value="fourth">I don't like ice cream</sp-radio>
+    <sp-help-text slot="help-text">Everyone likes ice cream.</sp-help-text>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
 ## Accessibility
 
 Radio buttons are accessible by default, rendered in HTML using the `<input type="radio">` element. Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group. Space selects the radio button in focus (if not already selected). Using the arrow keys moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not.

package/custom-elements.json

@@ -211,11 +211,8 @@
               "name": "change",
               "type": {
                 "text": "Event"
-              }
-            },
-            {
-              "description": "When the input is interacted with and its state is changed",
-              "name": "sp-radio:change"
+              },
+              "description": "When the input is interacted with and its state is changed"
             }
           ],
           "attributes": [
@@ -322,6 +319,14 @@
             {
               "description": "The `sp-radio` elements to display/manage in the group.",
               "name": ""
+            },
+            {
+              "description": "default or non-negative help text to associate to your form element",
+              "name": "help-text"
+            },
+            {
+              "description": "negative help text to associate to your form element when `invalid`",
+              "name": "negative-help-text"
             }
           ],
           "members": [
@@ -343,16 +348,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "attribute": "label"
-            },
             {
               "kind": "field",
               "name": "buttons",
@@ -431,7 +426,8 @@
               "name": "change",
               "type": {
                 "text": "Event"
-              }
+              },
+              "description": "An alteration to the value of the element has been committed by the user."
             }
           ],
           "attributes": [
@@ -443,14 +439,6 @@
               "default": "''",
               "fieldName": "name"
             },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "label"
-            },
             {
               "name": "selected",
               "type": {
@@ -515,7 +503,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "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{flex-grow:0;flex-shrink:0;margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative}#button,#button:before{box-sizing:border-box;height:var(--spectrum-radio-circle-diameter);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);transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;z-index:0}#button:after,#button:before{content:\"\";display:block;position:absolute}#button:after{border-radius:100%;bottom:0;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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-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-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-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-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-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-component-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,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,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(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\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(\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-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-alias-toggle-background-color-default)\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`"
+          "default": "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-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-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}: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)}}: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`"
         }
       ],
       "exports": [
@@ -536,7 +524,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "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{flex-grow:0;flex-shrink:0;margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative}#button,#button:before{box-sizing:border-box;height:var(--spectrum-radio-circle-diameter);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);transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;z-index:0}#button:after,#button:before{content:\"\";display:block;position:absolute}#button:after{border-radius:100%;bottom:0;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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-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-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-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-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-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-component-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,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,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(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\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(\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-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-alias-toggle-background-color-default)\n)}}\n`"
+          "default": "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-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-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}: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`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/radio",
-    "version": "0.9.0",
+    "version": "0.9.1",
     "publishConfig": {
         "access": "public"
     },
@@ -46,18 +46,19 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.0",
-        "@spectrum-web-components/field-group": "^0.5.0",
-        "@spectrum-web-components/shared": "^0.13.0",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/field-group": "^0.5.1",
+        "@spectrum-web-components/help-text": "^0.1.0",
+        "@spectrum-web-components/shared": "^0.13.1",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/radio": "^3.0.5"
+        "@spectrum-css/radio": "^3.0.10"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "7ce77352f6894043bceac9ef92b21e5f85420969"
+    "gitHead": "df3f333ee26a45f9fc247716b6e8ef051dca630b"
 }

package/src/Radio.d.ts

@@ -10,7 +10,7 @@ declare const Radio_base: typeof SpectrumElement;
  * @attr checked - Represents when the input is checked
  * @attr value - Identifies this radio button within its radio group
  *
- * @event sp-radio:change - When the input is interacted with and its state is changed
+ * @fires change - When the input is interacted with and its state is changed
  */
 export declare class Radio extends Radio_base {
     static get styles(): CSSResultArray;

package/src/Radio.js

@@ -24,7 +24,7 @@ import radioStyles from './radio.css.js';
  * @attr checked - Represents when the input is checked
  * @attr value - Identifies this radio button within its radio group
  *
- * @event sp-radio:change - When the input is interacted with and its state is changed
+ * @fires change - When the input is interacted with and its state is changed
  */
 export class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {
     constructor() {

package/src/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.ts"],"names":[],"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*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr label-below - Moves the label below the radio button\n * @attr invalid - Uses the invalid style\n * @attr disabled - Uses the disabled style\n * @attr checked - Represents when the input is checked\n * @attr value - Identifies this radio button within its radio group\n *\n * @event sp-radio:change - When the input is interacted with and its state is changed\n */\nexport class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {\n    public static get styles(): CSSResultArray {\n        return [radioStyles];\n    }\n\n    /**\n     * When this control is rendered, focus it automatically\n     * @private\n     */\n    @property({ type: Boolean })\n    public autofocus = false;\n\n    @property({ type: String, reflect: true })\n    public value = '';\n\n    @property({ type: Boolean, reflect: true })\n    public checked = false;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @query('#input')\n    private inputElement!: HTMLInputElement;\n\n    public click(): void {\n        if (this.disabled) {\n            return;\n        }\n        this.activate();\n    }\n\n    protected manageAutoFocus(): void {\n        if (this.autofocus) {\n            /**\n             * Trick :focus-visible polyfill into thinking keyboard based focus\n             *\n             * @private\n             **/\n            this.dispatchEvent(\n                new KeyboardEvent('keydown', {\n                    code: 'Tab',\n                })\n            );\n            this.focus();\n        }\n    }\n\n    public handleChange(event: Event): void {\n        event.stopPropagation();\n        if (this.readonly) {\n            this.inputElement.checked = this.checked;\n            return;\n        }\n        this.checked = this.inputElement.checked;\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected activate(): void {\n        this.checked = true;\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        if (event.code === 'Space') {\n            this.activate();\n        }\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div id=\"input\"></div>\n            <span id=\"button\"></span>\n            <span id=\"label\" role=\"presentation\"><slot></slot></span>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.setAttribute('role', 'radio');\n        if (!this.hasAttribute('tabindex')) {\n            this.tabIndex = 0;\n        }\n        this.manageAutoFocus();\n        this.addEventListener('click', this.activate);\n        this.addEventListener('keyup', this.handleKeyup);\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('invalid')) {\n            if (this.invalid) {\n                this.setAttribute('aria-invalid', 'true');\n            } else {\n                this.removeAttribute('aria-invalid');\n            }\n        }\n        if (changes.has('checked')) {\n            if (this.checked) {\n                this.setAttribute('aria-checked', 'true');\n            } else {\n                this.setAttribute('aria-checked', 'false');\n            }\n        }\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabeld');\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.ts"],"names":[],"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*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr label-below - Moves the label below the radio button\n * @attr invalid - Uses the invalid style\n * @attr disabled - Uses the disabled style\n * @attr checked - Represents when the input is checked\n * @attr value - Identifies this radio button within its radio group\n *\n * @fires change - When the input is interacted with and its state is changed\n */\nexport class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {\n    public static get styles(): CSSResultArray {\n        return [radioStyles];\n    }\n\n    /**\n     * When this control is rendered, focus it automatically\n     * @private\n     */\n    @property({ type: Boolean })\n    public autofocus = false;\n\n    @property({ type: String, reflect: true })\n    public value = '';\n\n    @property({ type: Boolean, reflect: true })\n    public checked = false;\n\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @query('#input')\n    private inputElement!: HTMLInputElement;\n\n    public click(): void {\n        if (this.disabled) {\n            return;\n        }\n        this.activate();\n    }\n\n    protected manageAutoFocus(): void {\n        if (this.autofocus) {\n            /**\n             * Trick :focus-visible polyfill into thinking keyboard based focus\n             *\n             * @private\n             **/\n            this.dispatchEvent(\n                new KeyboardEvent('keydown', {\n                    code: 'Tab',\n                })\n            );\n            this.focus();\n        }\n    }\n\n    public handleChange(event: Event): void {\n        event.stopPropagation();\n        if (this.readonly) {\n            this.inputElement.checked = this.checked;\n            return;\n        }\n        this.checked = this.inputElement.checked;\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected activate(): void {\n        this.checked = true;\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected handleKeyup(event: KeyboardEvent): void {\n        if (event.code === 'Space') {\n            this.activate();\n        }\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div id=\"input\"></div>\n            <span id=\"button\"></span>\n            <span id=\"label\" role=\"presentation\"><slot></slot></span>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        this.setAttribute('role', 'radio');\n        if (!this.hasAttribute('tabindex')) {\n            this.tabIndex = 0;\n        }\n        this.manageAutoFocus();\n        this.addEventListener('click', this.activate);\n        this.addEventListener('keyup', this.handleKeyup);\n    }\n\n    protected updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (changes.has('invalid')) {\n            if (this.invalid) {\n                this.setAttribute('aria-invalid', 'true');\n            } else {\n                this.removeAttribute('aria-invalid');\n            }\n        }\n        if (changes.has('checked')) {\n            if (this.checked) {\n                this.setAttribute('aria-checked', 'true');\n            } else {\n                this.setAttribute('aria-checked', 'false');\n            }\n        }\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabeld');\n            }\n        }\n    }\n}\n"]}

package/src/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { PropertyValues } from '@spectrum-web-components/base';
 import { FieldGroup } from '@spectrum-web-components/field-group';
 import { Radio } from './Radio.js';
 declare const RadioGroup_base: typeof FieldGroup;
@@ -6,11 +6,14 @@ declare const RadioGroup_base: typeof FieldGroup;
  * @element sp-radio-group
  *
  * @slot - The `sp-radio` elements to display/manage in the group.
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
+ *
+ * @fires change - An alteration to the value of the element has been committed by the user.
  */
 export declare class RadioGroup extends RadioGroup_base {
     name: string;
     defaultNodes: Node[];
-    label: string;
     get buttons(): Radio[];
     constructor();
     focus(): void;
@@ -19,7 +22,6 @@ export declare class RadioGroup extends RadioGroup_base {
     private handleFocusout;
     private _setSelected;
     selected: string;
-    protected render(): TemplateResult;
     protected firstUpdated(changes: PropertyValues<this>): void;
     protected updated(changes: PropertyValues<this>): void;
     private validateRadios;

package/src/RadioGroup.js

@@ -10,7 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { __decorate } from "tslib";
-import { html, } from '@spectrum-web-components/base';
 import { property, queryAssignedNodes, } from '@spectrum-web-components/base/src/decorators.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 import { FieldGroup } from '@spectrum-web-components/field-group';
@@ -19,12 +18,15 @@ import { Radio } from './Radio.js';
  * @element sp-radio-group
  *
  * @slot - The `sp-radio` elements to display/manage in the group.
+ * @slot help-text - default or non-negative help text to associate to your form element
+ * @slot negative-help-text - negative help text to associate to your form element when `invalid`
+ *
+ * @fires change - An alteration to the value of the element has been committed by the user.
  */
 export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
     constructor() {
         super();
         this.name = '';
-        this.label = '';
         this.handleFocusin = () => {
             this.addEventListener('focusout', this.handleFocusout);
             this.addEventListener('keydown', this.handleKeydown);
@@ -161,11 +163,6 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
         }
         this.validateRadios();
     }
-    render() {
-        return html `
-            <slot></slot>
-        `;
-    }
     firstUpdated(changes) {
         super.firstUpdated(changes);
         this.setAttribute('role', 'radiogroup');
@@ -207,14 +204,6 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
         if (changes.has('selected')) {
             this.validateRadios();
         }
-        if (changes.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            }
-            else {
-                this.removeAttribute('aria-label');
-            }
-        }
     }
     validateRadios() {
         let validSelection = false;
@@ -233,9 +222,6 @@ __decorate([
 __decorate([
     queryAssignedNodes('')
 ], RadioGroup.prototype, "defaultNodes", void 0);
-__decorate([
-    property()
-], RadioGroup.prototype, "label", void 0);
 __decorate([
     property({ reflect: true })
 ], RadioGroup.prototype, "selected", void 0);

package/src/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["RadioGroup.ts"],"names":[],"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*/\n\nimport {\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n    @property({ type: String })\n    public name = '';\n\n    @queryAssignedNodes('')\n    public defaultNodes!: Node[];\n\n    @property()\n    public label = '';\n\n    public get buttons(): Radio[] {\n        return this.defaultNodes.filter(\n            (node) => (node as HTMLElement) instanceof Radio\n        ) as Radio[];\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    public focus(): void {\n        if (!this.buttons.length) {\n            return;\n        }\n        const firstButtonNonDisabled = this.buttons.find((button) => {\n            if (this.selected) {\n                return button.checked;\n            }\n            return !button.disabled;\n        });\n        if (firstButtonNonDisabled) {\n            firstButtonNonDisabled.focus();\n        }\n    }\n\n    private handleFocusin = (): void => {\n        this.addEventListener('focusout', this.handleFocusout);\n        this.addEventListener('keydown', this.handleKeydown);\n        requestAnimationFrame(() => {\n            const firstButtonWithTabIndex = this.buttons.find(\n                (button) => button.tabIndex === 0\n            );\n            if (firstButtonWithTabIndex) {\n                firstButtonWithTabIndex.tabIndex = -1;\n            }\n        });\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        const activeElement = (this.getRootNode() as Document)\n            .activeElement as Radio;\n        /* c8 ignore next 3 */\n        if (!activeElement) {\n            return;\n        }\n        let nextIndex = this.buttons.indexOf(activeElement);\n        /* c8 ignore next 3 */\n        if (nextIndex === -1) {\n            return;\n        }\n        const circularIndexedElement = <T extends HTMLElement>(\n            list: T[],\n            index: number\n        ): T => list[(list.length + index) % list.length];\n        const buttonFromDelta = (delta: number): void => {\n            nextIndex += delta;\n            while (circularIndexedElement(this.buttons, nextIndex).disabled) {\n                nextIndex += delta;\n            }\n        };\n        switch (code) {\n            case 'ArrowUp':\n                buttonFromDelta(-1);\n                break;\n            case 'ArrowLeft':\n                buttonFromDelta(this.isLTR ? -1 : 1);\n                break;\n            case 'ArrowRight':\n                buttonFromDelta(this.isLTR ? 1 : -1);\n                break;\n            case 'ArrowDown':\n                buttonFromDelta(1);\n                break;\n            case 'End':\n                nextIndex = this.buttons.length;\n                buttonFromDelta(-1);\n                break;\n            case 'Home':\n                nextIndex = -1;\n                buttonFromDelta(1);\n                break;\n            case 'PageUp':\n            case 'PageDown':\n                const tagsSiblings = [\n                    ...(\n                        this.getRootNode() as Document\n                    ).querySelectorAll<RadioGroup>('sp-radio-group'),\n                ];\n                if (tagsSiblings.length < 2) {\n                    return;\n                }\n                event.preventDefault();\n                const currentIndex = tagsSiblings.indexOf(this);\n                const offset = code === 'PageUp' ? -1 : 1;\n                let nextRadioGroupIndex = currentIndex + offset;\n                let nextRadioGroup = circularIndexedElement(\n                    tagsSiblings,\n                    nextRadioGroupIndex\n                );\n                while (!nextRadioGroup.buttons.length) {\n                    nextRadioGroupIndex += offset;\n                    nextRadioGroup = circularIndexedElement(\n                        tagsSiblings,\n                        nextRadioGroupIndex\n                    );\n                }\n                nextRadioGroup.focus();\n                return;\n            default:\n                return;\n        }\n        event.preventDefault();\n        const nextRadio = circularIndexedElement(this.buttons, nextIndex);\n        this._setSelected(nextRadio.value);\n        nextRadio.focus();\n    };\n\n    private handleFocusout = (event: FocusEvent): void => {\n        const nextActiveElement = event.relatedTarget as Node;\n        if (nextActiveElement && this.contains(nextActiveElement)) {\n            return;\n        }\n        const firstButtonNonDisabled = this.buttons.find((button) => {\n            if (this.selected) {\n                return button.checked;\n            }\n            return !button.disabled;\n        });\n        if (firstButtonNonDisabled) {\n            firstButtonNonDisabled.tabIndex = 0;\n        }\n        this.removeEventListener('keydown', this.handleKeydown);\n        this.removeEventListener('focusout', this.handleFocusout);\n    };\n\n    private _setSelected(value: string): void {\n        if (value === this.selected) {\n            return;\n        }\n        const oldValue = this.selected;\n        const radio = value\n            ? (this.querySelector(`sp-radio[value=\"${value}\"]`) as Radio)\n            : undefined;\n\n        // If no matching radio, selected is reset to empty string\n        this.selected = radio ? value : '';\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = oldValue;\n            return;\n        }\n        this.validateRadios();\n    }\n\n    @property({ reflect: true })\n    public selected = '';\n\n    protected render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        this.setAttribute('role', 'radiogroup');\n        const checkedRadio = this.querySelector('sp-radio[checked]') as Radio;\n        const checkedRadioValue = checkedRadio ? checkedRadio.value : '';\n        // Prefer the checked item over the selected value\n        this.selected = checkedRadioValue || this.selected;\n        // Validate the selected value is actual a radio option\n        if (this.selected && this.selected !== checkedRadioValue) {\n            const selectedRadio = this.querySelector(\n                `sp-radio[value=\"${this.selected}\"]`\n            ) as Radio;\n            if (!selectedRadio) {\n                this.selected = '';\n            } else {\n                selectedRadio.checked = true;\n            }\n        }\n\n        this.addEventListener('change', (event: Event) => {\n            if (event.target === this) {\n                return;\n            }\n            event.stopPropagation();\n            const target = event.target as Radio;\n            this._setSelected(target.value);\n        });\n        this.buttons.map((button, index) => {\n            const focusable = this.selected\n                ? !button.disabled && button.value === this.selected\n                    ? '0'\n                    : '-1'\n                : !button.disabled && index === 0\n                ? '0'\n                : '-1';\n            button.setAttribute('tabindex', focusable);\n        });\n    }\n\n    protected updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (changes.has('selected')) {\n            this.validateRadios();\n        }\n        if (changes.has('label')) {\n            if (this.label) {\n                this.setAttribute('aria-label', this.label);\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n    }\n\n    private validateRadios(): void {\n        let validSelection = false;\n        this.buttons.map((button) => {\n            button.checked = this.selected === button.value;\n            validSelection = validSelection || button.checked;\n        });\n        if (!validSelection) {\n            this.selected = '';\n        }\n    }\n}\n"]}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["RadioGroup.ts"],"names":[],"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*/\n\nimport { PropertyValues } from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n    @property({ type: String })\n    public name = '';\n\n    @queryAssignedNodes('')\n    public defaultNodes!: Node[];\n\n    public get buttons(): Radio[] {\n        return this.defaultNodes.filter(\n            (node) => (node as HTMLElement) instanceof Radio\n        ) as Radio[];\n    }\n\n    constructor() {\n        super();\n        this.addEventListener('focusin', this.handleFocusin);\n    }\n\n    public focus(): void {\n        if (!this.buttons.length) {\n            return;\n        }\n        const firstButtonNonDisabled = this.buttons.find((button) => {\n            if (this.selected) {\n                return button.checked;\n            }\n            return !button.disabled;\n        });\n        if (firstButtonNonDisabled) {\n            firstButtonNonDisabled.focus();\n        }\n    }\n\n    private handleFocusin = (): void => {\n        this.addEventListener('focusout', this.handleFocusout);\n        this.addEventListener('keydown', this.handleKeydown);\n        requestAnimationFrame(() => {\n            const firstButtonWithTabIndex = this.buttons.find(\n                (button) => button.tabIndex === 0\n            );\n            if (firstButtonWithTabIndex) {\n                firstButtonWithTabIndex.tabIndex = -1;\n            }\n        });\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        const { code } = event;\n        const activeElement = (this.getRootNode() as Document)\n            .activeElement as Radio;\n        /* c8 ignore next 3 */\n        if (!activeElement) {\n            return;\n        }\n        let nextIndex = this.buttons.indexOf(activeElement);\n        /* c8 ignore next 3 */\n        if (nextIndex === -1) {\n            return;\n        }\n        const circularIndexedElement = <T extends HTMLElement>(\n            list: T[],\n            index: number\n        ): T => list[(list.length + index) % list.length];\n        const buttonFromDelta = (delta: number): void => {\n            nextIndex += delta;\n            while (circularIndexedElement(this.buttons, nextIndex).disabled) {\n                nextIndex += delta;\n            }\n        };\n        switch (code) {\n            case 'ArrowUp':\n                buttonFromDelta(-1);\n                break;\n            case 'ArrowLeft':\n                buttonFromDelta(this.isLTR ? -1 : 1);\n                break;\n            case 'ArrowRight':\n                buttonFromDelta(this.isLTR ? 1 : -1);\n                break;\n            case 'ArrowDown':\n                buttonFromDelta(1);\n                break;\n            case 'End':\n                nextIndex = this.buttons.length;\n                buttonFromDelta(-1);\n                break;\n            case 'Home':\n                nextIndex = -1;\n                buttonFromDelta(1);\n                break;\n            case 'PageUp':\n            case 'PageDown':\n                const tagsSiblings = [\n                    ...(\n                        this.getRootNode() as Document\n                    ).querySelectorAll<RadioGroup>('sp-radio-group'),\n                ];\n                if (tagsSiblings.length < 2) {\n                    return;\n                }\n                event.preventDefault();\n                const currentIndex = tagsSiblings.indexOf(this);\n                const offset = code === 'PageUp' ? -1 : 1;\n                let nextRadioGroupIndex = currentIndex + offset;\n                let nextRadioGroup = circularIndexedElement(\n                    tagsSiblings,\n                    nextRadioGroupIndex\n                );\n                while (!nextRadioGroup.buttons.length) {\n                    nextRadioGroupIndex += offset;\n                    nextRadioGroup = circularIndexedElement(\n                        tagsSiblings,\n                        nextRadioGroupIndex\n                    );\n                }\n                nextRadioGroup.focus();\n                return;\n            default:\n                return;\n        }\n        event.preventDefault();\n        const nextRadio = circularIndexedElement(this.buttons, nextIndex);\n        this._setSelected(nextRadio.value);\n        nextRadio.focus();\n    };\n\n    private handleFocusout = (event: FocusEvent): void => {\n        const nextActiveElement = event.relatedTarget as Node;\n        if (nextActiveElement && this.contains(nextActiveElement)) {\n            return;\n        }\n        const firstButtonNonDisabled = this.buttons.find((button) => {\n            if (this.selected) {\n                return button.checked;\n            }\n            return !button.disabled;\n        });\n        if (firstButtonNonDisabled) {\n            firstButtonNonDisabled.tabIndex = 0;\n        }\n        this.removeEventListener('keydown', this.handleKeydown);\n        this.removeEventListener('focusout', this.handleFocusout);\n    };\n\n    private _setSelected(value: string): void {\n        if (value === this.selected) {\n            return;\n        }\n        const oldValue = this.selected;\n        const radio = value\n            ? (this.querySelector(`sp-radio[value=\"${value}\"]`) as Radio)\n            : undefined;\n\n        // If no matching radio, selected is reset to empty string\n        this.selected = radio ? value : '';\n        const applyDefault = this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n                composed: true,\n            })\n        );\n        if (!applyDefault) {\n            this.selected = oldValue;\n            return;\n        }\n        this.validateRadios();\n    }\n\n    @property({ reflect: true })\n    public selected = '';\n\n    protected firstUpdated(changes: PropertyValues<this>): void {\n        super.firstUpdated(changes);\n        this.setAttribute('role', 'radiogroup');\n        const checkedRadio = this.querySelector('sp-radio[checked]') as Radio;\n        const checkedRadioValue = checkedRadio ? checkedRadio.value : '';\n        // Prefer the checked item over the selected value\n        this.selected = checkedRadioValue || this.selected;\n        // Validate the selected value is actual a radio option\n        if (this.selected && this.selected !== checkedRadioValue) {\n            const selectedRadio = this.querySelector(\n                `sp-radio[value=\"${this.selected}\"]`\n            ) as Radio;\n            if (!selectedRadio) {\n                this.selected = '';\n            } else {\n                selectedRadio.checked = true;\n            }\n        }\n\n        this.addEventListener('change', (event: Event) => {\n            if (event.target === this) {\n                return;\n            }\n            event.stopPropagation();\n            const target = event.target as Radio;\n            this._setSelected(target.value);\n        });\n        this.buttons.map((button, index) => {\n            const focusable = this.selected\n                ? !button.disabled && button.value === this.selected\n                    ? '0'\n                    : '-1'\n                : !button.disabled && index === 0\n                ? '0'\n                : '-1';\n            button.setAttribute('tabindex', focusable);\n        });\n    }\n\n    protected updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (changes.has('selected')) {\n            this.validateRadios();\n        }\n    }\n\n    private validateRadios(): void {\n        let validSelection = false;\n        this.buttons.map((button) => {\n            button.checked = this.selected === button.value;\n            validSelection = validSelection || button.checked;\n        });\n        if (!validSelection) {\n            this.selected = '';\n        }\n    }\n}\n"]}

package/src/radio.css.js

@@ -45,9 +45,9 @@ var(--spectrum-global-dimension-static-size-25)
 --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{flex-grow:0;flex-shrink:0;margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative}#button,#button:before{box-sizing:border-box;height:var(--spectrum-radio-circle-diameter);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);transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;z-index:0}#button:after,#button:before{content:"";display:block;position:absolute}#button:after{border-radius:100%;bottom:0;left:0;margin:var(
+);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)
-);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(
+);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)
@@ -58,15 +58,15 @@ var(--spectrum-global-dimension-static-size-25)
 )}#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-global-color-gray-600)
+--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-global-color-gray-700)
+--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)
 )}:host(:hover) #label{color:var(
 --spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)
 )}:host(:active) #button:before{border-color:var(
---spectrum-radio-m-circle-border-color-down,var(--spectrum-global-color-gray-800)
+--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-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)
 )}:host(:active) #label{color:var(
@@ -92,30 +92,34 @@ var(--spectrum-global-dimension-static-size-25)
 )}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(
 --spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)
 )}: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)
+--spectrum-radio-m-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-component-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: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(
+--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,:host([emphasized]:focus-visible) #input+#button:after,:host([emphasized]:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(
+);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,:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(
+);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(: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(
+)}: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-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(
+)}@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-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}:host([invalid][checked]) #input+#button:before{border-color:var(
 --spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)
 )}}:host{--spectrum-radio-label-margin-top:var(
 --spectrum-global-dimension-size-75,6px