npm - @fluentui/react-radio - Versions diffs - 9.0.12 → 9.0.14 - Mend

@fluentui/react-radio 9.0.12 → 9.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.json +91 -1
package/CHANGELOG.md +30 -2
package/lib/components/Radio/useRadioStyles.js +16 -139
package/lib/components/Radio/useRadioStyles.js.map +1 -1
package/lib-amd/components/Radio/useRadioStyles.js +74 -36
package/lib-amd/components/Radio/useRadioStyles.js.map +1 -1
package/lib-commonjs/components/Radio/useRadioStyles.js +15 -138
package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
package/package.json +7 -7
package/Spec.md +0 -292

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,97 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:42 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:52 GMT",
+      "tag": "@fluentui/react-radio_v9.0.14",
+      "version": "9.0.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "9c6efea1aea75e3e0d7355a729785ade9af638c5",
+            "comment": "chore: Update Radio to use griffel reset styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.11",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.13",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:29 GMT",
+      "tag": "@fluentui/react-radio_v9.0.13",
+      "version": "9.0.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-radio",
+            "commit": "536d01dceb058546fbd97b9118e7248df7d19f88",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:45 GMT",
       "tag": "@fluentui/react-radio_v9.0.12",
       "version": "9.0.12",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-radio
-This log was last generated on Thu, 17 Nov 2022 23:02:42 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:52 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.14)
+Tue, 20 Dec 2022 14:55:52 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.13..@fluentui/react-radio_v9.0.14)
+### Patches
+- chore: Update Radio to use griffel reset styles ([PR #25984](https://github.com/microsoft/fluentui/pull/25984) by behowell@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-label to v9.0.13 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.13)
+Mon, 05 Dec 2022 18:29:29 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.12..@fluentui/react-radio_v9.0.13)
+### Patches
+- chore: Migrate to new package structure. ([PR #25810](https://github.com/microsoft/fluentui/pull/25810) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
 ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.12)
-Thu, 17 Nov 2022 23:02:42 GMT
+Thu, 17 Nov 2022 23:05:45 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.11..@fluentui/react-radio_v9.0.12)
 ### Patches

package/lib/components/Radio/useRadioStyles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 export const radioClassNames = {
   root: 'fui-Radio',
   indicator: 'fui-Radio__indicator',
@@ -9,156 +9,31 @@ export const radioClassNames = {
 }; // The indicator size is used by the indicator and label styles
 const indicatorSize = '16px';
-/**
- * Styles for the root slot
- */
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
-  "base": {
-    "mc9l5x": "ftuwxu6",
-    "qhf8xq": "f10pi13n"
-  },
   "vertical": {
     "Beiy3e4": "f1vx9l62",
     "Bt984gj": "f122n59"
-  },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "n9p9qa": "f1fu8s9w",
-    "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
-    "r10ruj": "f1c1apvh",
-    "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
-    "gjlbkn": "fyrlc8h",
-    "B1kt0iq": "f28z38y",
-    "Boi8ppg": "f1edqc4x",
-    "Btfhvw2": "f19bnj08",
-    "B55xfkk": "f17wg1r9",
-    "i1dkbe": ["fgiioun", "fnx45sh"],
-    "Bozs2tv": "f1ljqnps",
-    "snkem8": ["fnx45sh", "fgiioun"],
-    "Bjilewg": "fsacsau",
-    "wht04d": ["flcxmxr", "f138axrn"],
-    "vikdft": "f1f4bc3q",
-    "Bwdhxlo": ["f138axrn", "flcxmxr"],
-    "B167d6d": ["f5m7f7q", "f175edhc"],
-    "Bpdw69r": ["f175edhc", "f5m7f7q"],
-    "Bsdv7io": ["fhfahiz", "fnreirl"],
-    "Bd353ur": ["fnreirl", "fhfahiz"],
-    "Bcnuwmc": "fn9i64i",
-    "dyfsa2": ["f1pylbqb", "f3dy9ja"],
-    "Bdcx1rh": "f1v06qdr",
-    "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
-    "Bbretkc": "fm1yk70",
-    "rnyfg7": "f1itvegt",
-    "Bg18gms": ["f17e4q3j", "foxjjqz"],
-    "Bym00rn": ["foxjjqz", "f17e4q3j"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
 });
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
 const useInputStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qhf8xq": "f1euv43f",
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
-    "Bhzewxz": "f15twtuk",
-    "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
-    "B7ck84d": "f1ewtqcl",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "abs64n": "fk73vx1",
-    "By9lhj9": "fg45n87",
-    "G3n25n": "flqpbns",
-    "Bojc29n": "fhb1dn5",
-    "p8xby4": "fiegpko",
-    "Bmzgt9v": "fdi60kf",
-    "un08vv": ["fz3jc1r", "f1fwo01y"],
-    "Bluxpkm": "f1m2gv5u",
-    "upm9ap": ["f1fwo01y", "fz3jc1r"],
-    "Bv6ccmg": "ft7ju8s",
-    "w6pjei": "f1ofw0le",
-    "drfev3": ["fothmfx", "f13qgzgl"],
-    "ujr3xk": "fp5vmb3",
-    "Bib2mth": ["f13qgzgl", "fothmfx"],
-    "za2ojl": "f1snis2b",
-    "Bu1fve0": "ff9psms",
-    "B42z6en": ["f1fg9ko4", "fqj7xkg"],
-    "mosl6v": "f1vebft2",
-    "e3wlmb": ["fqj7xkg", "f1fg9ko4"],
-    "swj8lc": "f1vtc7ej",
-    "kbzjta": "f1fj62aq",
-    "Bnazurh": ["fc4i2ph", "f137d5x6"],
-    "Enz1qu": "f1v2xs8c",
-    "B4rl0r3": ["f137d5x6", "fc4i2ph"],
-    "oi7lcb": "f14bpgh5",
-    "bwebxt": "f1ariq71",
-    "ax4tcq": ["fu58av6", "f1qj5h2v"],
-    "z2by79": "fptcwjq",
-    "Bpz2hdf": ["f1qj5h2v", "fu58av6"],
-    "Btliz3o": "filss48",
-    "Bre5bwy": "frtrqgn",
-    "Bayw8dt": ["f1v1lrlm", "fapcpph"],
-    "lb5vkw": "f49ptgb",
-    "yhmu5n": ["fapcpph", "f1v1lrlm"],
-    "Blcfbx4": "fgnwcez",
-    "yksgid": "f1l3wt4b",
-    "B59a1ph": "f16lpvpn",
-    "B78hamy": "fdubm5j",
-    "t61w4e": ["f11to73e", "f9u8p8h"],
-    "Dvncu9": "fw62pkm",
-    "qbflri": ["f9u8p8h", "f11to73e"],
-    "Byzt4r9": "fqaqzd4"
-  },
-  "after": {
-    "a9b677": "fwr58v7"
-  },
   "below": {
+    "a9b677": "fly5x3f",
     "Bqenvij": "f1je6zif"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".fg45n87:enabled{cursor:pointer;}", ".flqpbns:enabled~.fui-Radio__label{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".f16lpvpn:disabled~.fui-Radio__label{cursor:default;}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
+  "d": [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
 });
