@vonage/vivid 4.11.0 → 4.12.1

package/shared/key-codes2.cjs

@@ -1,5 +1,81 @@
 'use strict';
 
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
 /**
  * String values for use with KeyboardEvent.key
  */
@@ -7,10 +83,15 @@ const keyArrowDown = "ArrowDown";
 const keyArrowLeft = "ArrowLeft";
 const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
-const keyEnd = "End";
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keyHome = "Home";
+const keyEnd = "End";
+const keyFunction2 = "F2";
+const keyPageDown = "PageDown";
+const keyPageUp = "PageUp";
 const keySpace = " ";
+const keyTab = "Tab";
 
 exports.keyArrowDown = keyArrowDown;
 exports.keyArrowLeft = keyArrowLeft;
@@ -18,5 +99,10 @@ exports.keyArrowRight = keyArrowRight;
 exports.keyArrowUp = keyArrowUp;
 exports.keyEnd = keyEnd;
 exports.keyEnter = keyEnter;
+exports.keyEscape = keyEscape;
+exports.keyFunction2 = keyFunction2;
 exports.keyHome = keyHome;
+exports.keyPageDown = keyPageDown;
+exports.keyPageUp = keyPageUp;
 exports.keySpace = keySpace;
+exports.keyTab = keyTab;

package/shared/key-codes2.js

@@ -1,3 +1,79 @@
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
 /**
  * String values for use with KeyboardEvent.key
  */
@@ -5,9 +81,14 @@ const keyArrowDown = "ArrowDown";
 const keyArrowLeft = "ArrowLeft";
 const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
-const keyEnd = "End";
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keyHome = "Home";
+const keyEnd = "End";
+const keyFunction2 = "F2";
+const keyPageDown = "PageDown";
+const keyPageUp = "PageUp";
 const keySpace = " ";
+const keyTab = "Tab";
 
-export { keyArrowRight as a, keyEnter as b, keyHome as c, keyEnd as d, keyArrowDown as e, keyArrowUp as f, keySpace as g, keyArrowLeft as k };
+export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/listbox.cjs

@@ -1,13 +1,12 @@
 'use strict';
 
-const keyCodes$1 = require('./key-codes2.cjs');
+const keyCodes$1 = require('./key-codes.cjs');
 const index = require('./index.cjs');
 const listboxOption = require('./listbox-option.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const keyCodes = require('./key-codes.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const strings = require('./strings.cjs');
-const numbers = require('./numbers.cjs');
 
 /**
  * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
@@ -642,7 +641,7 @@ class ListboxElement extends Listbox$1 {
                 this.rangeStartIndex = this.activeIndex + 1;
             }
             this.options.forEach((o, i) => {
-                o.checked = numbers.inRange(i, this.rangeStartIndex);
+                o.checked = strings.inRange(i, this.rangeStartIndex);
             });
         }
         else {
@@ -667,7 +666,7 @@ class ListboxElement extends Listbox$1 {
                 this.rangeStartIndex = this.activeIndex;
             }
             this.options.forEach((o, i) => {
-                o.checked = numbers.inRange(i, this.rangeStartIndex, this.options.length);
+                o.checked = strings.inRange(i, this.rangeStartIndex, this.options.length);
             });
         }
         else {
@@ -708,7 +707,7 @@ class ListboxElement extends Listbox$1 {
                 this.rangeStartIndex = this.activeIndex;
             }
             this.options.forEach((o, i) => {
-                o.checked = numbers.inRange(i, this.rangeStartIndex, this.activeIndex + 1);
+                o.checked = strings.inRange(i, this.rangeStartIndex, this.activeIndex + 1);
             });
         }
         else {
@@ -736,7 +735,7 @@ class ListboxElement extends Listbox$1 {
                 this.rangeStartIndex += 1;
             }
             this.options.forEach((o, i) => {
-                o.checked = numbers.inRange(i, this.activeIndex, this.rangeStartIndex);
+                o.checked = strings.inRange(i, this.activeIndex, this.rangeStartIndex);
             });
         }
         else {

package/shared/listbox.js

@@ -1,11 +1,10 @@
-import { k as keyArrowLeft, a as keyArrowRight } from './key-codes2.js';
+import { e as keyArrowLeft, f as keyArrowRight } from './key-codes.js';
 import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
 import { i as isListboxOption } from './listbox-option.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-import { i as inRange } from './numbers.js';
+import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes2.js';
+import { u as uniqueId, i as inRange } from './strings.js';
 
 /**
  * Returns the index of the last element in the array where predicate is true, and -1 otherwise.

package/shared/numbers.cjs

@@ -21,18 +21,6 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
 
-exports.inRange = inRange;
 exports.limit = limit;
 exports.wrapInBounds = wrapInBounds;

package/shared/numbers.js

@@ -19,16 +19,5 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
 
-export { inRange as i, limit as l, wrapInBounds as w };
+export { limit as l, wrapInBounds as w };

package/shared/presentationDate.cjs

@@ -5991,6 +5991,12 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
     this._popupOpen = false;
     this.#dismissOnClickOutside = (event) => {
       if (!this._popupOpen) {
@@ -6081,12 +6087,18 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver = index.Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, index.defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#dismissOnClickOutside);
     this.removeEventListener("focusin", this.#onFocusIn);
     this.removeEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver.disconnect();
   }
   #onFocusIn;
   #onFocusOut;
@@ -6099,6 +6111,8 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
   }
+  #localeChangeHandler;
+  #localeChangeObserver;
   #dismissOnClickOutside;
   #openPopupIfPossible() {
     if (!this.readOnly) {

package/shared/presentationDate.js

@@ -2,7 +2,7 @@ import { c as Button } from './definition11.js';
 import { P as Popup } from './definition64.js';
 import { T as TextField } from './definition56.js';
 import { D as Divider } from './definition22.js';
-import { h as html, F as FoundationElement, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
+import { h as html, F as FoundationElement, O as Observable, g as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
@@ -5989,6 +5989,12 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
     this._popupOpen = false;
     this.#dismissOnClickOutside = (event) => {
       if (!this._popupOpen) {
@@ -6079,12 +6085,18 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver = Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#dismissOnClickOutside);
     this.removeEventListener("focusin", this.#onFocusIn);
     this.removeEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver.disconnect();
   }
   #onFocusIn;
   #onFocusOut;
@@ -6097,6 +6109,8 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
   }
+  #localeChangeHandler;
+  #localeChangeObserver;
   #dismissOnClickOutside;
   #openPopupIfPossible() {
     if (!this.readOnly) {

package/shared/radio.cjs

@@ -1,128 +1,18 @@
 'use strict';
 
-const index = require('./index.cjs');
 const formAssociated = require('./form-associated.cjs');
+const index = require('./index.cjs');
 const keyCodes = require('./key-codes.cjs');
 
 class _Radio extends index.FoundationElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
- *
- * @internal
- */
 class FormAssociatedRadio extends formAssociated.CheckableFormAssociated(_Radio) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
 }
 
