@spectrum-web-components/radio 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,246 @@
+## Description
+
+`<sp-radio>` and `<sp-radio-group>` allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
+
+`<sp-radio-group>` holds a list of `<sp-radio>` elements, and is responsible for deselecting radio buttons when a new one is selected, which in turn makes it responsible for keeping track of which one is selected. `<sp-radio>` is responsible for handling user interactions and for visually reflecting if it is the one that is checked or not.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/radio?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/radio)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/radio?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/radio)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/vUinRWkhayMTAmr9AK9J/src/index.ts)
+
+```
+yarn add @spectrum-web-components/radio
+```
+
+Import the side effectful registration of `<sp-radio>` or `<sp-radio-group>` via:
+
+```
+import '@spectrum-web-components/radio/sp-radio.js';
+import '@spectrum-web-components/radio/sp-radio-group.js';
+```
+
+When looking to leverage the `Radio` or `RadioGroup` base classes as a type and/or for extension purposes, do so via:
+
+```
+import {
+    Radio,
+    RadioGroup
+} from '@spectrum-web-components/radio';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<sp-radio-group label="Small" selected="first" name="example">
+    <sp-radio value="first" size="s">Option 1</sp-radio>
+    <sp-radio value="second" size="s">Option 2</sp-radio>
+    <sp-radio value="third" size="s">Option 3</sp-radio>
+    <sp-radio value="fourth" size="s">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-radio-group label="Medium" selected="first" name="example">
+    <sp-radio value="first" size="m">Option 1</sp-radio>
+    <sp-radio value="second" size="m">Option 2</sp-radio>
+    <sp-radio value="third" size="m">Option 3</sp-radio>
+    <sp-radio value="fourth" size="m">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-radio-group label="Large" selected="first" name="example">
+    <sp-radio value="first" size="l">Option 1</sp-radio>
+    <sp-radio value="second" size="l">Option 2</sp-radio>
+    <sp-radio value="third" size="l">Option 3</sp-radio>
+    <sp-radio value="fourth" size="l">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-radio-group label="Extra large" selected="first" name="example">
+    <sp-radio value="first" size="xl">Option 1</sp-radio>
+    <sp-radio value="second" size="xl">Option 2</sp-radio>
+    <sp-radio value="third" size="xl">Option 3</sp-radio>
+    <sp-radio value="fourth" size="xl">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+### Standard radio buttons
+
+Standard radio buttons are the default style for radio buttons. They are optimal for application panels where all visual elements are monochrome in order to direct focus to the content.
+
+Invalid selections in radio groups are identified using the `negative-help-text` slot. Read more about using [help text](#help-text) below.
+
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-1" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        </sp-field-label>
+        <sp-radio-group id="example-1" name="example" vertical>
+            <sp-radio value="kittens">Kittens</sp-radio>
+            <sp-radio value="puppies" checked>Puppies</sp-radio>
+        </sp-radio-group>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-2" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        </sp-field-label>
+        <sp-radio-group invalid id="example-2" name="example" vertical>
+            <sp-radio invalid value="kittens">Kittens</sp-radio>
+            <sp-radio invalid value="puppies" checked>Puppies</sp-radio>
+             <sp-help-text slot="negative-help-text" icon>
+                This selection is invalid.
+            </sp-help-text>
+        </sp-radio-group>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-3" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        </sp-fieldlabel>
+        <sp-radio-group id="example-3" name="example" vertical>
+            <sp-radio disabled value="kittens">Kittens</sp-radio>
+            <sp-radio disabled value="puppies" checked>Puppies</sp-radio>
+        </sp-radio-group>
+    </div>
+</div>
+```
+
+### Emphasized radio buttons
+
+Emphasized radio buttons are a secondary style for radio buttons. The blue color provides a visual prominence that is optimal for forms, settings, etc. where the radio buttons need to be noticed.
+
+Invalid selections in radio groups are identified using the `negative-help-text` slot. Read more about using [help text](#help-text) below.
+
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-a" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        </sp-field-label>
+        <sp-radio-group id="example-a" name="example" vertical>
+            <sp-radio emphasized value="kittens">Kittens</sp-radio>
+            <sp-radio emphasized value="puppies" checked>Puppies</sp-radio>
+        </sp-radio-group>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-b" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        </sp-field-label>
+        <sp-radio-group invalid id="example-b" name="example" vertical>
+            <sp-radio emphasized invalid value="kittens">Kittens</sp-radio>
+            <sp-radio emphasized invalid value="puppies" checked>Puppies</sp-radio>
+            <sp-help-text slot="negative-help-text" icon>
+                This selection is invalid.
+            </sp-help-text>
+        </sp-radio-group>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <sp-field-label for="example-c" size="l">
+            <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        </sp-fieldlabel>
+        <sp-radio-group id="example-c" name="example" vertical>
+            <sp-radio emphasized disabled value="kittens">Kittens</sp-radio>
+            <sp-radio emphasized disabled value="puppies" checked>Puppies</sp-radio>
+        </sp-radio-group>
+    </div>
+</div>
+```
+
+### Handling events
+
+Event handlers for clicks and other user actions can be registered on an `<sp-radio>` similar to a standard `<input type="radio">` element.
+
+```html
+<sp-radio id="radio-example" onclick="spAlert(this, '<sp-radio> clicked!')">
+    Web component
+</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
+    id="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
+    id="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/package.json

@@ -0,0 +1,84 @@
+{
+    "name": "@spectrum-web-components/radio",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/radio"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/radio",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Radio.js": {
+            "development": "./src/Radio.dev.js",
+            "default": "./src/Radio.js"
+        },
+        "./src/RadioGroup.js": {
+            "development": "./src/RadioGroup.dev.js",
+            "default": "./src/RadioGroup.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/radio-overrides.css.js": "./src/radio-overrides.css.js",
+        "./src/radio.css.js": "./src/radio.css.js",
+        "./sp-radio.js": {
+            "development": "./sp-radio.dev.js",
+            "default": "./sp-radio.js"
+        },
+        "./sp-radio-group.js": {
+            "development": "./sp-radio-group.dev.js",
+            "default": "./sp-radio-group.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/field-group": "0.0.0-20241209155954",
+        "@spectrum-web-components/help-text": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/radio": "^10.0.0-s2-foundations.15"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-radio-group.d.ts

@@ -0,0 +1,6 @@
+import { RadioGroup } from './src/RadioGroup.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-radio-group': RadioGroup;
+    }
+}

package/sp-radio-group.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { RadioGroup } from "./src/RadioGroup.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-radio-group", RadioGroup);
+//# sourceMappingURL=sp-radio-group.dev.js.map