-const useIndicatorStyles = /*#__PURE__*/__styles({
-  "base": {
-    "a9b677": "fjw5fx7",
-    "Bqenvij": "fd461yt",
-    "Be2twd7": "f1ugzwwg",
-    "B7ck84d": "f1ewtqcl",
-    "Bnnss6s": "fi64zpg",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "Brf1p80": "f4d9j23",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
-    "B6of3ja": "frnwi6n",
-    "t21cq0": ["f1vcna3q", "foyynoy"],
-    "jrapky": "fqcjy3b",
-    "Frg6f3": ["foyynoy", "f1vcna3q"],
-    "Bkfmm31": "f1w9h62z",
-    "Bkecrkj": "f1aehjj5"
-  }
-}, {
-  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
-});
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/__styles({
   "base": {
@@ -189,12 +64,14 @@ export const useRadioStyles_unstable = state => {
   const {
     labelPosition
   } = state;
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  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, inputStyles.base, inputStyles[labelPosition], state.input.className);
-  const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
+  state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
   const labelStyles = useLabelStyles();
   if (state.label) {

package/lib/components/Radio/useRadioStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,~~mBAAqB~~,~~YAArB~~,~~EAAmC~~,~~UAAnC~~,~~QAAqD~~,~~gBAArD~~;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;~~AAEG;;AACH~~,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;~~EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;~~AAAA;EAAA;~~EAAA;EAAA;~~AAAA,EAAtB;;~~AAcA~~,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;~~EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;~~AAAA;EAAA;AAAA,EAAvB;;~~AAiGA~~,MAAM,~~kBAAkB~~,gBAAG~~;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA~~,~~EAA3B;;AAqBA~~,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;~~AAsBA~~;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,~~UAAU~~,~~CAAC,IAFsB,~~EAGjC,~~UAAU,CAAC,cAHsB,EAIjC,~~aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,~~QAJP~~,~~EAKjC~~,KAAK,CAAC,IAAN,CAAW,~~SALsB~~,CAAnC;~~EAQA~~,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,~~WAAW~~,~~CAAC~~,~~IAFsB~~,~~EAGlC~~,WAAW,CAAC,~~aAAD~~,~~CAHuB,~~EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAOA,MAAM,~~eAAe~~,GAAG,~~kBAAkB~~,~~EAA1C~~;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,~~CAAC~~,eAAe,CAAC,~~SAAjB~~,~~EAA4B~~,~~eAAe~~,~~CAAC~~,~~IAA5C,EAAkD,~~KAAK,CAAC,SAAN,CAAgB,~~SAAlE~~,CAAxC;~~EAEA~~,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,aAAD,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,~~CAhCM~~","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } 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\~~n/*\n Styles for the root slot\n /\~~nconst ~~useRootStyles~~ = ~~makeStyles~~({\n ~~base: {\n~~ display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n~~\n focusIndicator: createFocusOutlineStyle({ style: {~~}~~, selector: 'focus-within' }~~)~~,\n})~~;\n\nconst ~~useInputStyles~~ = ~~makeStyles~~({\n ~~base: {\n~~ position: 'absolute',\n left: 0,\n top: 0,\n width: ~~'100%',\~~n height: '100%',\n boxSizing: 'border-box',\n ~~...shorthands.~~margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~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 ~~...shorthands.~~borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ~~},\n~~ },\n },\n\n ~~after: {~~\~~n width:~~ ~~`calc(${indicatorSize}~~ + ~~2 * $~~{~~tokens.spacingHorizontalS})`,\~~n ~~},\n~~ below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst ~~useIndicatorStyles~~ = ~~makeStyles~~({\n ~~base: {\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 ~~...shorthands.~~overflow('hidden'),\n\n ~~...shorthands.~~border(tokens.strokeWidthThin, 'solid'),\n ~~...shorthands.~~borderRadius(tokens.borderRadiusCircular),\n ~~...shorthands.~~margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n }~~,\n}~~);\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.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) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n ~~rootStyles.base~~,\n ~~rootStyles.focusIndicator,\n~~ labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n ~~inputStyles.base~~,\n inputStyles~~[labelPosition]~~,\n state.input.className,\n );\n\n const ~~indicatorStyles~~ = ~~useIndicatorStyles~~();\n state.indicator.className = mergeClasses(radioClassNames.indicator~~, indicatorStyles.base,~~ state.indicator.className);\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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,kCAAsC,YAAtC,EAAoD,UAApD,QAAsE,gBAAtE;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;;AAEA,MAAM,oBAAoB,gBAAG,6uEAA7B;;AAMA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAOA,MAAM,qBAAqB,gBAAG,y7GAA9B;;AAwFA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAOA,MAAM,yBAAyB,gBAAG,ymBAAlC,C,CAmBA;;;AACA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,iBAFiC,EAGjC,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHP,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,kBAFkC,EAGlC,aAAa,KAAK,OAAlB,IAA6B,WAAW,CAAC,KAHP,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAOA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,eAAe,CAAC,SADsB,EAEtC,sBAFsC,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;EAMA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,aAAD,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,CArCM","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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 // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\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 },\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 },\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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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\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 ...shorthands.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) => {\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.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"],"sourceRoot":"../src/"}

package/lib-amd/components/Radio/useRadioStyles.js CHANGED Viewed

@@ -11,80 +11,116 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
     };
     // The indicator size is used by the indicator and label styles
     var indicatorSize = '16px';
-    /**
-     * Styles for the root slot
-     */
+    var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ display: 'inline-flex', position: 'relative' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })));
     var useRootStyles = react_1.makeStyles({
-        base: {
-            display: 'inline-flex',
-            position: 'relative',
-        },
         vertical: {
             flexDirection: 'column',
             alignItems: 'center',
         },
-        focusIndicator: react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),
     });
