@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.70

package/dist/esm/radio-group/index.js

@@ -1,6 +1,6 @@
-export * from './radio-group.js';
+export { RadioGroup } from './radio-group.js';
+export { RadioGroupOrientation } from './radio-group.options.js';
 export { definition as RadioGroupDefinition } from './radio-group.definition.js';
 export { styles as RadioGroupStyles } from './radio-group.styles.js';
 export { template as RadioGroupTemplate } from './radio-group.template.js';
-export { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/radio-group/radio-group.bench.js

@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as radioDefinition } from '../radio/radio.definition.js';
+import { definition as radioGroupDefinition } from './radio-group.definition.js';
+radioGroupDefinition.define(FluentDesignSystem.registry);
+radioDefinition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const radioGroup = document.createElement('fluent-radio-group');
+    const radio = document.createElement('fluent-radio');
+    const radio2 = document.createElement('fluent-radio');
+    const radio3 = document.createElement('fluent-radio');
+    radio.appendChild(document.createTextNode('Radio 1'));
+    radio2.appendChild(document.createTextNode('Radio 2'));
+    radio3.appendChild(document.createTextNode('Radio 3'));
+    radioGroup.appendChild(radio);
+    radioGroup.appendChild(radio2);
+    radioGroup.appendChild(radio3);
+    return radioGroup;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=radio-group.bench.js.map

package/dist/esm/radio-group/radio-group.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.bench.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEjF,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACzD,eAAe,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvD,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/radio-group/radio-group.js

@@ -1,29 +1,471 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr } from '@microsoft/fast-element';
-import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { __decorate } from "tslib";
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { findLastIndex } from '@microsoft/fast-web-utilities';
+import { Radio } from '../radio/radio.js';
+import { getDirection } from '../utils/direction.js';
+import { getRootActiveElement } from '../utils/root-active-element.js';
+import { RadioGroupOrientation } from './radio-group.options.js';
 /**
- * The base class used for constructing a fluent-radio-group custom element
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
  * @public
+ *
+ * @slot - The default slot for the radio group
  */