package/sp-radio-group.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-radio-group.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { RadioGroup } from './src/RadioGroup.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-radio-group', RadioGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-radio-group': RadioGroup;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAE9B,cAAc,kBAAkB,UAAU;",
+  "names": []
+}

package/sp-radio-group.js

@@ -0,0 +1,2 @@
+"use strict";import{RadioGroup as o}from"./src/RadioGroup.js";import{defineElement as r}from"@spectrum-web-components/base/src/define-element.js";r("sp-radio-group",o);
+//# sourceMappingURL=sp-radio-group.js.map

package/sp-radio-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-radio-group.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { RadioGroup } from './src/RadioGroup.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-radio-group', RadioGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-radio-group': RadioGroup;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,cAAAA,MAAkB,sBAC3B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,iBAAkBD,CAAU",
+  "names": ["RadioGroup", "defineElement"]
+}

package/sp-radio.d.ts

@@ -0,0 +1,6 @@
+import { Radio } from './src/Radio.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-radio': Radio;
+    }
+}

package/sp-radio.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Radio } from "./src/Radio.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-radio", Radio);
+//# sourceMappingURL=sp-radio.dev.js.map

package/sp-radio.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-radio.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Radio } from './src/Radio.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-radio', Radio);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-radio': Radio;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,cAAc,YAAY,KAAK;",
+  "names": []
+}

package/sp-radio.js

@@ -0,0 +1,2 @@
+"use strict";import{Radio as e}from"./src/Radio.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-radio",e);
+//# sourceMappingURL=sp-radio.js.map

package/sp-radio.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-radio.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Radio } from './src/Radio.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-radio', Radio);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-radio': Radio;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,SAAAA,MAAa,iBACtB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,WAAYD,CAAK",
+  "names": ["Radio", "defineElement"]
+}