-    var useInputStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', boxSizing: 'border-box' }, react_1.shorthands.margin(0)), (_a = { opacity: 0, ':enabled': (_b = {
-                        cursor: 'pointer'
-                    },
-                    _b["& ~ ." + exports.radioClassNames.label] = {
-                        cursor: 'pointer',
-                    },
-                    _b) }, _a[":not(:checked) ~ ." + exports.radioClassNames.indicator + " > *"] = {
+    var useInputBaseClassName = react_1.makeResetStyles((_a = {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: "calc(" + indicatorSize + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+            height: '100%',
+            boxSizing: 'border-box',
+            margin: 0,
+            opacity: 0,
+            ':enabled': (_b = {
+                    cursor: 'pointer'
+                },
+                _b["& ~ ." + exports.radioClassNames.label] = {
+                    cursor: 'pointer',
+                },
+                _b)
+        },
+        // When unchecked, hide the circle icon (child of the indicator)
+        _a[":not(:checked) ~ ." + exports.radioClassNames.indicator + " > *"] = {
             opacity: '0',
-        },
+        },
         // Colors for the unchecked state
         _a[':enabled:not(:checked)'] = (_c = {},
             _c["& ~ ." + exports.radioClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground3,
             },
-            _c["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
+            _c["& ~ ." + exports.radioClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            },
             _c[':hover'] = (_d = {},
                 _d["& ~ ." + exports.radioClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground2,
                 },
-                _d["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
+                _d["& ~ ." + exports.radioClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+                },
                 _d),
             _c[':hover:active'] = (_e = {},
                 _e["& ~ ." + exports.radioClassNames.label] = {
                     color: react_theme_1.tokens.colorNeutralForeground1,
                 },
-                _e["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
+                _e["& ~ ." + exports.radioClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+                },
                 _e),
-            _c),
+            _c),
         // Colors for the checked state
         _a[':enabled:checked'] = (_f = {},
             _f["& ~ ." + exports.radioClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForeground1,
             },
-            _f["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStroke)), { color: react_theme_1.tokens.colorCompoundBrandForeground1 }),
+            _f["& ~ ." + exports.radioClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorCompoundBrandStroke,
+                color: react_theme_1.tokens.colorCompoundBrandForeground1,
+            },
             _f[':hover'] = (_g = {},
-                _g["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokeHover)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Hover }),
+                _g["& ~ ." + exports.radioClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorCompoundBrandStrokeHover,
+                    color: react_theme_1.tokens.colorCompoundBrandForeground1Hover,
+                },
                 _g),
             _f[':hover:active'] = (_h = {},
-                _h["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokePressed)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed }),
+                _h["& ~ ." + exports.radioClassNames.indicator] = {
+                    borderColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+                    color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed,
+                },
                 _h),
-            _f),
+            _f),
         // Colors for the disabled state
         _a[':disabled'] = (_j = {},
             _j["& ~ ." + exports.radioClassNames.label] = {
                 color: react_theme_1.tokens.colorNeutralForegroundDisabled,
                 cursor: 'default',
             },
-            _j["& ~ ." + exports.radioClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled }),
-            _j), _a)),
-        after: {
-            width: "calc(" + indicatorSize + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
-        },
+            _j["& ~ ." + exports.radioClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            _j),
+        _a));
+    var useInputStyles = react_1.makeStyles({
         below: {
+            width: '100%',
             height: "calc(" + indicatorSize + " + 2 * " + react_theme_1.tokens.spacingVerticalS + ")",
         },
     });
-    var useIndicatorStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ width: indicatorSize, height: indicatorSize, fontSize: '12px', boxSizing: 'border-box', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { fill: 'currentColor', pointerEvents: 'none' }),
+    var useIndicatorBaseClassName = react_1.makeResetStyles({
+        width: indicatorSize,
+        height: indicatorSize,
+        fontSize: '12px',
+        boxSizing: 'border-box',
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        border: react_theme_1.tokens.strokeWidthThin + ' solid',
+        borderRadius: react_theme_1.tokens.borderRadiusCircular,
+        margin: react_theme_1.tokens.spacingVerticalS + ' ' + react_theme_1.tokens.spacingHorizontalS,
+        fill: 'currentColor',
+        pointerEvents: 'none',
     });
