@ni/nimble-components 11.12.1 → 11.14.0

package/dist/all-components-bundle.js

@@ -11483,6 +11483,570 @@
     ], NumberField$1.prototype, "defaultSlottedNodes", void 0);
     applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
 
+    /**
+     * The template for the {@link @microsoft/fast-foundation#RadioGroup} component.
+     * @public
+     */
+    const radioGroupTemplate = (context, definition) => html `
+    <template
+        role="radiogroup"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @focusout="${(x, c) => x.focusOutHandler(c.event)}"
+    >
+        <slot name="label"></slot>
+        <div
+            class="positioning-region ${x => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
+            part="positioning-region"
+        >
+            <slot
+                ${slotted({
+    property: "slottedRadioButtons",
+    filter: elements("[role=radio]"),
+})}
+            ></slot>
+        </div>
+    </template>
+`;
+
+    /**
+     * An Radio Group Custom HTML Element.
+     * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
+     *
+     * @slot label - The slot for the label
+     * @slot - The default slot for radio buttons
+     * @csspart positioning-region - The positioning region for laying out the radios
+     * @fires change - Fires a custom 'change' event when the value changes
+     *
+     * @public
+     */
+    class RadioGroup$1 extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * The orientation of the group
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: orientation
+             */
+            this.orientation = Orientation.horizontal;
+            this.radioChangeHandler = (e) => {
+                const changedRadio = e.target;
+                if (changedRadio.checked) {
+                    this.slottedRadioButtons.forEach((radio) => {
+                        if (radio !== changedRadio) {
+                            radio.checked = false;
+                            if (!this.isInsideFoundationToolbar) {
+                                radio.setAttribute("tabindex", "-1");
+                            }
+                        }
+                    });
+                    this.selectedRadio = changedRadio;
+                    this.value = changedRadio.value;
+                    changedRadio.setAttribute("tabindex", "0");
+                    this.focusedRadio = changedRadio;
+                }
+                e.stopPropagation();
+            };
+            this.moveToRadioByIndex = (group, index) => {
+                const radio = group[index];
+                if (!this.isInsideToolbar) {
+                    radio.setAttribute("tabindex", "0");
+                    if (radio.readOnly) {
+                        this.slottedRadioButtons.forEach((nextRadio) => {
+                            if (nextRadio !== radio) {
+                                nextRadio.setAttribute("tabindex", "-1");
+                            }
+                        });
+                    }
+                    else {
+                        radio.checked = true;
+                        this.selectedRadio = radio;
+                    }
+                }
+                this.focusedRadio = radio;
+                radio.focus();
+            };
+            this.moveRightOffGroup = () => {
+                var _a;
+                (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            };
+            this.moveLeftOffGroup = () => {
+                var _a;
+                (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+            };
+            /**
+             * @internal
+             */
+            this.focusOutHandler = (e) => {
+                const group = this.slottedRadioButtons;
+                const radio = e.target;
+                const index = radio !== null ? group.indexOf(radio) : 0;
+                const focusedIndex = this.focusedRadio
+                    ? group.indexOf(this.focusedRadio)
+                    : -1;
+                if ((focusedIndex === 0 && index === focusedIndex) ||
+                    (focusedIndex === group.length - 1 && focusedIndex === index)) {
+                    if (!this.selectedRadio) {
+                        this.focusedRadio = group[0];
+                        this.focusedRadio.setAttribute("tabindex", "0");
+                        group.forEach((nextRadio) => {
+                            if (nextRadio !== this.focusedRadio) {
+                                nextRadio.setAttribute("tabindex", "-1");
+                            }
+                        });
+                    }
+                    else {
+                        this.focusedRadio = this.selectedRadio;
+                        if (!this.isInsideFoundationToolbar) {
+                            this.selectedRadio.setAttribute("tabindex", "0");
+                            group.forEach((nextRadio) => {
+                                if (nextRadio !== this.selectedRadio) {
+                                    nextRadio.setAttribute("tabindex", "-1");
+                                }
+                            });
+                        }
+                    }
+                }
+                return true;
+            };
+            /**
+             * @internal
+             */
+            this.clickHandler = (e) => {
+                const radio = e.target;
+                if (radio) {
+                    const group = this.slottedRadioButtons;
+                    if (radio.checked || group.indexOf(radio) === 0) {
+                        radio.setAttribute("tabindex", "0");
+                        this.selectedRadio = radio;
+                    }
+                    else {
+                        radio.setAttribute("tabindex", "-1");
+                        this.selectedRadio = null;
+                    }
+                    this.focusedRadio = radio;
+                }
+                e.preventDefault();
+            };
+            this.shouldMoveOffGroupToTheRight = (index, group, key) => {
+                return index === group.length && this.isInsideToolbar && key === keyArrowRight;
+            };
+            this.shouldMoveOffGroupToTheLeft = (group, key) => {
+                const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+                return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
+            };
+            this.checkFocusedRadio = () => {
+                if (this.focusedRadio !== null &&
+                    !this.focusedRadio.readOnly &&
+                    !this.focusedRadio.checked) {
+                    this.focusedRadio.checked = true;
+                    this.focusedRadio.setAttribute("tabindex", "0");
+                    this.focusedRadio.focus();
+                    this.selectedRadio = this.focusedRadio;
+                }
+            };
+            this.moveRight = (e) => {
+                const group = this.slottedRadioButtons;
+                let index = 0;
+                index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
+                if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
+                    this.moveRightOffGroup();
+                    return;
+                }
+                else if (index === group.length) {
+                    index = 0;
+                }
+                /* looping to get to next radio that is not disabled */
+                /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
+                while (index < group.length && group.length > 1) {
+                    if (!group[index].disabled) {
+                        this.moveToRadioByIndex(group, index);
+                        break;
+                    }
+                    else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+                        break;
+                    }
+                    else if (index + 1 >= group.length) {
+                        if (this.isInsideToolbar) {
+                            break;
+                        }
+                        else {
+                            index = 0;
+                        }
+                    }
+                    else {
+                        index += 1;
+                    }
+                }
+            };
+            this.moveLeft = (e) => {
+                const group = this.slottedRadioButtons;
+                let index = 0;
+                index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+                index = index < 0 ? group.length - 1 : index;
+                if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
+                    this.moveLeftOffGroup();
+                    return;
+                }
+                /* looping to get to next radio that is not disabled */
+                while (index >= 0 && group.length > 1) {
+                    if (!group[index].disabled) {
+                        this.moveToRadioByIndex(group, index);
+                        break;
+                    }
+                    else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+                        break;
+                    }
+                    else if (index - 1 < 0) {
+                        index = group.length - 1;
+                    }
+                    else {
+                        index -= 1;
+                    }
+                }
+            };
+            /**
+             * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+             * navigation is different when there is an ancestor with role='toolbar'
+             *
+             * @internal
+             */
+            this.keydownHandler = (e) => {
+                const key = e.key;
+                if (key in ArrowKeys && this.isInsideFoundationToolbar) {
+                    return true;
+                }
+                switch (key) {
+                    case keyEnter: {
+                        this.checkFocusedRadio();
+                        break;
+                    }
+                    case keyArrowRight:
+                    case keyArrowDown: {
+                        if (this.direction === Direction.ltr) {
+                            this.moveRight(e);
+                        }
+                        else {
+                            this.moveLeft(e);
+                        }
+                        break;
+                    }
+                    case keyArrowLeft:
+                    case keyArrowUp: {
+                        if (this.direction === Direction.ltr) {
+                            this.moveLeft(e);
+                        }
+                        else {
+                            this.moveRight(e);
+                        }
+                        break;
+                    }
+                    default: {
+                        return true;
+                    }
+                }
+            };
+        }
+        readOnlyChanged() {
+            if (this.slottedRadioButtons !== undefined) {
+                this.slottedRadioButtons.forEach((radio) => {
+                    if (this.readOnly) {
+                        radio.readOnly = true;
+                    }
+                    else {
+                        radio.readOnly = false;
+                    }
+                });
+            }
+        }
+        disabledChanged() {
+            if (this.slottedRadioButtons !== undefined) {
+                this.slottedRadioButtons.forEach((radio) => {
+                    if (this.disabled) {
+                        radio.disabled = true;
+                    }
+                    else {
+                        radio.disabled = false;
+                    }
+                });
+            }
+        }
+        nameChanged() {
+            if (this.slottedRadioButtons) {
+                this.slottedRadioButtons.forEach((radio) => {
+                    radio.setAttribute("name", this.name);
+                });
+            }
+        }
+        valueChanged() {
+            if (this.slottedRadioButtons) {
+                this.slottedRadioButtons.forEach((radio) => {
+                    if (radio.value === this.value) {
+                        radio.checked = true;
+                        this.selectedRadio = radio;
+                    }
+                });
+            }
+            this.$emit("change");
+        }
+        slottedRadioButtonsChanged(oldValue, newValue) {
+            if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
+                this.setupRadioButtons();
+            }
+        }
+        get parentToolbar() {
+            return this.closest('[role="toolbar"]');
+        }
+        get isInsideToolbar() {
+            var _a;
+            return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
+        }
+        get isInsideFoundationToolbar() {
+            var _a;
+            return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.direction = getDirection(this);
+            this.setupRadioButtons();
+        }
+        disconnectedCallback() {
+            this.slottedRadioButtons.forEach((radio) => {
+                radio.removeEventListener("change", this.radioChangeHandler);
+            });
+        }
+        setupRadioButtons() {
+            const checkedRadios = this.slottedRadioButtons.filter((radio) => {
+                return radio.hasAttribute("checked");
+            });
+            const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
+            if (numberOfCheckedRadios > 1) {
+                const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+                lastCheckedRadio.checked = true;
+            }
+            let foundMatchingVal = false;
+            this.slottedRadioButtons.forEach((radio) => {
+                if (this.name !== undefined) {
+                    radio.setAttribute("name", this.name);
+                }
+                if (this.disabled) {
+                    radio.disabled = true;
+                }
+                if (this.readOnly) {
+                    radio.readOnly = true;
+                }
+                if (this.value && this.value === radio.value) {
+                    this.selectedRadio = radio;
+                    this.focusedRadio = radio;
+                    radio.checked = true;
+                    radio.setAttribute("tabindex", "0");
+                    foundMatchingVal = true;
+                }
+                else {
+                    if (!this.isInsideFoundationToolbar) {
+                        radio.setAttribute("tabindex", "-1");
+                    }
+                    radio.checked = false;
+                }
+                radio.addEventListener("change", this.radioChangeHandler);
+            });
+            if (this.value === undefined && this.slottedRadioButtons.length > 0) {
+                const checkedRadios = this.slottedRadioButtons.filter((radio) => {
+                    return radio.hasAttribute("checked");
+                });
+                const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
+                if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
+                    const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+                    lastCheckedRadio.checked = true;
+                    this.focusedRadio = lastCheckedRadio;
+                    lastCheckedRadio.setAttribute("tabindex", "0");
+                }
+                else {
+                    this.slottedRadioButtons[0].setAttribute("tabindex", "0");
+                    this.focusedRadio = this.slottedRadioButtons[0];
+                }
+            }
+        }
+    }
+    __decorate$1([
+        attr({ attribute: "readonly", mode: "boolean" })
+    ], RadioGroup$1.prototype, "readOnly", void 0);
+    __decorate$1([
+        attr({ attribute: "disabled", mode: "boolean" })
+    ], RadioGroup$1.prototype, "disabled", void 0);
+    __decorate$1([
+        attr
+    ], RadioGroup$1.prototype, "name", void 0);
+    __decorate$1([
+        attr
+    ], RadioGroup$1.prototype, "value", void 0);
+    __decorate$1([
+        attr
+    ], RadioGroup$1.prototype, "orientation", void 0);
+    __decorate$1([
+        observable
+    ], RadioGroup$1.prototype, "childItems", void 0);
+    __decorate$1([
+        observable
+    ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
+
+    /**
+     * The template for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+     * @public
+     */
+    const radioTemplate = (context, definition) => html `
+    <template
+        role="radio"
+        class="${x => (x.checked ? "checked" : "")} ${x => x.readOnly ? "readonly" : ""}"
+        aria-checked="${x => x.checked}"
+        aria-required="${x => x.required}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        <div part="control" class="control">
+            <slot name="checked-indicator">
+                ${definition.checkedIndicator || ""}
+            </slot>
+        </div>
+        <label
+            part="label"
+            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
+    ? "label"
+    : "label label__hidden"}"
+        >
+            <slot ${slotted("defaultSlottedNodes")}></slot>
+        </label>
+    </template>
+`;
+
+    class _Radio extends FoundationElement {
+    }
+    /**
+     * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+     *
+     * @internal
+     */
+    class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+        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
+     */
+    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 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;
+            }
+        }
+    }
+    __decorate$1([
+        attr({ attribute: "readonly", mode: "boolean" })
+    ], Radio.prototype, "readOnly", void 0);
+    __decorate$1([
+        observable
+    ], Radio.prototype, "name", void 0);
+    __decorate$1([
+        observable
+    ], Radio.prototype, "defaultSlottedNodes", void 0);
+
     /**
      * a method to filter out any whitespace _only_ nodes, to be used inside a template
      * @param value - The Node that is being inspected
@@ -14250,7 +14814,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$v = css `
+    const styles$x = css `
     :host {
         contain: layout;
         display: block;
@@ -14274,7 +14838,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$v
+        styles: styles$x
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14419,6 +14983,22 @@
     	return {red, green, blue, alpha};
     }
 
+    /**
+     * Convert a hexadecimal color string to an RGBA CSS color string
+     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
+     * @param hexValue Hex color (with or without a starting '#')
+     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
+     * @returns An rgba()-formatted CSS color string
+     */
+    function hexToRgbaCssColor(hexValue, alpha) {
+        const { red, green, blue } = hexRgb(hexValue);
+        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    }
+
+    const modalBackdropColorThemeLight = hexToRgbaCssColor(Black, 0.3);
+    const modalBackdropColorThemeDark = hexToRgbaCssColor(Black, 0.6);
+    const modalBackdropColorThemeColor = hexToRgbaCssColor(Black, 0.6);
+
     const Theme = {
         light: 'light',
         dark: 'dark',
@@ -14448,6 +15028,7 @@
         informationColor: 'information-color',
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
+        modalBackdropColor: 'modal-backdrop-color',
         popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
@@ -14618,7 +15199,7 @@
 
     const template$7 = html `<slot></slot>`;
 
-    const styles$u = css `
+    const styles$w = css `
     :host {
         display: contents;
     }
@@ -14674,25 +15255,13 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$u,
+        styles: styles$w,
         template: template$7
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleDesignSystemProvider());
 
