@fluentui/react-radio 9.4.7 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.5.0)
+
+Thu, 17 Jul 2025 13:45:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.4.7..@fluentui/react-radio_v9.5.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-label to v9.3.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.4.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.4.6..@fluentui/react-radio_v9.4.7)
 
 ### Patches

package/lib/components/Radio/useRadioStyles.styles.raw.js

@@ -0,0 +1,201 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+export const radioClassNames = {
+    root: 'fui-Radio',
+    indicator: 'fui-Radio__indicator',
+    input: 'fui-Radio__input',
+    label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = makeResetStyles({
+    display: 'inline-flex',
+    position: 'relative',
+    ...createFocusOutlineStyle({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = makeStyles({
+    vertical: {
+        flexDirection: 'column',
+        alignItems: 'center'
+    }
+});
+const useInputBaseClassName = makeResetStyles({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,
+    height: '100%',
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    ':enabled': {
+        cursor: 'pointer',
+        [`& ~ .${radioClassNames.label}`]: {
+            cursor: 'pointer'
+        }
+    },
+    // Colors for the unchecked state
+    ':enabled:not(:checked)': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: tokens.colorNeutralForeground3
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: tokens.colorNeutralStrokeAccessible,
+            '@media (forced-colors: active)': {
+                borderColor: 'ButtonBorder'
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: tokens.colorNeutralForeground2
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: tokens.colorNeutralStrokeAccessibleHover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: tokens.colorNeutralForeground1
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    // Colors for the checked state
+    ':enabled:checked': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: tokens.colorNeutralForeground1
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: tokens.colorCompoundBrandStroke,
+            color: tokens.colorCompoundBrandForeground1,
+            '@media (forced-colors: active)': {
+                borderColor: 'Highlight',
+                color: 'Highlight',
+                '::after': {
+                    backgroundColor: 'Highlight'
+                }
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: tokens.colorCompoundBrandStrokeHover,
+                color: tokens.colorCompoundBrandForeground1Hover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: tokens.colorCompoundBrandStrokePressed,
+                color: tokens.colorCompoundBrandForeground1Pressed
+            }
+        }
+    },
+    // Colors for the disabled state
+    ':disabled': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: tokens.colorNeutralForegroundDisabled,
+            cursor: 'default',
+            '@media (forced-colors: active)': {
+                color: 'GrayText'
+            }
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: tokens.colorNeutralStrokeDisabled,
+            color: tokens.colorNeutralForegroundDisabled,
+            '@media (forced-colors: active)': {
+                borderColor: 'GrayText',
+                color: 'GrayText',
+                '::after': {
+                    backgroundColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useInputStyles = makeStyles({
+    below: {
+        width: '100%',
+        height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`
+    },
+    // If the indicator has no children, use the ::after pseudo-element for the checked state
+    defaultIndicator: {
+        [`:checked ~ .${radioClassNames.indicator}::after`]: {
+            content: '""'
+        }
+    },
+    // If the indicator has a child, hide it until the radio is checked
+    customIndicator: {
+        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
+            opacity: '0'
+        }
+    }
+});
+const useIndicatorBaseClassName = makeResetStyles({
+    position: 'relative',
+    width: indicatorSize,
+    height: indicatorSize,
+    fontSize: '12px',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    border: tokens.strokeWidthThin + ' solid',
+    borderRadius: tokens.borderRadiusCircular,
+    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    '::after': {
+        position: 'absolute',
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: tokens.borderRadiusCircular,
+        // Use a transform to avoid pixel rounding errors at 125% DPI
+        // https://github.com/microsoft/fluentui/issues/30025
+        transform: 'scale(0.625)',
+        backgroundColor: 'currentColor'
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = makeStyles({
+    base: {
+        alignSelf: 'center',
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`
+    },
+    after: {
+        paddingLeft: tokens.spacingHorizontalXS,
+        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.
+        marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`
+    },
+    below: {
+        paddingTop: tokens.spacingVerticalXS,
+        textAlign: 'center'
+    }
+});
+/**
+ * Apply styling to the Radio slots based on the state
+ */ export const useRadioStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

package/lib/components/Radio/useRadioStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  'use no memo';\n\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","display","position","style","selector","useRootStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/RadioGroup/useRadioGroupStyles.styles.raw.js

@@ -0,0 +1,21 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const radioGroupClassNames = {
+    root: 'fui-RadioGroup'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'flex-start'
+    },
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+/**
+ * Apply styling to the RadioGroup slots based on the state
+ */ export const useRadioGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
+    return state;
+};

package/lib/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","radioGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","useRadioGroupStyles_unstable","state","styles","className","layout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aACrBC,qBAAqBC,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMG,MAAM,KAAK,cAAcF,OAAOJ,QAAQ,EAC9CG,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Radio/useRadioStyles.styles.raw.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    radioClassNames: function() {
+        return radioClassNames;
+    },
+    useRadioStyles_unstable: function() {
+        return useRadioStyles_unstable;
+    }
+});
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const radioClassNames = {
+    root: 'fui-Radio',
+    indicator: 'fui-Radio__indicator',
+    input: 'fui-Radio__input',
+    label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    position: 'relative',
+    ...(0, _reacttabster.createFocusOutlineStyle)({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column',
+        alignItems: 'center'
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: `calc(${indicatorSize} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`,
+    height: '100%',
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    ':enabled': {
+        cursor: 'pointer',
+        [`& ~ .${radioClassNames.label}`]: {
+            cursor: 'pointer'
+        }
+    },
+    // Colors for the unchecked state
+    ':enabled:not(:checked)': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
+            '@media (forced-colors: active)': {
+                borderColor: 'ButtonBorder'
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground2
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.label}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground1
+            },
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    // Colors for the checked state
+    ':enabled:checked': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorCompoundBrandStroke,
+            color: _reacttheme.tokens.colorCompoundBrandForeground1,
+            '@media (forced-colors: active)': {
+                borderColor: 'Highlight',
+                color: 'Highlight',
+                '::after': {
+                    backgroundColor: 'Highlight'
+                }
+            }
+        },
+        ':hover': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorCompoundBrandStrokeHover,
+                color: _reacttheme.tokens.colorCompoundBrandForeground1Hover
+            }
+        },
+        ':hover:active': {
+            [`& ~ .${radioClassNames.indicator}`]: {
+                borderColor: _reacttheme.tokens.colorCompoundBrandStrokePressed,
+                color: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
+            }
+        }
+    },
+    // Colors for the disabled state
+    ':disabled': {
+        [`& ~ .${radioClassNames.label}`]: {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            cursor: 'default',
+            '@media (forced-colors: active)': {
+                color: 'GrayText'
+            }
+        },
+        [`& ~ .${radioClassNames.indicator}`]: {
+            borderColor: _reacttheme.tokens.colorNeutralStrokeDisabled,
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            '@media (forced-colors: active)': {
+                borderColor: 'GrayText',
+                color: 'GrayText',
+                '::after': {
+                    backgroundColor: 'GrayText'
+                }
+            }
+        }
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    below: {
+        width: '100%',
+        height: `calc(${indicatorSize} + 2 * ${_reacttheme.tokens.spacingVerticalS})`
+    },
+    // If the indicator has no children, use the ::after pseudo-element for the checked state
+    defaultIndicator: {
+        [`:checked ~ .${radioClassNames.indicator}::after`]: {
+            content: '""'
+        }
+    },
+    // If the indicator has a child, hide it until the radio is checked
+    customIndicator: {
+        [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
+            opacity: '0'
+        }
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    width: indicatorSize,
+    height: indicatorSize,
+    fontSize: '12px',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    border: _reacttheme.tokens.strokeWidthThin + ' solid',
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    '::after': {
+        position: 'absolute',
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        // Use a transform to avoid pixel rounding errors at 125% DPI
+        // https://github.com/microsoft/fluentui/issues/30025
+        transform: 'scale(0.625)',
+        backgroundColor: 'currentColor'
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = (0, _react.makeStyles)({
+    base: {
+        alignSelf: 'center',
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
+    },
+    after: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS,
+        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+        // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.
+        marginTop: `calc((${indicatorSize} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSize} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    },
+    below: {
+        paddingTop: _reacttheme.tokens.spacingVerticalXS,
+        textAlign: 'center'
+    }
+});
+const useRadioStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Radio/useRadioStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked)': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n      '@media (forced-colors: active)': {\n        borderColor: 'ButtonBorder',\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n      '@media (forced-colors: active)': {\n        borderColor: 'Highlight',\n        color: 'Highlight',\n        '::after': {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  // Colors for the disabled state\n  ':disabled': {\n    [`& ~ .${radioClassNames.label}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n      cursor: 'default',\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        borderColor: 'GrayText',\n        color: 'GrayText',\n        '::after': {\n          backgroundColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n\n  // If the indicator has no children, use the ::after pseudo-element for the checked state\n  defaultIndicator: {\n    [`:checked ~ .${radioClassNames.indicator}::after`]: {\n      content: '\"\"',\n    },\n  },\n\n  // If the indicator has a child, hide it until the radio is checked\n  customIndicator: {\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  position: 'relative',\n  width: indicatorSize,\n  height: indicatorSize,\n  fontSize: '12px',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  '::after': {\n    position: 'absolute',\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transform to avoid pixel rounding errors at 125% DPI\n    // https://github.com/microsoft/fluentui/issues/30025\n    transform: 'scale(0.625)',\n    backgroundColor: 'currentColor',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState): RadioState => {\n  'use no memo';\n\n  const { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["radioClassNames","useRadioStyles_unstable","root","indicator","input","label","indicatorSize","useRootBaseClassName","makeResetStyles","display","position","createFocusOutlineStyle","style","selector","useRootStyles","makeStyles","vertical","flexDirection","alignItems","useInputBaseClassName","left","top","width","tokens","spacingHorizontalS","height","boxSizing","margin","opacity","cursor","color","colorNeutralForeground3","borderColor","colorNeutralStrokeAccessible","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","colorCompoundBrandStroke","colorCompoundBrandForeground1","backgroundColor","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputStyles","below","spacingVerticalS","defaultIndicator","content","customIndicator","useIndicatorBaseClassName","fontSize","flexShrink","justifyContent","overflow","border","strokeWidthThin","borderRadius","borderRadiusCircular","fill","pointerEvents","transform","useLabelStyles","base","alignSelf","padding","after","paddingLeft","spacingHorizontalXS","marginTop","lineHeightBase300","marginBottom","paddingTop","spacingVerticalXS","textAlign","state","labelPosition","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","children","indicatorBaseClassName","labelStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,eAAAA;eAAAA;;IA2MAC,uBAAAA;eAAAA;;;8BAjN2B;4BACjB;uBACmC;AAInD,MAAMD,kBAA8C;IACzDE,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AAEA,+DAA+D;AAC/D,MAAMC,gBAAgB;AAEtB,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3CC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA,qCAAAA,EAAwB;QAAEC,OAAO,CAAC;QAAGC,UAAU;IAAe,EAAE;AACrE;AAEA,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/BC,UAAU;QACRC,eAAe;QACfC,YAAY;IACd;AACF;AAEA,MAAMC,wBAAwBX,IAAAA,sBAAAA,EAAgB;IAC5CE,UAAU;IACVU,MAAM;IACNC,KAAK;IACLC,OAAO,CAAC,KAAK,EAAEhB,cAAc,OAAO,EAAEiB,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,CAAC;IAClEC,QAAQ;IACRC,WAAW;IACXC,QAAQ;IACRC,SAAS;IAET,YAAY;QACVC,QAAQ;QACR,CAAC,CAAC,KAAK,EAAE7B,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;YACjCwB,QAAQ;QACV;IACF;IAEA,iCAAiC;IACjC,0BAA0B;QACxB,CAAC,CAAC,KAAK,EAAE7B,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;YACjCyB,OAAOP,kBAAAA,CAAOQ,uBAAuB;QACvC;QACA,CAAC,CAAC,KAAK,EAAE/B,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;YACrC6B,aAAaT,kBAAAA,CAAOU,4BAA4B;YAChD,kCAAkC;gBAChCD,aAAa;YACf;QACF;QAEA,UAAU;YACR,CAAC,CAAC,KAAK,EAAEhC,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;gBACjCyB,OAAOP,kBAAAA,CAAOW,uBAAuB;YACvC;YACA,CAAC,CAAC,KAAK,EAAElC,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;gBACrC6B,aAAaT,kBAAAA,CAAOY,iCAAiC;YACvD;QACF;QAEA,iBAAiB;YACf,CAAC,CAAC,KAAK,EAAEnC,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;gBACjCyB,OAAOP,kBAAAA,CAAOa,uBAAuB;YACvC;YACA,CAAC,CAAC,KAAK,EAAEpC,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;gBACrC6B,aAAaT,kBAAAA,CAAOc,mCAAmC;YACzD;QACF;IACF;IAEA,+BAA+B;IAC/B,oBAAoB;QAClB,CAAC,CAAC,KAAK,EAAErC,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;YACjCyB,OAAOP,kBAAAA,CAAOa,uBAAuB;QACvC;QACA,CAAC,CAAC,KAAK,EAAEpC,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;YACrC6B,aAAaT,kBAAAA,CAAOe,wBAAwB;YAC5CR,OAAOP,kBAAAA,CAAOgB,6BAA6B;YAC3C,kCAAkC;gBAChCP,aAAa;gBACbF,OAAO;gBACP,WAAW;oBACTU,iBAAiB;gBACnB;YACF;QACF;QAEA,UAAU;YACR,CAAC,CAAC,KAAK,EAAExC,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;gBACrC6B,aAAaT,kBAAAA,CAAOkB,6BAA6B;gBACjDX,OAAOP,kBAAAA,CAAOmB,kCAAkC;YAClD;QACF;QAEA,iBAAiB;YACf,CAAC,CAAC,KAAK,EAAE1C,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;gBACrC6B,aAAaT,kBAAAA,CAAOoB,+BAA+B;gBACnDb,OAAOP,kBAAAA,CAAOqB,oCAAoC;YACpD;QACF;IACF;IAEA,gCAAgC;IAChC,aAAa;QACX,CAAC,CAAC,KAAK,EAAE5C,gBAAgBK,KAAK,CAAC,CAAC,CAAC,EAAE;YACjCyB,OAAOP,kBAAAA,CAAOsB,8BAA8B;YAC5ChB,QAAQ;YACR,kCAAkC;gBAChCC,OAAO;YACT;QACF;QACA,CAAC,CAAC,KAAK,EAAE9B,gBAAgBG,SAAS,CAAC,CAAC,CAAC,EAAE;YACrC6B,aAAaT,kBAAAA,CAAOuB,0BAA0B;YAC9ChB,OAAOP,kBAAAA,CAAOsB,8BAA8B;YAC5C,kCAAkC;gBAChCb,aAAa;gBACbF,OAAO;gBACP,WAAW;oBACTU,iBAAiB;gBACnB;YACF;QACF;IACF;AACF;AAEA,MAAMO,iBAAiBhC,IAAAA,iBAAAA,EAAW;IAChCiC,OAAO;QACL1B,OAAO;QACPG,QAAQ,CAAC,KAAK,EAAEnB,cAAc,OAAO,EAAEiB,kBAAAA,CAAO0B,gBAAgB,CAAC,CAAC,CAAC;IACnE;IAEA,yFAAyF;IACzFC,kBAAkB;QAChB,CAAC,CAAC,YAAY,EAAElD,gBAAgBG,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;YACnDgD,SAAS;QACX;IACF;IAEA,mEAAmE;IACnEC,iBAAiB;QACf,CAAC,CAAC,kBAAkB,EAAEpD,gBAAgBG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE;YACtDyB,SAAS;QACX;IACF;AACF;AAEA,MAAMyB,4BAA4B7C,IAAAA,sBAAAA,EAAgB;IAChDE,UAAU;IACVY,OAAOhB;IACPmB,QAAQnB;IACRgD,UAAU;IACV5B,WAAW;IACX6B,YAAY;IAEZ9C,SAAS;IACTS,YAAY;IACZsC,gBAAgB;IAChBC,UAAU;IAEVC,QAAQnC,kBAAAA,CAAOoC,eAAe,GAAG;IACjCC,cAAcrC,kBAAAA,CAAOsC,oBAAoB;IACzClC,QAAQJ,kBAAAA,CAAO0B,gBAAgB,GAAG,MAAM1B,kBAAAA,CAAOC,kBAAkB;IACjEsC,MAAM;IACNC,eAAe;IAEf,WAAW;QACTrD,UAAU;QACVY,OAAOhB;QACPmB,QAAQnB;QACRsD,cAAcrC,kBAAAA,CAAOsC,oBAAoB;QACzC,6DAA6D;QAC7D,qDAAqD;QACrDG,WAAW;QACXxB,iBAAiB;IACnB;AACF;AAEA,mGAAmG;AACnG,MAAMyB,iBAAiBlD,IAAAA,iBAAAA,EAAW;IAChCmD,MAAM;QACJC,WAAW;QACXC,SAAS,CAAC,EAAE7C,kBAAAA,CAAO0B,gBAAgB,CAAC,CAAC,EAAE1B,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC;IACpE;IAEA6C,OAAO;QACLC,aAAa/C,kBAAAA,CAAOgD,mBAAmB;QAEvC,oHAAoH;QACpH,gHAAgH;QAChHC,WAAW,CAAC,MAAM,EAAElE,cAAc,GAAG,EAAEiB,kBAAAA,CAAOkD,iBAAiB,CAAC,MAAM,CAAC;QACvEC,cAAc,CAAC,MAAM,EAAEpE,cAAc,GAAG,EAAEiB,kBAAAA,CAAOkD,iBAAiB,CAAC,MAAM,CAAC;IAC5E;IAEAzB,OAAO;QACL2B,YAAYpD,kBAAAA,CAAOqD,iBAAiB;QACpCC,WAAW;IACb;AACF;AAKO,MAAM5E,0BAA0B,CAAC6E;IACtC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,oBAAoBzE;IAC1B,MAAM0E,aAAanE;IACnBgE,MAAM5E,IAAI,CAACgF,SAAS,GAAGC,IAAAA,mBAAAA,EACrBnF,gBAAgBE,IAAI,EACpB8E,mBACAD,kBAAkB,WAAWE,WAAWjE,QAAQ,EAChD8D,MAAM5E,IAAI,CAACgF,SAAS;IAGtB,MAAME,qBAAqBjE;IAC3B,MAAMkE,cAActC;IACpB+B,MAAM1E,KAAK,CAAC8E,SAAS,GAAGC,IAAAA,mBAAAA,EACtBnF,gBAAgBI,KAAK,EACrBgF,oBACAL,kBAAkB,WAAWM,YAAYrC,KAAK,EAC9C8B,MAAM3E,SAAS,CAACmF,QAAQ,GAAGD,YAAYjC,eAAe,GAAGiC,YAAYnC,gBAAgB,EACrF4B,MAAM1E,KAAK,CAAC8E,SAAS;IAGvB,MAAMK,yBAAyBlC;IAC/ByB,MAAM3E,SAAS,CAAC+E,SAAS,GAAGC,IAAAA,mBAAAA,EAC1BnF,gBAAgBG,SAAS,EACzBoF,wBACAT,MAAM3E,SAAS,CAAC+E,SAAS;IAG3B,MAAMM,cAAcvB;IACpB,IAAIa,MAAMzE,KAAK,EAAE;QACfyE,MAAMzE,KAAK,CAAC6E,SAAS,GAAGC,IAAAA,mBAAAA,EACtBnF,gBAAgBK,KAAK,EACrBmF,YAAYtB,IAAI,EAChBsB,WAAW,CAACT,cAAc,EAC1BD,MAAMzE,KAAK,CAAC6E,SAAS;IAEzB;IAEA,OAAOJ;AACT"}

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.raw.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    radioGroupClassNames: function() {
+        return radioGroupClassNames;
+    },
+    useRadioGroupStyles_unstable: function() {
+        return useRadioGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const radioGroupClassNames = {
+    root: 'fui-RadioGroup'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'flex-start'
+    },
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useRadioGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
+    return state;
+};

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState): RadioGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["radioGroupClassNames","useRadioGroupStyles_unstable","root","useStyles","makeStyles","display","alignItems","vertical","flexDirection","state","styles","className","mergeClasses","layout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,oBAAAA;eAAAA;;IAkBAC,4BAAAA;eAAAA;;;uBAtB4B;AAIlC,MAAMD,uBAAwD;IACnEE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,YAAY;IACd;IAEAC,UAAU;QACRC,eAAe;IACjB;AACF;AAKO,MAAMP,+BAA+B,CAACQ;IAC3C;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EACrBZ,qBAAqBE,IAAI,EACzBQ,OAAOR,IAAI,EACXO,MAAMI,MAAM,KAAK,cAAcH,OAAOH,QAAQ,EAC9CE,MAAMP,IAAI,CAACS,SAAS;IAGtB,OAAOF;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.4.7",
+  "version": "9.5.0",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,11 +18,11 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.3.7",
+    "@fluentui/react-field": "^9.4.0",
     "@fluentui/react-jsx-runtime": "^9.1.2",
-    "@fluentui/react-label": "^9.2.2",
+    "@fluentui/react-label": "^9.3.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",