+    // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
     var useLabelStyles = react_1.makeStyles({
         base: tslib_1.__assign({ alignSelf: 'center' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
         after: {
@@ -104,12 +140,14 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
      */
     var useRadioStyles_unstable = function (state) {
         var labelPosition = state.labelPosition;
+        var rootBaseClassName = useRootBaseClassName();
         var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+        state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+        var inputBaseClassName = useInputBaseClassName();
         var inputStyles = useInputStyles();
-        state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, inputStyles[labelPosition], state.input.className);
-        var indicatorStyles = useIndicatorStyles();
-        state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
+        state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
+        var indicatorBaseClassName = useIndicatorBaseClassName();
+        state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
         var labelStyles = useLabelStyles();
         if (state.label) {
             state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);

package/lib-amd/components/Radio/useRadioStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRadioStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } 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\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.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 ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n after: {\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n },\n below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\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 ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.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) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputStyles.base,\n inputStyles[labelPosition],\n state.input.className,\n );\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\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"]}
1	+ {"version":3,"file":"useRadioStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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 // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\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 },\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 },\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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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\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 ...shorthands.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) => {\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.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"]}

package/lib-commonjs/components/Radio/useRadioStyles.js CHANGED Viewed

@@ -19,156 +19,31 @@ exports.radioClassNames = {
 }; // The indicator size is used by the indicator and label styles
 const indicatorSize = '16px';
-/**
- * Styles for the root slot
- */
+const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
 const useRootStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "mc9l5x": "ftuwxu6",
-    "qhf8xq": "f10pi13n"
-  },
   "vertical": {
     "Beiy3e4": "f1vx9l62",
     "Bt984gj": "f122n59"
-  },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "n9p9qa": "f1fu8s9w",
-    "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
-    "r10ruj": "f1c1apvh",
-    "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
-    "gjlbkn": "fyrlc8h",
-    "B1kt0iq": "f28z38y",
-    "Boi8ppg": "f1edqc4x",
-    "Btfhvw2": "f19bnj08",
-    "B55xfkk": "f17wg1r9",
-    "i1dkbe": ["fgiioun", "fnx45sh"],
-    "Bozs2tv": "f1ljqnps",
-    "snkem8": ["fnx45sh", "fgiioun"],
-    "Bjilewg": "fsacsau",
-    "wht04d": ["flcxmxr", "f138axrn"],
-    "vikdft": "f1f4bc3q",
-    "Bwdhxlo": ["f138axrn", "flcxmxr"],
-    "B167d6d": ["f5m7f7q", "f175edhc"],
-    "Bpdw69r": ["f175edhc", "f5m7f7q"],
-    "Bsdv7io": ["fhfahiz", "fnreirl"],
-    "Bd353ur": ["fnreirl", "fhfahiz"],
-    "Bcnuwmc": "fn9i64i",
-    "dyfsa2": ["f1pylbqb", "f3dy9ja"],
-    "Bdcx1rh": "f1v06qdr",
-    "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
-    "Bbretkc": "fm1yk70",
-    "rnyfg7": "f1itvegt",
-    "Bg18gms": ["f17e4q3j", "foxjjqz"],
-    "Bym00rn": ["foxjjqz", "f17e4q3j"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
 });