-    /**
-     * Convert a hexadecimal color string to an RGBA CSS color string
-     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
-     * @param hexValue Hex color (with or without a starting '#')
-     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
-     * @returns An rgba()-formatted CSS color string
-     */
-    function hexToRgbaCssColor(hexValue, alpha) {
-        const { red, green, blue } = hexRgb(hexValue);
-        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-    }
-
     // Color Tokens
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
@@ -14713,6 +15282,7 @@
     const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
+    const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
@@ -14824,6 +15394,18 @@
     function getFillDownColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
+    function getModalBackdropForTheme(element) {
+        switch (theme.getValueFor(element)) {
+            case Theme.light:
+                return modalBackdropColorThemeLight;
+            case Theme.dark:
+                return modalBackdropColorThemeDark;
+            case Theme.color:
+                return modalBackdropColorThemeColor;
+            default:
+                return modalBackdropColorThemeLight;
+        }
+    }
 
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
@@ -14898,7 +15480,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$t = css `
+    const styles$v = css `
     ${display('inline-block')}
 
     :host {
@@ -14958,7 +15540,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$t
+        styles: styles$v
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15564,7 +16146,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$s = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -15644,7 +16226,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$s,
+        styles: styles$u,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15729,7 +16311,7 @@
         block: 'block'
     };
 