package/src/Radio.d.ts

@@ -0,0 +1,38 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+declare const Radio_base: typeof SpectrumElement & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
+/**
+ * @element sp-radio
+ *
+ * @slot - text label of the Radio button
+ * @attr invalid - Uses the invalid style
+ * @attr disabled - Uses the disabled style
+ * @attr checked - Represents when the input is checked
+ * @attr value - Identifies this radio button within its radio group
+ *
+ * @fires change - When the input is interacted with and its state is changed
+ */
+export declare class Radio extends Radio_base {
+    static get styles(): CSSResultArray;
+    /**
+     * When this control is rendered, focus it automatically
+     * @private
+     */
+    autofocus: boolean;
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    emphasized: boolean;
+    invalid: boolean;
+    readonly: boolean;
+    click(): void;
+    protected manageAutoFocus(): void;
+    protected activate(): void;
+    protected handleKeyup(event: KeyboardEvent): void;
+    protected render(): TemplateResult;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+}
+export {};

package/src/Radio.dev.js

@@ -0,0 +1,133 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SizedMixin,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+import radioStyles from "./radio.css.js";
+export class Radio extends SizedMixin(
+  FocusVisiblePolyfillMixin(SpectrumElement),
+  { noDefaultSize: true }
+) {
+  constructor() {
+    super(...arguments);
+    this.autofocus = false;
+    this.value = "";
+    this.checked = false;
+    this.disabled = false;
+    this.emphasized = false;
+    this.invalid = false;
+    this.readonly = false;
+  }
+  static get styles() {
+    return [radioStyles];
+  }
+  click() {
+    if (this.disabled) {
+      return;
+    }
+    this.activate();
+  }
+  manageAutoFocus() {
+    if (this.autofocus) {
+      this.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          code: "Tab"
+        })
+      );
+      this.focus();
+    }
+  }
+  activate() {
+    if (this.checked) {
+      return;
+    }
+    this.checked = true;
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleKeyup(event) {
+    if (event.code === "Space") {
+      this.activate();
+    }
+  }
+  render() {
+    return html`
+            <div id="input"></div>
+            <span id="button"></span>
+            <span id="label" role="presentation"><slot></slot></span>
+        `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("role", "radio");
+    if (!this.hasAttribute("tabindex")) {
+      this.tabIndex = 0;
+    }
+    this.manageAutoFocus();
+    this.addEventListener("click", this.activate);
+    this.addEventListener("keyup", this.handleKeyup);
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("invalid")) {
+      if (this.invalid) {
+        this.setAttribute("aria-invalid", "true");
+      } else {
+        this.removeAttribute("aria-invalid");
+      }
+    }
+    if (changes.has("checked")) {
+      if (this.checked) {
+        this.setAttribute("aria-checked", "true");
+      } else {
+        this.setAttribute("aria-checked", "false");
+      }
+    }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], Radio.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Radio.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Radio.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Radio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Radio.prototype, "emphasized", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Radio.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Radio.prototype, "readonly", 2);
+//# sourceMappingURL=Radio.dev.js.map