+const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
 const useInputStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "qhf8xq": "f1euv43f",
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
-    "Bhzewxz": "f15twtuk",
-    "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
-    "B7ck84d": "f1ewtqcl",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "abs64n": "fk73vx1",
-    "By9lhj9": "fg45n87",
-    "G3n25n": "flqpbns",
-    "Bojc29n": "fhb1dn5",
-    "p8xby4": "fiegpko",
-    "Bmzgt9v": "fdi60kf",
-    "un08vv": ["fz3jc1r", "f1fwo01y"],
-    "Bluxpkm": "f1m2gv5u",
-    "upm9ap": ["f1fwo01y", "fz3jc1r"],
-    "Bv6ccmg": "ft7ju8s",
-    "w6pjei": "f1ofw0le",
-    "drfev3": ["fothmfx", "f13qgzgl"],
-    "ujr3xk": "fp5vmb3",
-    "Bib2mth": ["f13qgzgl", "fothmfx"],
-    "za2ojl": "f1snis2b",
-    "Bu1fve0": "ff9psms",
-    "B42z6en": ["f1fg9ko4", "fqj7xkg"],
-    "mosl6v": "f1vebft2",
-    "e3wlmb": ["fqj7xkg", "f1fg9ko4"],
-    "swj8lc": "f1vtc7ej",
-    "kbzjta": "f1fj62aq",
-    "Bnazurh": ["fc4i2ph", "f137d5x6"],
-    "Enz1qu": "f1v2xs8c",
-    "B4rl0r3": ["f137d5x6", "fc4i2ph"],
-    "oi7lcb": "f14bpgh5",
-    "bwebxt": "f1ariq71",
-    "ax4tcq": ["fu58av6", "f1qj5h2v"],
-    "z2by79": "fptcwjq",
-    "Bpz2hdf": ["f1qj5h2v", "fu58av6"],
-    "Btliz3o": "filss48",
-    "Bre5bwy": "frtrqgn",
-    "Bayw8dt": ["f1v1lrlm", "fapcpph"],
-    "lb5vkw": "f49ptgb",
-    "yhmu5n": ["fapcpph", "f1v1lrlm"],
-    "Blcfbx4": "fgnwcez",
-    "yksgid": "f1l3wt4b",
-    "B59a1ph": "f16lpvpn",
-    "B78hamy": "fdubm5j",
-    "t61w4e": ["f11to73e", "f9u8p8h"],
-    "Dvncu9": "fw62pkm",
-    "qbflri": ["f9u8p8h", "f11to73e"],
-    "Byzt4r9": "fqaqzd4"
-  },
-  "after": {
-    "a9b677": "fwr58v7"
-  },
   "below": {
+    "a9b677": "fly5x3f",
     "Bqenvij": "f1je6zif"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".fg45n87:enabled{cursor:pointer;}", ".flqpbns:enabled~.fui-Radio__label{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".f16lpvpn:disabled~.fui-Radio__label{cursor:default;}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}", ".fwr58v7{width:calc(16px + 2 * var(--spacingHorizontalS));}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
+  "d": [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
 });
