@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.131

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/radio/radio.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.bench.js","sourceRoot":"","sources":["../../../src/radio/radio.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/radio/radio.d.ts

@@ -0,0 +1,62 @@
+import { BaseCheckbox } from '../checkbox/checkbox.base.js';
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
+ *
+ * @tag fluent-radio
+ *
+ * @slot checked-indicator - The checked indicator slot
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
+ * @public
+ */
+export declare class Radio extends BaseCheckbox {
+    constructor();
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
+     * @internal
+     * @override
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
+     */
+    protected requiredChanged(): void;
+    /**
+     * This method is a no-op for the radio component.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
+     */
+    setFormValue(): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+     */
+    setValidity(): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
+     */
+    toggleChecked(force?: boolean): void;
+}

package/dist/esm/radio/radio.js

@@ -1,101 +1,77 @@
-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 { observable } from '@microsoft/fast-element';
-import { keySpace } from '@microsoft/fast-web-utilities';
-import { FormAssociatedRadio } from './radio.form-associated.js';
+import { BaseCheckbox } from '../checkbox/checkbox.base.js';
 /**
  * A Radio Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
  *
- * @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
+ * @tag fluent-radio
+ *
+ * @slot checked-indicator - The checked indicator slot
  * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
  *
  * @public
  */
-export class Radio extends FormAssociatedRadio {
+export class Radio extends BaseCheckbox {
     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';
-        this.proxy.setAttribute('type', 'radio');
+        this.elementInternals.role = 'radio';
     }
-    get radioGroup() {
-        return this.closest('[role=radiogroup]');
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
+     * @internal
+     * @override
+     */
+    disabledChanged(prev, next) {
+        super.disabledChanged(prev, next);
+        this.$emit('disabled', next, { bubbles: true });
     }
     /**
+     * This method is a no-op for the radio component.
+     *
      * @internal
+     * @override
+     * @remarks
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
      */
-    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;
-            }
-        }
+    requiredChanged() {
+        return;
     }
     /**
+     * This method is a no-op for the radio component.
+     *
      * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
      */
-    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;
-                }
-            }
-        }
+    setFormValue() {
+        return;
     }