-    const styles$r = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -15936,7 +16518,7 @@
             `));
 
     // prettier-ignore
-    const styles$q = styles$r
+    const styles$s = styles$t
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16050,7 +16632,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$q,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16058,7 +16640,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
     // prettier-ignore
-    const styles$p = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -16069,6 +16651,13 @@
         outline: none;
         border: none;
         box-sizing: border-box;
+        transition: box-shadow ${smallDelay};
+    }
+
+    @media (prefers-reduced-motion) {
+        :host {
+            transition-duration: 0s;
+        }
     }
 
     :host(:hover) {
@@ -16095,7 +16684,6 @@
         cursor: inherit;
         font: inherit;
         outline: none;
-        transition: box-shadow ${smallDelay};
         padding: 0px;
     }
 
@@ -16159,12 +16747,6 @@
     slot[name='end'] {
         display: none;
     }
-
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
-    }
 `.withBehaviors(themeBehavior(Theme.light, css `
                 :host {
                     --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
@@ -16217,14 +16799,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$p,
+        styles: styles$r,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$o = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -16277,7 +16859,7 @@
     :host(${focusVisible}) .control {
         border-color: ${borderHoverColor};
         outline: 2px solid ${borderHoverColor};
-        outline-offset: 2px;
+        outline-offset: 1px;
     }
 
     .label {
@@ -16342,7 +16924,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$o,
+        styles: styles$q,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -16360,7 +16942,7 @@
     </template
 `;
 
-    const styles$n = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -16411,7 +16993,7 @@
         const composedIcon = iconClass.compose({
             baseName,
             template: template$6,
-            styles: styles$n,
+            styles: styles$p,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16449,7 +17031,7 @@
         block: 'block'
     };
 
-    const styles$m = css `
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -16663,7 +17245,7 @@
             }
         `));
 
-    const styles$l = css `
+    const styles$n = css `
     .error-icon {
         display: none;
     }
@@ -16701,9 +17283,9 @@
     }
 `;
 
-    const styles$k = css `
-    ${styles$m}
-    ${styles$l}
+    const styles$m = css `
+    ${styles$o}
+    ${styles$n}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -16952,7 +17534,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$k,
+        styles: styles$m,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -16989,7 +17571,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
-    const styles$j = css `
+    const styles$l = css `
     ${display('grid')}
 
     dialog {
@@ -16998,7 +17580,24 @@
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
         max-width: 50%;
     }
-`;
+`.withBehaviors(
+    /*
+     * We cannot use the modalBackdropColor token directly because the backdrop
+     * element is not a descendant of the nimble-theme-provider element.
+     */
+    themeBehavior(Theme.light, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeLight};
+            }
+        `), themeBehavior(Theme.dark, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeDark};
+            }
+        `), themeBehavior(Theme.color, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeColor};
+            }
+        `));
 
     const template$5 = html `
     <template>
@@ -17087,7 +17686,7 @@
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
         template: template$5,
-        styles: styles$j,
+        styles: styles$l,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
@@ -18181,7 +18780,7 @@
         slideOutOptions
     };
 
-    const styles$i = css `
+    const styles$k = css `
     ${display('block')}
 
     :host {
@@ -18228,7 +18827,7 @@
     .overlay {
         position: fixed;
         inset: 0px;
-        background: ${popupBorderColor};
+        background: ${modalBackdropColor};
         touch-action: none;
     }
 
@@ -18493,7 +19092,7 @@
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
         template: dialogTemplate,
-        styles: styles$i
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20092,7 +20691,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$h = css `
+    const styles$j = css `
     ${display('flex')}
 
     :host {
@@ -20172,11 +20771,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$h
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$g = css `
+    const styles$i = css `
     ${display('grid')}
 
     :host {
@@ -20231,11 +20830,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$g
+        styles: styles$i
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$f = css `
+    const styles$h = css `
     ${display('inline-block')}
 
     :host {
@@ -20253,8 +20852,8 @@
     }
 `;
 