-export class RadioGroup extends FASTRadioGroup {
+class RadioGroup extends FASTElement {
+    /**
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+     *
+     * @param prev - the previous index
+     * @param next - the current index
+     * @internal
+     */
+    checkedIndexChanged(prev, next) {
+        if (!this.enabledRadios) {
+            return;
+        }
+        this.checkRadio(next);
+    }
+    /**
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
+     *
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        var _a;
+        if (this.$fastController.isConnected) {
+            this.checkedIndex = -1;
+            (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+                radio.disabled = radio.disabledAttribute || this.disabled;
+            });
+            this.restrictFocus();
+        }
+    }
+    /**
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     */
+    initialValueChanged(prev, next) {
+        this.value = next !== null && next !== void 0 ? next : '';
+    }
+    /**
+     * Sets the `name` attribute on all child radios when the `name` property changes.
+     *
+     * @internal
+     */
+    nameChanged(prev, next) {
+        var _a;
+        if (this.isConnected && next) {
+            (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+                radio.name = this.name;
+            });
+        }
+    }
+    /**
+     * Sets the ariaOrientation attribute when the orientation changes.
+     *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
+     * @internal
+     */
+    orientationChanged(prev, next) {
+        var _a;
+        this.elementInternals.ariaOrientation = (_a = this.orientation) !== null && _a !== void 0 ? _a : RadioGroupOrientation.horizontal;
+    }
+    /**
+     * Updates the enabled radios collection when properties on the child radios change.
+     *
+     * @param prev - the previous radios
+     * @param next - the current radios
+     */
+    radiosChanged(prev, next) {
+        const setSize = next === null || next === void 0 ? void 0 : next.length;
+        if (!setSize) {
+            return;
+        }
+        if (!this.name && next.every(x => x.name === next[0].name)) {
+            this.name = next[0].name;
+        }
+        const checkedIndex = findLastIndex(this.enabledRadios, x => x.initialChecked);
+        next.forEach((radio, index) => {
+            var _a;
+            radio.ariaPosInSet = `${index + 1}`;
+            radio.ariaSetSize = `${setSize}`;
+            if (this.initialValue && !this.dirtyState) {
+                radio.checked = radio.value === this.initialValue;
+            }
+            else {
+                radio.checked = index === checkedIndex;
+            }
+            radio.name = (_a = this.name) !== null && _a !== void 0 ? _a : radio.name;
+            radio.disabled = this.disabled || radio.disabledAttribute;
+        });
+        if (!this.dirtyState && this.initialValue) {
+            this.value = this.initialValue;
+        }
+        if (!this.value) {
+            // TODO: Switch to standard `Array.findLastIndex` when TypeScript 5 is available
+            this.checkedIndex = checkedIndex;
+        }
+        // prettier-ignore
+        const radioIds = next.map(radio => radio.id).join(' ').trim();
+        if (radioIds) {
+            this.setAttribute('aria-owns', radioIds);
+        }
+        Updates.enqueue(() => {
+            this.restrictFocus();
+        });
+    }
+    /**
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
+     */
+    requiredChanged(prev, next) {
+        this.elementInternals.ariaRequired = next ? 'true' : null;
+        this.setValidity();
+    }
+    /**
+     * A collection of child radios that are not disabled.
+     *
+     * @internal
+     */
+    get enabledRadios() {
+        var _a, _b;
+        if (this.disabled) {
+            return [];
+        }
+        return (_b = (_a = this.radios) === null || _a === void 0 ? void 0 : _a.filter(x => !x.disabled)) !== null && _b !== void 0 ? _b : [];
+    }
+    /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
+     * @internal
+     */
+    get validationMessage() {
+        var _a, _b;
+        if (this.elementInternals.validationMessage) {
+            return this.elementInternals.validationMessage;
+        }
+        if ((_b = (_a = this.enabledRadios) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.validationMessage) {
+            return this.enabledRadios[0].validationMessage;
+        }
+        if (!this._validationFallbackMessage) {
+            const validationMessageFallbackControl = document.createElement('input');
+            validationMessageFallbackControl.type = 'radio';
+            validationMessageFallbackControl.required = true;
+            validationMessageFallbackControl.checked = false;
+            this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+        }
+        return this._validationFallbackMessage;
+    }
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity() {
+        return this.elementInternals.validity;
+    }
+    /**
+     * The current value of the checked radio.
+     *
+     * @public
+     */
+    get value() {
+        var _a, _b;
+        Observable.notify(this, 'value');
+        return (_b = (_a = this.enabledRadios.find(x => x.checked)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    }
+    set value(next) {
+        const index = this.enabledRadios.findIndex(x => x.value === next);
+        this.checkedIndex = index;
+        if (this.$fastController.isConnected) {
+            this.setFormValue(next);
+            this.setValidity();
+        }
+        Observable.track(this, 'value');
+    }
+    /**
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
+     */
+    changeHandler(e) {
+        if (this === e.target) {
+            return true;
+        }
+        this.dirtyState = true;
+        const radioIndex = this.enabledRadios.indexOf(e.target);
+        this.checkRadio(radioIndex);
+        return true;
+    }
+    /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
+     * @internal
+     */
+    checkRadio(index = this.checkedIndex) {
+        let checkedIndex = this.checkedIndex;
+        this.enabledRadios.forEach((item, i) => {
+            const shouldCheck = i === index;
+            item.checked = shouldCheck;
+            if (shouldCheck) {
+                checkedIndex = i;
+            }
+        });
+        this.checkedIndex = checkedIndex;
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /**
+     * Handles click events for the radio group.
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(e) {
+        var _a;
+        if (this === e.target) {
+            (_a = this.enabledRadios[Math.max(0, this.checkedIndex)]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return true;
+    }
     constructor() {
-        super(...arguments);
+        var _a;
+        super();
         /**
-         * sets radio layout styles
+         * Indicates that the value has been changed by the user.
+         */
+        this.dirtyState = false;
+        /**
+         * Disables the radio group and child radios.
          *
          * @public
          * @remarks
-         * HTML Attribute: stacked
+         * HTML Attribute: `disabled`
+         */
+        this.disabled = false;
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
          */
-        this.stacked = false;
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'radiogroup';
+        this.elementInternals.ariaOrientation = (_a = this.orientation) !== null && _a !== void 0 ? _a : RadioGroupOrientation.horizontal;
+    }
+    /**
+     * Focuses the checked radio or the first enabled radio.
+     *
+     * @internal
+     */
+    focus() {
+        var _a;
+        (_a = this.enabledRadios[Math.max(0, this.checkedIndex)]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e) {
+        if (!this.disabled) {
+            this.enabledRadios.forEach(radio => {
+                radio.tabIndex = 0;
+            });
+        }
+        return true;
+    }
+    /**
+     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     *
+     * @param e - the focusout event
+     * @internal
+     */
+    focusoutHandler(e) {
+        var _a, _b;
+        if (((_a = this.radios) === null || _a === void 0 ? void 0 : _a.includes(e.relatedTarget)) && ((_b = this.radios) === null || _b === void 0 ? void 0 : _b.some(x => x.checked))) {
+            this.restrictFocus();
+        }
+        return true;
+    }
+    formResetCallback() {
+        this.dirtyState = false;
+        this.checkedIndex = -1;
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    getEnabledIndexInBounds(index, upperBound = this.enabledRadios.length) {
+        if (upperBound === 0) {
+            return -1;
+        }
+        return (index + upperBound) % upperBound;
+    }
+    /**
+     * Handles keydown events for the radio group.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keydownHandler(e) {
+        var _a, _b;
+        const isRtl = getDirection(this) === 'rtl';
+        const checkedIndex = (_a = this.enabledRadios.findIndex(x => x === getRootActiveElement(this))) !== null && _a !== void 0 ? _a : this.checkedIndex;
+        let increment = 0;
+        switch (e.key) {
+            case 'ArrowLeft': {
+                increment = isRtl ? 1 : -1;
+                break;
+            }
+            case 'ArrowUp': {
+                increment = -1;
+                break;
+            }
+            case 'ArrowRight': {
+                increment = isRtl ? -1 : 1;
+                break;
+            }
+            case 'ArrowDown': {
+                increment = 1;
+                break;
+            }
+            case 'Tab': {
+                this.restrictFocus();
+                break;
+            }
+            case ' ': {
+                this.checkRadio();
+                break;
+            }
+        }
+        if (!increment) {
+            return true;
+        }
+        const nextIndex = checkedIndex + increment;
+        this.checkedIndex = this.getEnabledIndexInBounds(nextIndex);
+        (_b = this.enabledRadios[this.checkedIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    /**
+     *
+     * @param e - the disabled event
+     */
+    disabledRadioHandler(e) {
+        if (e.detail === true && e.target.checked) {
+            this.checkedIndex = -1;
+        }
+    }
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
+    /**
+     * Resets the `tabIndex` for all child radios when the radio group loses focus.
+     *
+     * @internal
+     */
+    restrictFocus() {
+        let activeIndex = Math.max(this.checkedIndex, 0);
+        const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this));
+        if (focusedRadioIndex !== -1) {
+            activeIndex = focusedRadioIndex;
+        }
+        activeIndex = this.getEnabledIndexInBounds(activeIndex);
+        this.enabledRadios.forEach((item, index) => {
+            item.tabIndex = index === activeIndex ? 0 : -1;
+        });
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        this.elementInternals.setFormValue(value, value !== null && value !== void 0 ? value : state);
+    }
+    /**
+     * Sets the validity of the element.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags, message, anchor) {
+        if (this.$fastController.isConnected) {
+            if (this.disabled || !this.required) {
+                this.elementInternals.setValidity({});
+                return;
+            }
+            this.elementInternals.setValidity({ valueMissing: this.required && !this.value, ...flags }, message !== null && message !== void 0 ? message : this.validationMessage, anchor !== null && anchor !== void 0 ? anchor : this.enabledRadios[0]);
+        }
+    }
+    /**
+     * Updates the collection of child radios when the slot changes.
+     *
+     * @param e - the slot change event
+     * @internal
+     */
+    slotchangeHandler(e) {
+        Updates.enqueue(() => {
+            this.radios = [...this.querySelectorAll('*')].filter(x => x instanceof Radio);
+        });
     }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+RadioGroup.formAssociated = true;
+__decorate([
+    observable
+], RadioGroup.prototype, "checkedIndex", void 0);
+__decorate([
+    attr({ attribute: 'disabled', mode: 'boolean' })
+], RadioGroup.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'value', mode: 'fromView' })
+], RadioGroup.prototype, "initialValue", void 0);
+__decorate([
+    attr
+], RadioGroup.prototype, "name", void 0);
+__decorate([
+    attr
+], RadioGroup.prototype, "orientation", void 0);
+__decorate([
+    observable
+], RadioGroup.prototype, "radios", void 0);
 __decorate([
     attr({ mode: 'boolean' })
-], RadioGroup.prototype, "stacked", void 0);
+], RadioGroup.prototype, "required", void 0);
+export { RadioGroup };
 //# sourceMappingURL=radio-group.js.map