-const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "a9b677": "fjw5fx7",
-    "Bqenvij": "fd461yt",
-    "Be2twd7": "f1ugzwwg",
-    "B7ck84d": "f1ewtqcl",
-    "Bnnss6s": "fi64zpg",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "Brf1p80": "f4d9j23",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
-    "B6of3ja": "frnwi6n",
-    "t21cq0": ["f1vcna3q", "foyynoy"],
-    "jrapky": "fqcjy3b",
-    "Frg6f3": ["foyynoy", "f1vcna3q"],
-    "Bkfmm31": "f1w9h62z",
-    "Bkecrkj": "f1aehjj5"
-  }
-}, {
-  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
-});
+const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   "base": {
@@ -199,12 +74,14 @@ const useRadioStyles_unstable = state => {
   const {
     labelPosition
   } = state;
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  const inputBaseClassName = useInputBaseClassName();
   const inputStyles = useInputStyles();
-  state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, inputStyles[labelPosition], state.input.className);
-  const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
+  state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
   const labelStyles = useLabelStyles();
   if (state.label) {

package/lib-commonjs/components/Radio/useRadioStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;~~AAEG;;AACH~~,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;~~EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;~~AAAA;EAAA;~~EAAA;EAAA;~~AAAA,EAAtB;;~~AAcA~~,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;~~EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;~~AAAA;EAAA;AAAA,EAAvB;;~~AAiGA~~,MAAM,~~kBAAkB~~,gBAAG,OAAA,~~SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA~~,~~EAA3B;;AAqBA~~,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;~~AAsBA~~;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,~~UAAU~~,~~CAAC,IAFU,~~EAGrB,~~UAAU,CAAC,cAHU,EAIrB,~~aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,~~QAJnB~~,~~EAKrB~~,KAAK,CAAC,IAAN,CAAW,~~SALU~~,CAAvB;~~EAQA~~,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,~~WAAW~~,~~CAAC~~,~~IAFU~~,~~EAGtB~~,WAAW,CAAC,~~aAAD~~,~~CAHW,~~EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAOA,MAAM,~~eAAe~~,GAAG,~~kBAAkB~~,~~EAA1C~~;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,~~CAAa~~,OAAA,CAAA,eAAA,CAAgB,~~SAA7B~~,~~EAAwC~~,~~eAAe~~,~~CAAC~~,~~IAAxD,EAA8D,~~KAAK,CAAC,SAAN,CAAgB,~~SAA9E~~,CAA5B;~~EAEA~~,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,aAAD,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAMD;AACF,~~CAhCM~~;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } 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\~~n/*\n Styles for the root slot\n /\~~nconst ~~useRootStyles~~ = ~~makeStyles~~({\n ~~base: {\n~~ display: 'inline-flex',\n position: 'relative',\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n~~\n focusIndicator: createFocusOutlineStyle({ style: {~~}~~, selector: 'focus-within' }~~)~~,\n})~~;\n\nconst ~~useInputStyles~~ = ~~makeStyles~~({\n ~~base: {\n~~ position: 'absolute',\n left: 0,\n top: 0,\n width: ~~'100%',\~~n height: '100%',\n boxSizing: 'border-box',\n ~~...shorthands.~~margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~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 ~~...shorthands.~~borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n ~~...shorthands.~~borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ~~},\n~~ },\n },\n\n ~~after: {~~\~~n width:~~ ~~`calc(${indicatorSize}~~ + ~~2 * $~~{~~tokens.spacingHorizontalS})`,\~~n ~~},\n~~ below: {\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst ~~useIndicatorStyles~~ = ~~makeStyles~~({\n ~~base: {\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 ~~...shorthands.~~overflow('hidden'),\n\n ~~...shorthands.~~border(tokens.strokeWidthThin, 'solid'),\n ~~...shorthands.~~borderRadius(tokens.borderRadiusCircular),\n ~~...shorthands.~~margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n fill: 'currentColor',\n pointerEvents: 'none',\n }~~,\n}~~);\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n\n ...shorthands.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) => {\n const { labelPosition } = state;\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n ~~rootStyles.base~~,\n ~~rootStyles.focusIndicator,\n~~ labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n ~~inputStyles.base~~,\n inputStyles~~[labelPosition]~~,\n state.input.className,\n );\n\n const ~~indicatorStyles~~ = ~~useIndicatorStyles~~();\n state.indicator.className = mergeClasses(radioClassNames.indicator~~, indicatorStyles.base,~~ state.indicator.className);\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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,aAAa,GAAG,MAAtB;;AAEA,MAAM,oBAAoB,gBAAG,OAAA,cAAA,guEAA7B;;AAMA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAOA,MAAM,qBAAqB,gBAAG,OAAA,cAAA,46GAA9B;;AAwFA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAOA,MAAM,yBAAyB,gBAAG,OAAA,cAAA,4lBAAlC,C,CAmBA;;;AACA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,iBAFqB,EAGrB,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHnB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,kBAFsB,EAGtB,aAAa,KAAK,OAAlB,IAA6B,WAAW,CAAC,KAHnB,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAOA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAC1B,OAAA,CAAA,eAAA,CAAgB,SADU,EAE1B,sBAF0B,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,CAA5B;EAMA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,aAAD,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAMD;AACF,CArCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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 // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > `]: {\n opacity: '0',\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 },\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 },\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 },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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\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 ...shorthands.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) => {\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.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"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.0.12",
+  "version": "9.0.14",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,13 +30,13 @@
     "@fluentui/react-conformance-griffel": "9.0.0-beta.18"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.2",
-    "@fluentui/react-field": "9.0.0-alpha.9",
+    "@fluentui/react-context-selector": "^9.1.3",
+    "@fluentui/react-field": "9.0.0-alpha.11",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.11",
-    "@fluentui/react-tabster": "^9.3.1",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-label": "^9.0.13",
+    "@fluentui/react-tabster": "^9.3.3",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },

package/Spec.md DELETED Viewed

@@ -1,292 +0,0 @@
-# @fluentui/react-radio Spec
-A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
-## Background
-### Prior Art
-- [OpenUI research](https://open-ui.org/components/radio-button.research)
-- [Epic](https://github.com/microsoft/fluentui/issues/19953)
-### Comparison of [Fabric ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) and [Stardust RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition)
-- All mentions of v7 or v8 refer to Fabric - `@fluentui/react` ([docsite](https://developer.microsoft.com/en-us/fluentui#/))
-- All mentions of v0 refer to Northstar - `@fluentui/react-northstar` ([docsite](https://fluentsite.z22.web.core.windows.net/))
-See Appendix for a detailed comparison of the two components.
-In Fabric the Radio component is represented by the [ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) component.
-Fabric creates options based on data passed in via the `options` prop.
-It uses the option's `key` property as the input value and holds the currently selected value in the `selectedKey` prop.
-Fabric also allows an image to serve as a label for an option.
-```tsx
-<ChoiceGroup
-  defaultSelectedKey="B"
-  options={[
-    { key: 'A', text: 'Option A' },
-    { key: 'B', text: 'Option B' },
-    { key: 'C', text: 'Option C', disabled: true },
-    { key: 'D', text: 'Option D' },
-  ]}
-  label="Pick one"
-  required={true}
-/>
-```
-In Northstar the Radio component is represented by the [RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition) component.
-Northstar creates options based on data passed in via the `items` prop.
-It uses the option's `value` property as the input value and holds the currently selected value in the `checkedValue` prop.
-```tsx
-<RadioGroup
-  onCheckedValueChange={handleChange}
-  items={[
-    { key: '1', label: 'Make your choice', value: '1' },
-    { key: '2', label: 'Another option', value: '2' },
-  ]}
-/>
-```
-## Variants
-### Layout
-#### Horizonal
-Inline positioning of the inputs and labels.
-![Horizontal group](./etc/images/horizontal-group.png)
-#### Horizonal stacked
-Positioning the label at the bottom of the radio inputs.
-![Horizontal group - stacked](./etc/images/horizontal-group-stacked.png)
-#### Vertical
-Default vertical positioning of Radio items.
-![Vertical group](./etc/images/vertical-group.png)
-#### Vertical with input
-Default positioning of Radio items with an input as its last Radio item.
-![Vertical group with input](./etc/images/vertical-group-with-input.png)
-### Vertical with dropdown
-Default positioning of Radio items with a dropdown as its last Radio item.
-![Vertical group with dropdown](./etc/images/vertical-group-with-dropdown.png)
-## API
-### Components
-| Component         | Purpose                                                                         |
-| ----------------- | ------------------------------------------------------------------------------- |
-| RadioGroup        | Wraps radio inputs. Provides RadioGroupContext and layout for the radio items.  |
-| RadioGroupContext | Provides some props like `name` to Radio items that are children of RadioGroup. |
-| Radio             | Represents a single radio item (input and label).                               |
-### RadioGroup
-Link to [RadioGroup.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/RadioGroup/RadioGroup.types.ts)
-| Prop           | Type                                                | Default value          | Purpose                                                  |
-| -------------- | --------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
-| (root)         | slot: `<div role="radiogroup">`                     |                        | The root slot has the radiogroup role.                   |
-| `name`         | `string`                                            | `useId('radiogroup-')` | Name property passed to child radios.                    |
-| `value`        | `string`                                            |                        | Currently selected value. Used only for controlled mode. |
-| `defaultValue` | `string`                                            |                        | Default selected value.                                  |
-| `disabled`     | `boolean`                                           | `false`                | Disables all radio items inside the group.               |
-| `layout`       | `"vertical" \| "horizontal" \| "horizontalStacked"` | `vertical`             | Specifies the layout of the radio items.                 |
-| `onChange`     | `(event, data: { value: string }) => void`          |                        | Callback when a radio item is selected.                  |
-### RadioGroupContext
-This is a context object provided by RadioGroup that allows all of the child Radio items to have the same name, and coordinate the selected item.
-The context contains the following props from RadioGroup:
-- `name`
-- `layout`
-- `defaultValue`
-- `value`
-- `disabled`
-### Radio
-Link to [Radio.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/Radio/Radio.types.ts)
-| Prop        | Type                         | Purpose                                                             |
-| ----------- | ---------------------------- | ------------------------------------------------------------------- |
-| (root)      | slot: `<span>`               | Wrapper for the input, indicator, and label                         |
-| `input`     | slot: `<input type="radio">` | Hidden input element that handles the radio's behavior.             |
-| `indicator` | slot: `<div>`                | The circular indicator to show the radio's checked/unchecked state. |
-| `label`     | slot: `<Label>`              | Label that will be rendered next to the radio indicator.            |
-| `value`     | `string`                     | The value of the RadioGroup when this Radio is selected             |
-| `checked`   | `boolean`                    | Whether the input is checked or not.                                |
-| `disabled`  | `boolean`                    | Whether the input is disabled or not.                               |
-## Sample Code
-A simple `RadioGroup`.
-```jsx
-<RadioGroup defaultValue="one">
-  <Radio value="one" label="Option One" />
-  <Radio value="two" label="Option Two" />
-  <Radio value="three" label="Option Three" />
-</RadioGroup>
-```
-`Radio` can be used without a `RadioGroup`, but it is then up to the user to add the same `name` to each item:
-```jsx
-<>
-  <Radio name="number" value="one" label="Option One" defaultChecked />
-  <Radio name="number" value="two" label="Option Two" />
-  <Radio name="number" value="three" label="Option Three" />
-</>
-```
-## Structure
-### Expected DOM structure
-```html
-<div role="radiogroup" class="fui-RadioGroup" name="radiogroup-0">
-  <span class="fui-Radio">
-    <input type="radio" id="radio-1" name="radiogroup-0" value="one" checked />
-    <div class="fui-Radio__indicator">
-      <svg><circle /></svg>
-    </div>
-    <label class="fui-Label" for="radio-1">Option One</label>
-  </span>
-  <span class="fui-Radio">
-    <input type="radio" id="radio-2" name="radiogroup-0" value="two" />
-    <div class="fui-Radio__indicator">
-      <svg><circle /></svg>
-    </div>
-    <label class="fui-Label" for="radio-2">Option Two</label>
-  </span>
-  <span class="fui-Radio">
-    <input type="radio" id="radio-3" name="radiogroup-0" value="three" />
-    <div class="fui-Radio__indicator">
-      <svg><circle /></svg>
-    </div>
-    <label class="fui-Label" for="radio-3">Option Three</label>
-  </span>
-</div>
-```
-## Behaviors
-### Mouse/Touch
-The Radio's hit target fills the entire space around the indicator and label (including the padding).
-### Keyboard
-RadioGroup inherits all of its mouse and keyboard behaviors from the browser's handling of `<input type="radio">`.
-- It has no special handling of clicks or keypresses for toggling beyond the built-in control.
-- The browser handles arrow key selection, and creating a single tab stop for the control.
-### Disabled
-- Individual Radio items can be disabled, in which case they are grayed out and can't be selected or focused.
-  - This interaction is built-into the browser by setting `disabled` on the `<input>` control.
-- The entire RadioGroup can be disabled, which uses RadioGroupContext to disable all of the individual Radio items.
-### Group Name
-- All Radio items in a group must have the same `name` for the browser to handle keyboarding and selection.
-- The RadioGroup provides its `name` through RadioGroupContext, and each Radio inside applies the `name`.
-- If a `name` is not provided on RadioGroup, a unique name is automatically generated with `useId`.
-## Accessibility
-### RadioGroup
-This implementation based on the [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/) examples of Web Accessibility Tutorials (that follow WCAG).
-- The RadioGroup root is a `<div role="radiogroup">` to provide the default accessibility behavior of a radiogroup.
-- If a group label is added, the RadioGroup needs to have `aria-labelledby` referencing the label.
-### Radio
-- The Radio's primary slot is an `<input type="radio">`, with opacity 0, and covers the root.
-  - This way, the Radio's hit target fills the entire space around the indicator and label (including the padding).
-- The Radio's label is a `<label>` element with `for={input.id}` to associate it with the input slot.
-<!--
-## Migration
-TBD: Link to Migration guide
--->
-# Appendix
-## v8 vs v0 comparison
-### RadioGroup (v0) vs ChoiceGroup (v8) prop mapping
-_⚠️ Props not included in this section are marked as deprecated and will not be considered._
-| Purpose                                                                                           | Fabric (v8)        | Northstar (v0)       | Matching                                   |
-| ------------------------------------------------------------------------------------------------- | ------------------ | -------------------- | ------------------------------------------ |
-| Called after radio group value is changed.                                                        | onChange           | onCheckedValueChange | Matching 🛠️                                |
-| The options/items for the group.                                                                  | options            | items                | Matching                                   |
-| Additional CSS styles to apply to the component instance.                                         | styles             | styles               | Matching                                   |
-| Initial checkedValue value.                                                                       | defaultSelectedKey | defaultCheckedValue  | Matching functionality, not implementation |
-| Value of the currently checked radio item.                                                        | selectedKey        | checkedValue         | Matching functionality, not implementation |
-| Theme - Override for theme site variables to allow modifications of component styling via themes. | theme              | variables            | Matching                                   |
-| ID of an element to use as the aria label for this ChoiceGroup.                                   | ariaLabelledBy     | -                    | -                                          |
-| Optional callback to access the `IChoiceGroup` interface.                                         | componentRef       | -                    | -                                          |
-| Descriptive label for the choice group.                                                           | label              | -                    | -                                          |
-| Accessibility behavior if overridden by the user.                                                 | -                  | accessibility        | -                                          |
-| An element type to render as (string or component).                                               | -                  | as                   | -                                          |
-| Additional CSS class name(s) to apply.                                                            | -                  | className            | -                                          |
-| A vertical radio group displays elements vertically.                                              | -                  | vertical             | -                                          |
-| -                                                                                                 | -                  | design               | -                                          |
-### RadioItem (v0) vs ChoiceGroupOption (v8) props mapping
-| Purpose                                                                         | Fabric (v8)        | Northstar (v0)   | Matching |
-| ------------------------------------------------------------------------------- | ------------------ | ---------------- | -------- |
-| A required key to uniquely identify the option.                                 | key (required)     | -                | -        |
-| The text string for the option.                                                 | text (required) ❓ | label            | Matching |
-| Call to provide customized styling that will layer on top of the variant rules. | styles             | styles           | Matching |
-| A radio item can appear disabled and be unable to change states.                | disabled           | disabled         | Matching |
-| Aria label of the option for the benefit of screen reader users.                | ariaLabel          | -                | -        |
-| Props for an icon to display with this option.                                  | iconProps          | -                | -        |
-| ID used on the option's input element.                                          | id                 | -                | -        |
-| Alt text if the option is an image.                                             | imageAlt           | -                | -        |
-| The width and height of the image in px for choice field.                       | imageSize          | -                | -        |
-| Image to display with this option.                                              | imageSrc           | -                | -        |
-| ID used on the option's label.                                                  | labelId            | -                | -        |
-| Used to customize option rendering.                                             | onRenderField      | -                | -        |
-| Used to customize label rendering.                                              | onRenderLabel      | -                | -        |
-| The src of image for choice field which is selected.                            | selectedImageSrc   | -                | -        |
-| Accessibility behavior if overridden by the user.                               | -                  | accessibility    | -        |
-| Whether or not radio item is checked.                                           | -                  | checked          | -        |
-| The checked radio item indicator can be customized.                             | -                  | checkedIndicator | -        |
-| Initial checked value.                                                          | -                  | defaultChecked   | -        |
-| The radio item indicator can be customized.                                     | -                  | indicator        | -        |
-| The HTML input name.                                                            | -                  | name             | -        |
-| Called after radio item checked state is changed.                               | -                  | onChange         | -        |
-| Called after radio item is clicked.                                             | -                  | onClick          | -        |
-| Whether should focus when checked                                               | -                  | shouldFocus      | -        |
-| The HTML input value.                                                           | -                  | value            | -        |
-| A vertical radio group displays elements vertically.                            | -                  | vertical         | -        |
-| -                                                                               | -                  | as               | -        |
-| -                                                                               | -                  | className        | -        |
-| -                                                                               | -                  | variables        | -        |
-| -                                                                               | -                  | design           | -        |