-/**
- * A Radio Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual radio control
- * @csspart label - The label
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-let Radio$1 = class Radio extends FormAssociatedRadio {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="radio"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            switch (e.key) {
-                case keyCodes.keySpace:
-                    if (!this.checked && !this.readOnly) {
-                        this.checked = true;
-                    }
-                    return;
-            }
-            return true;
-        };
-        this.proxy.setAttribute("type", "radio");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    /**
-     * @internal
-     */
-    defaultCheckedChanged() {
-        var _a;
-        if (this.$fastController.isConnected && !this.dirtyChecked) {
-            // Setting this.checked will cause us to enter a dirty state,
-            // but if we are clean when defaultChecked is changed, we want to stay
-            // in a clean state, so reset this.dirtyChecked
-            if (!this.isInsideRadioGroup()) {
-                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
-                this.dirtyChecked = false;
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        var _a, _b;
-        super.connectedCallback();
-        this.validate();
-        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
-            this.getAttribute("tabindex") === null) {
-            if (!this.disabled) {
-                this.setAttribute("tabindex", "0");
-            }
-        }
-        if (this.checkedAttribute) {
-            if (!this.dirtyChecked) {
-                // Setting this.checked will cause us to enter a dirty state,
-                // but if we are clean when defaultChecked is changed, we want to stay
-                // in a clean state, so reset this.dirtyChecked
-                if (!this.isInsideRadioGroup()) {
-                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
-                    this.dirtyChecked = false;
-                }
-            }
-        }
-    }
-    isInsideRadioGroup() {
-        const parent = this.closest("[role=radiogroup]");
-        return parent !== null;
-    }
-    /**
-     * @internal
-     */
-    clickHandler(e) {
-        if (!this.disabled && !this.readOnly && !this.checked) {
-            this.checked = true;
-        }
-    }
-};
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], Radio$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.observable
-], Radio$1.prototype, "name", void 0);
-index.__decorate([
-    index.observable
-], Radio$1.prototype, "defaultSlottedNodes", void 0);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -132,10 +22,86 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Radio extends Radio$1 {
+class Radio extends FormAssociatedRadio {
   constructor() {
-    super(...arguments);
+    super();
     this.ariaLabel = null;
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="radio"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
+      switch (e.key) {
+        case keyCodes.keySpace:
+          if (!this.checked && !this.readOnly) {
+            this.checked = true;
+          }
+          return;
+      }
+      return true;
+    };
+    this.proxy.setAttribute("type", "radio");
+  }
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+  /**
+   * @internal
+   */
+  defaultCheckedChanged() {
+    if (this.$fastController.isConnected && !this.dirtyChecked) {
+      if (!this.isInsideRadioGroup()) {
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.validate();
+    if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
+      if (!this.disabled) {
+        this.setAttribute("tabindex", "0");
+      }
+    }
+    if (this.checkedAttribute) {
+      if (!this.dirtyChecked) {
+        if (!this.isInsideRadioGroup()) {
+          this.checked = this.defaultChecked;
+          this.dirtyChecked = false;
+        }
+      }
+    }
+  }
+  isInsideRadioGroup() {
+    const parent = this.closest(
+      "[role=radiogroup]"
+    );
+    return parent !== null;
+  }
+  /**
+   * @internal
+   */
+  clickHandler(_) {
+    if (!this.disabled && !this.readOnly && !this.checked) {
+      this.checked = true;
+    }
   }
 }
 __decorateClass([
@@ -147,5 +113,14 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], Radio.prototype, "connotation");
+__decorateClass([
+  index.attr({ attribute: "readonly", mode: "boolean" })
+], Radio.prototype, "readOnly");
+__decorateClass([
+  index.observable
+], Radio.prototype, "name");
+__decorateClass([
+  index.observable
+], Radio.prototype, "defaultSlottedNodes");
 
 exports.Radio = Radio;