-    const styles$e = css `
-    ${styles$r}
+    const styles$g = css `
+    ${styles$t}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20356,7 +20955,7 @@
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template: template$4,
-        styles: styles$e,
+        styles: styles$g,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -20573,14 +21172,14 @@
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
         template: template$3,
-        styles: styles$f,
+        styles: styles$h,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$d = css `
+    const styles$f = css `
     ${display('grid')}
 
     :host {
@@ -20678,7 +21277,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$d,
+        styles: styles$f,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -20692,9 +21291,9 @@
         block: 'block'
     };
 
-    const styles$c = css `
+    const styles$e = css `
     ${display('inline-block')}
-    ${styles$l}
+    ${styles$n}
 
     :host {
         font: ${bodyFont};
@@ -20904,7 +21503,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$c,
+        styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20939,8 +21538,155 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
+    const styles$d = css `
+    ${display('inline-flex')}
+
+    :host {
+        font: ${buttonLabelFont};
+        align-items: center;
+        outline: none;
+        width: fit-content;
+        cursor: pointer;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+    }
+
+    .control {
+        width: calc(${controlHeight} / 2);
+        height: calc(${controlHeight} / 2);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        border: ${borderWidth} solid ${borderColor};
+        border-radius: 100%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: box-shadow ${smallDelay};
+        ${
+/*
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
+ * Set it to 0 to ensure the outline is just as high as the control.
+ */ ''}
+        line-height: 0;
+    }
+
+    :host([disabled]) .control {
+        background-color: rgba(${borderRgbPartialColor}, 0.1);
+        border-color: rgba(${borderRgbPartialColor}, 0.2);
+    }
+
+    :host(:not([disabled]):not(:active):hover) .control {
+        border-color: ${borderHoverColor};
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+    }
+
+    :host(${focusVisible}) .control {
+        border-color: ${borderHoverColor};
+    }
+
+    :host(${focusVisible}) .control::after {
+        content: '';
+        position: absolute;
+        width: calc(2px + ${controlHeight} / 2);
+        height: calc(2px + ${controlHeight} / 2);
+        border: 2px solid ${borderHoverColor};
+        border-radius: 100%;
+    }
+
+    .label {
+        font: inherit;
+        color: ${bodyFontColor};
+        padding-left: 1ch;
+        cursor: inherit;
+    }
+
+    :host([disabled]) .label {
+        color: ${bodyDisabledFontColor};
+    }
+
+    slot[name='checked-indicator'] {
+        display: none;
+    }
+
+    slot[name='checked-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
+    }
+
+    :host(.checked) slot[name='checked-indicator'] {
+        display: contents;
+    }
+
+    slot[name='checked-indicator'] circle {
+        fill: ${borderColor};
+    }
+
+    :host([disabled]) slot[name='checked-indicator'] circle {
+        fill: rgba(${borderRgbPartialColor}, 0.3);
+    }
+`;
+
+    /**
+     * A nimble-styled radio button
+     */
+    class RadioButton extends Radio {
+    }
+    const nimbleRadioButton = RadioButton.compose({
+        baseName: 'radio-button',
+        baseClass: Radio,
+        template: radioTemplate,
+        styles: styles$d,
+        checkedIndicator: circleFilled16X16.data
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioButton());
+
+    const styles$c = css `
+    ${display('inline-block')}
+
+    .positioning-region {
+        display: flex;
+        gap: ${standardPadding};
+    }
+
+    :host([orientation='vertical']) .positioning-region {
+        flex-direction: column;
+    }
+
+    :host([orientation='horizontal']) .positioning-region {
+        flex-direction: row;
+    }
+
+    slot[name='label'] {
+        font: ${controlLabelFont};
+        color: ${controlLabelFontColor};
+    }
+
+    :host([disabled]) slot[name='label'] {
+        color: ${controlLabelDisabledFontColor};
+    }
+`;
+
+    /**
+     * A nimble-styled grouping element for radio buttons
+     */
+    class RadioGroup extends RadioGroup$1 {
+    }
+    const nimbleRadioGroup = RadioGroup.compose({
+        baseName: 'radio-group',
+        baseClass: RadioGroup$1,
+        template: radioGroupTemplate,
+        styles: styles$c,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
+
     const styles$b = css `
-    ${styles$m}
+    ${styles$o}
 `;
 
     /**
@@ -21060,7 +21806,6 @@
 
     :host([aria-checked='true']) .checked-indicator-spacer {
         flex-grow: 1;
-        transition: flex-grow ${smallDelay} ease-in-out;
     }
 
     .checked-indicator {
@@ -21115,7 +21860,6 @@
 
     :host([aria-checked='true']) .checked-indicator-inner {
         opacity: 1;
-        transition: opacity ${smallDelay} ease-in-out;
     }
 
     slot[name='checked-message']::slotted(*) {
@@ -21579,7 +22323,7 @@
     /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
-    ${styles$l}
+    ${styles$n}
 
     :host {
         font: ${bodyFont};