-    isInsideRadioGroup() {
-        return this.radioGroup !== null;
+    /**
+     * Sets the validity of the control.
+     *
+     * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+     */
+    setValidity() {
+        this.elementInternals.setValidity({});
     }
     /**
-     * Handles key presses on the radio.
-     * @beta
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
      */
-    keypressHandler(e) {
-        var _a;
-        switch (e.key) {
-            case keySpace:
-                if (!this.checked && !((_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a.readOnly)) {
-                    this.checked = true;
-                }
-                return;
-        }
-        return true;
+    toggleChecked(force = true) {
+        super.toggleChecked(force);
     }
 }
-__decorate([
-    observable
-], Radio.prototype, "name", void 0);
-__decorate([
-    observable
-], Radio.prototype, "defaultSlottedNodes", void 0);
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAejE;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,mBAAmB;IAwC5C;QACE,KAAK,EAAE,CAAC;QAlCV;;;;;WAKG;QACI,iBAAY,GAAW,IAAI,CAAC;QA6BjC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,CAAC;IAtBD,IAAY,UAAU;QACpB,OAAQ,IAAoB,CAAC,OAAO,CAAC,mBAAmB,CAAsB,CAAC;IACjF,CAAC;IAED;;OAEG;IACI,qBAAqB;;QAC1B,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YAC1D,6DAA6D;YAC7D,sEAAsE;YACtE,+CAA+C;YAC/C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,KAAK,CAAC;gBAC5C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;aAC3B;SACF;IACH,CAAC;IAOD;;OAEG;IACI,iBAAiB;;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,MAAM,CAAC,MAAK,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE;YACvG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACpC;SACF;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACtB,6DAA6D;gBAC7D,sEAAsE;gBACtE,+CAA+C;gBAC/C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;oBAC9B,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,KAAK,CAAC;oBAC5C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;iBAC3B;aACF;SACF;IACH,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC;IAED;;;OAGG;IACI,eAAe,CAAC,CAAgB;;QACrC,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,QAAQ;gBACX,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,CAAA,EAAE;oBAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;iBACrB;gBACD,OAAO;SACV;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AArFC;IADC,UAAU;mCACU;AAcrB;IADC,UAAU;kDACyB"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}

package/dist/esm/radio/radio.options.d.ts

@@ -0,0 +1,14 @@
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { Radio } from './radio.js';
+/**
+ * @public
+ */
+export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'focus' | 'setAttribute' | 'getAttribute'>;
+/**
+ * Radio configuration options
+ * @public
+ */
+export type RadioOptions = {
+    checkedIndicator?: StaticallyComposableHTML<Radio>;
+};
+export type { CheckboxSize as RadioSize } from '../checkbox/checkbox.options.js';

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.options.js","sourceRoot":"","sources":["../../../src/radio/radio.options.ts"],"names":[],"mappings":""}

package/dist/esm/radio/radio.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for the Radio component
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -1,118 +1,125 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
-import { borderRadiusCircular, borderRadiusSmall, colorCompoundBrandForeground1, colorCompoundBrandForeground1Pressed, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
-/** Radio styles
+import { checkedState, disabledState } from '../styles/states/index.js';
+import { borderRadiusCircular, borderRadiusMedium, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the Radio component
+ *
  * @public
  */
 export const styles = css `
-  ${display('inline-grid')}
+  ${display('inline-flex')}
 
   :host {
-    grid-auto-flow: column;
-    grid-template-columns: max-content;
-    gap: ${spacingHorizontalXS};
-    align-items: center;
-    height: 32px;
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    user-select: none;
-    color: blue;
-    color: var(--state-color, ${colorNeutralForeground3});
-    padding-inline-end: ${spacingHorizontalS};
-    --control-border-color: ${colorNeutralStrokeAccessible};
-    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
-    --state-color: ${colorNeutralForeground3};
-  }
-  :host([disabled]) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
-  }
-  .label {
-    cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
-  }
-  .label__hidden {
-    display: none;
-  }
-  .control {
-    box-sizing: border-box;
-    align-items: center;
-    border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
+    --size: 16px;
+    aspect-ratio: 1;
+    background-color: ${colorNeutralBackground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
     border-radius: ${borderRadiusCircular};
-    display: flex;
-    height: 16px;
-    justify-content: center;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    box-sizing: border-box;
     position: relative;
-    width: 16px;
-    justify-self: center;
+    width: var(--size);
+  }
+
+  :host([size='large']) {
+    --size: 20px;
   }
+
   .checked-indicator {
+    aspect-ratio: 1;
     border-radius: ${borderRadiusCircular};
-    height: 10px;
-    opacity: 0;
-    width: 10px;
+    color: ${colorNeutralForegroundInverted};
+    inset: 0;
+    margin: auto;
+    position: absolute;
+    width: calc(var(--size) * 0.625);
   }
-  :host([aria-checked='false']:hover) .control {
-    color: ${colorNeutralForeground2};
+
+  :host(:not([slot='input']))::after {
+    content: '' / '';
+    position: absolute;
+    display: block;
+    inset: -8px;
+    box-sizing: border-box;
+    outline: none;
+    border: ${strokeWidthThick} solid ${colorTransparentStroke};
+    border-radius: ${borderRadiusMedium};
   }
-  :host(:focus-visible) {
-    border-radius: ${borderRadiusSmall};
-    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+
+  :host(:not([slot='input']):focus-visible)::after {
+    border-color: ${colorStrokeFocus2};
   }
-  :host(:hover) .control {
+
+  :host(:hover) {
     border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
-  }
-  :host([aria-checked='true']) .checked-indicator {
-    opacity: 1;
-  }
-  :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
-  }
-  :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
+
+  :host(${checkedState}) {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+
+  :host(${checkedState}) .checked-indicator {
+    background-color: ${colorCompoundBrandBackground};
   }
-  :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: ${colorCompoundBrandStrokeHover};
+
+  :host(${checkedState}:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundHover};
   }
-  :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+
+  :host(:active) {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorCompoundBrandForeground1Pressed};
+
+  :host(${checkedState}:active) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundPressed};
   }
-  :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
-    pointer-events: none;
+
+  :host(:focus-visible) {
+    outline: none;
   }
-  :host([disabled]) .control {
-    pointer-events: none;
-    border-color: ${colorNeutralForegroundDisabled};
+
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
   }
-  :host([disabled]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+
+  :host(${checkedState}${disabledState}) .checked-indicator {
+    background-color: ${colorNeutralStrokeDisabled};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host .control {
-      border-color: InactiveBorder;
+    :host {
+      border-color: FieldText;
+    }
+
+    :host(:not([slot='input']:focus-visible))::after {
+      border-color: Canvas;
     }
-    :host([aria-checked='true']) .checked-indicator,
-    :host([aria-checked='true']:active) .checked-indicator,
-    :host([aria-checked='true']:hover) .checked-indicator {
+
+    :host(:not(${disabledState}):hover),
+    :host(:not([slot='input']):focus-visible)::after {
+      border-color: Highlight;
+    }
+
+    .checked-indicator {
+      color: HighlightText;
+    }
+
+    :host(${checkedState}) .checked-indicator {
+      background-color: FieldText;
+    }
+
+    :host(${checkedState}:not(${disabledState}):hover) .checked-indicator {
       background-color: Highlight;
-      border-color: ActiveBorder;
+    }
+
+    :host(${disabledState}) {
+      border-color: GrayText;
+      color: GrayText;
+    }
+
+    :host(${disabledState}${checkedState}) .checked-indicator {
+      background-color: GrayText;
     }
   `));
 //# sourceMappingURL=radio.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,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,aAAa,CAAC;;;;;WAKf,mBAAmB;;;;;;;;gCAQE,uBAAuB;0BAC7B,kBAAkB;8BACd,4BAA4B;4CACd,6BAA6B;qBACpD,uBAAuB;;;8BAGd,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;;mBAIhC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;oDAQgB,4BAA4B;qBAC3D,oBAAoB;;;;cAI3B,gBAAgB,IAAI,kBAAkB;;;;;;qBAM/B,oBAAoB;;;;;;aAM5B,uBAAuB;;;qBAGf,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;oBAGtB,iCAAiC;;;oBAGjC,mCAAmC;;;;;;gDAMP,4BAA4B;;;kEAGV,6BAA6B;;;oBAG3E,6BAA6B;;;wBAGzB,6BAA6B;;;oBAGjC,+BAA+B;;;kBAGjC,oCAAoC;;;aAGzC,8BAA8B;;;;;oBAKvB,8BAA8B;;;kBAGhC,8BAA8B;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.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,oBAAoB,EACpB,kBAAkB,EAClB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;wBAKF,uBAAuB;cACjC,eAAe,UAAU,4BAA4B;qBAC9C,oBAAoB;;;;;;;;;;;;qBAYpB,oBAAoB;aAC5B,8BAA8B;;;;;;;;;;;;;;cAc7B,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;oBAIjB,iCAAiC;;;UAG3C,YAAY;oBACF,wBAAwB;;;UAGlC,YAAY;wBACE,4BAA4B;;;UAG1C,YAAY;wBACE,iCAAiC;;;;oBAIrC,mCAAmC;;;UAG7C,YAAY;wBACE,mCAAmC;;;;;;;UAOjD,aAAa;wBACC,8BAA8B;oBAClC,0BAA0B;;;UAGpC,YAAY,GAAG,aAAa;wBACd,0BAA0B;;CAEjD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;iBASnB,aAAa;;;;;;;;;YASlB,YAAY;;;;YAIZ,YAAY,QAAQ,aAAa;;;;YAIjC,aAAa;;;;;YAKb,aAAa,GAAG,YAAY;;;GAGrC,CAAC,CACH,CAAC"}

package/dist/esm/radio/radio.template.d.ts

@@ -0,0 +1,16 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { Radio } from './radio.js';
+import type { RadioOptions } from './radio.options.js';
+/**
+ * Generates a template for the {@link (Radio:class)} component.
+ *
+ * @param options - Radio configuration options
+ * @public
+ */
+export declare function radioTemplate<T extends Radio>(options?: RadioOptions): ElementViewTemplate<T>;
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
+export declare const template: ElementViewTemplate<Radio>;

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

@@ -1,32 +1,29 @@
-import { html, slotted } from '@microsoft/fast-element';
-import { staticallyCompose, whitespaceFilter } from '../utils/index.js';
+import { html } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+const checkedIndicator = html.partial(/* html */ `
+    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+`);
+/**
+ * Generates a template for the {@link (Radio:class)} component.
+ *
+ * @param options - Radio configuration options
+ * @public
+ */
 export function radioTemplate(options = {}) {
     return html `
     <template
-      role="radio"
-      aria-checked="${x => x.checked}"
-      aria-required="${x => x.required}"
-      aria-disabled="${x => x.disabled}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+      @keyup="${(x, c) => x.keyupHandler(c.event)}"
     >
-      <div part="control" class="control">
-        <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
-      </div>
-      <label
-        part="label"
-        class="${x => { var _a; return ['label', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && 'label__hidden'].filter(Boolean).join(' '); }}"
-      >
-        <slot
-          ${slotted({
-        property: 'defaultSlottedNodes',
-        filter: whitespaceFilter,
-    })}
-        ></slot>
-      </label>
+      <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
     </template>
   `;
 }
-export const template = radioTemplate({
-    checkedIndicator: html `<div part="checked-indicator" class="checked-indicator"></div>`,
-});
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
+export const template = radioTemplate({ checkedIndicator });
 //# sourceMappingURL=radio.template.js.map

package/dist/esm/radio/radio.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGxE,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;;sBAGM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;uBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;0CAG9B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;iBAIpE,CAAC,CAAC,EAAE,WAAC,OAAA,CAAC,OAAO,EAAE,CAAC,CAAA,MAAA,CAAC,CAAC,mBAAmB,0CAAE,MAAM,CAAA,IAAI,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAA;;;YAGhG,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC;IAChE,gBAAgB,EAAE,IAAI,CAAA,gEAAgE;CACvF,CAAC,CAAC"}
+{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;CAEhD,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;uCAE3B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;GAE/E,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/esm/radio-group/index.d.ts

@@ -0,0 +1,5 @@
+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';

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

@@ -1,4 +1,5 @@
-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';

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"}
+{"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.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

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"}