package/dist/esm/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,cAAc;IAA9C;;QACE;;;;;;WAMG;QAEI,YAAO,GAAY,KAAK,CAAC;IAClC,CAAC;CAAA;AADC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACM"}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.ts"],"names":[],"mappings":"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"}

package/dist/esm/radio-group/radio-group.options.js

@@ -0,0 +1,7 @@
+import { Orientation } from '@microsoft/fast-web-utilities';
+/**
+ * Radio Group orientation
+ * @public
+ */
+export const RadioGroupOrientation = Orientation;
+//# sourceMappingURL=radio-group.options.js.map

package/dist/esm/radio-group/radio-group.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.options.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC"}

package/dist/esm/radio-group/radio-group.styles.js

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
-import { colorNeutralForeground1, colorNeutralForegroundDisabled, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
+import { checkedState, disabledState } from '../styles/states/index.js';
+import { colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, spacingVerticalL, } from '../theme/design-tokens.js';
+import { display } from '../utils/index.js';
 /** RadioGroup styles
  * @public
  */
@@ -8,45 +9,39 @@ export const styles = css `
   ${display('flex')}
 
   :host {
-    align-items: flex-start;
-    flex-direction: column;
-    row-gap: var(${spacingVerticalS});
-  }
-  :host([disabled]) ::slotted([role='radio']) {
-    --control-border-color: var(${colorNeutralForegroundDisabled});
-    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
-    --state-color: var(${colorNeutralForegroundDisabled});
-  }
-  ::slotted([slot='label']) {
-    color: var(${colorNeutralForeground1});
-    padding: var(${spacingVerticalS}) var(${spacingHorizontalS}) var(${spacingVerticalS}) var(${spacingHorizontalXS});
-    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
-    cursor: default;
-  }
-  .positioning-region {
-    display: flex;
-    flex-wrap: wrap;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+    gap: ${spacingVerticalL};
   }
-  :host([orientation='vertical']) .positioning-region {
+
+  :host(${disabledState}),
+  :host([orientation='vertical']) {
     flex-direction: column;
     justify-content: flex-start;
   }
-  :host([orientation='horizontal']) .positioning-region {
+
+  :host([orientation='horizontal']) {
     flex-direction: row;
   }
-  :host([orientation='horizontal']) ::slotted([role='radio']) {
-    padding-inline-end: var(${spacingHorizontalS});
+
+  ::slotted(*) {
+    color: ${colorNeutralForeground3};
+  }
+
+  ::slotted(:hover) {
+    color: ${colorNeutralForeground2};
   }
-  :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
-    display: flex;
-    flex-direction: column;
-    padding-inline: var(${spacingHorizontalS});
-    height: auto;
-    align-items: center;
-    justify-content: center;
+
+  ::slotted(:active) {
+    color: ${colorNeutralForeground1};
   }
-  :host([disabled]) ::slotted([role='radio']) {
-    pointer-events: none;
+
+  ::slotted(${disabledState}) {
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  ::slotted(${checkedState}) {
+    color: ${colorNeutralForeground1};
   }
 `;
 //# sourceMappingURL=radio-group.styles.js.map

package/dist/esm/radio-group/radio-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;mBAKA,gBAAgB;;;kCAGD,8BAA8B;gDAChB,8BAA8B;yBACrD,8BAA8B;;;iBAGtC,uBAAuB;mBACrB,gBAAgB,SAAS,kBAAkB,SAAS,gBAAgB,SAAS,mBAAmB;gBACnG,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;;;;;;;;;;;;;;;8BAe9E,kBAAkB;;;;;0BAKtB,kBAAkB;;;;;;;;CAQ3C,CAAC"}
+{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;WAKR,gBAAgB;;;UAGjB,aAAa;;;;;;;;;;;aAWV,uBAAuB;;;;aAIvB,uBAAuB;;;;aAIvB,uBAAuB;;;cAGtB,aAAa;aACd,8BAA8B;;;cAG7B,YAAY;aACb,uBAAuB;;CAEnC,CAAC"}

package/dist/esm/radio-group/radio-group.template.js

@@ -1,3 +1,17 @@
-import { radioGroupTemplate } from '@microsoft/fast-foundation/radio-group.js';
+import { html } from '@microsoft/fast-element';
+export function radioGroupTemplate() {
+    return html `
+    <template
+      @disabled="${(x, c) => x.disabledRadioHandler(c.event)}"
+      @change="${(x, c) => x.changeHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @focusin="${(x, c) => x.focusinHandler(c.event)}"
+      @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+      <slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot>
+    </template>
+  `;
+}
 export const template = radioGroupTemplate();
 //# sourceMappingURL=radio-group.template.js.map