package/src/Radio.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Radio.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } 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 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 SizedMixin(\n    FocusVisiblePolyfillMixin(SpectrumElement),\n    { noDefaultSize: true }\n) {\n    public static override 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 override 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    public override 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    protected activate(): void {\n        if (this.checked) {\n            return;\n        }\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 override 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 override 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 override 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-disabled');\n            }\n        }\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/Radio.js

@@ -0,0 +1,6 @@
+"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(l,s,e,a)=>{for(var i=a>1?void 0:a?c(s,e):s,d=l.length-1,o;d>=0;d--)(o=l[d])&&(i=(a?o(s,e,i):o(i))||i);return a&&i&&u(s,e,i),i};import{html as p,SizedMixin as n,SpectrumElement as h}from"@spectrum-web-components/base";import{property as r}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as f}from"@spectrum-web-components/shared/src/focus-visible.js";import b from"./radio.css.js";export class Radio extends n(f(h),{noDefaultSize:!0}){constructor(){super(...arguments);this.autofocus=!1;this.value="";this.checked=!1;this.disabled=!1;this.emphasized=!1;this.invalid=!1;this.readonly=!1}static get styles(){return[b]}click(){this.disabled||this.activate()}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focus())}activate(){this.checked||(this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleKeyup(e){e.code==="Space"&&this.activate()}render(){return p`
+            <div id="input"></div>
+            <span id="button"></span>
+            <span id="label" role="presentation"><slot></slot></span>
+        `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","radio"),this.hasAttribute("tabindex")||(this.tabIndex=0),this.manageAutoFocus(),this.addEventListener("click",this.activate),this.addEventListener("keyup",this.handleKeyup)}updated(e){super.updated(e),e.has("invalid")&&(this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")),e.has("checked")&&(this.checked?this.setAttribute("aria-checked","true"):this.setAttribute("aria-checked","false")),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}t([r({type:Boolean})],Radio.prototype,"autofocus",2),t([r({type:String,reflect:!0})],Radio.prototype,"value",2),t([r({type:Boolean,reflect:!0})],Radio.prototype,"checked",2),t([r({type:Boolean,reflect:!0})],Radio.prototype,"disabled",2),t([r({type:Boolean,reflect:!0})],Radio.prototype,"emphasized",2),t([r({type:Boolean,reflect:!0})],Radio.prototype,"invalid",2),t([r({type:Boolean,reflect:!0})],Radio.prototype,"readonly",2);
+//# sourceMappingURL=Radio.js.map

package/src/Radio.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Radio.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } 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 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 SizedMixin(\n    FocusVisiblePolyfillMixin(SpectrumElement),\n    { noDefaultSize: true }\n) {\n    public static override 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 override 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    public override 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    protected activate(): void {\n        if (this.checked) {\n            return;\n        }\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 override 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 override 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 override 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-disabled');\n            }\n        }\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,6BAAAC,MAAiC,uDAE1C,OAAOC,MAAiB,iBAajB,aAAM,cAAcJ,EACvBG,EAA0BF,CAAe,EACzC,CAAE,cAAe,EAAK,CAC1B,CAAE,CAHK,kCAaH,KAAgB,UAAY,GAG5B,KAAO,MAAQ,GAGf,KAAO,QAAU,GAGjB,KAAO,SAAW,GAGlB,KAAO,WAAa,GAGpB,KAAO,QAAU,GAGjB,KAAO,SAAW,GA3BlB,WAA2B,QAAyB,CAChD,MAAO,CAACG,CAAW,CACvB,CA2BgB,OAAc,CACtB,KAAK,UAGT,KAAK,SAAS,CAClB,CAEU,iBAAwB,CAC1B,KAAK,YAML,KAAK,cACD,IAAI,cAAc,UAAW,CACzB,KAAM,KACV,CAAC,CACL,EACA,KAAK,MAAM,EAEnB,CAEU,UAAiB,CACnB,KAAK,UAGT,KAAK,QAAU,GACf,KAAK,cACD,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACJ,CAEU,YAAYC,EAA4B,CAC1CA,EAAM,OAAS,SACf,KAAK,SAAS,CAEtB,CAEmB,QAAyB,CACxC,OAAON;AAAA;AAAA;AAAA;AAAA,SAKX,CAEmB,aAAaO,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,OAAO,EAC5B,KAAK,aAAa,UAAU,IAC7B,KAAK,SAAW,GAEpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,QAAS,KAAK,QAAQ,EAC5C,KAAK,iBAAiB,QAAS,KAAK,WAAW,CACnD,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,eAAgB,MAAM,EAExC,KAAK,gBAAgB,cAAc,GAGvCA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,eAAgB,MAAM,EAExC,KAAK,aAAa,eAAgB,OAAO,GAG7CA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CAzGoBC,EAAA,CADfL,EAAS,CAAE,KAAM,OAAQ,CAAC,GAZlB,MAaO,yBAGTK,EAAA,CADNL,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAfhC,MAgBF,qBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAlBjC,MAmBF,uBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GArBjC,MAsBF,wBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxBjC,MAyBF,0BAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA3BjC,MA4BF,uBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA9BjC,MA+BF",
+  "names": ["html", "SizedMixin", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "radioStyles", "event", "changes", "__decorateClass"]
+}