npm - @fluentui/react-radio - Versions diffs - 9.0.13 → 9.0.15 - Mend

@fluentui/react-radio 9.0.13 → 9.0.15

Files changed (9) hide show

package/CHANGELOG.json +93 -1
package/CHANGELOG.md +29 -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/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,99 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Mon, 05 Dec 2022 18:25:27 GMT",
+      "date": "Wed, 21 Dec 2022 10:17:13 GMT",
+      "tag": "@fluentui/react-radio_v9.0.15",
+      "version": "9.0.15",
+      "comments": {
+        "none": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "68505ab8eb1b05f45ab09c21b9d66c177d1e50f5",
+            "comment": "chore: Add bundle size tests for Fields"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.12",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.14",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.3.4",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.1.5",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 14:59:28 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": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-radio
-This log was last generated on Mon, 05 Dec 2022 18:25:27 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Dec 2022 10:17:13 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.15)
+Wed, 21 Dec 2022 10:17:13 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.14..@fluentui/react-radio_v9.0.15)
+### Patches
+- Bump @fluentui/react-field to v9.0.0-alpha.12 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-label to v9.0.14 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-tabster to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.14)
+Tue, 20 Dec 2022 14:59:28 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:25:27 GMT
+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

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",
-    "Bssx7fj": "f1b1k54r",
-    "uh7if5": ["f4ne723", "fqqcjud"],
-    "clntm0": "fh7aioi",
-    "Dlk2r6": ["fqqcjud", "f4ne723"],
-    "B2j2mmj": "ffht0p2",
-    "wigs8": "f1p0ul1q",
-    "pbfy6t": "f1c901ms",
-    "B0v4ure": "f1alokd7",
-    "ghq09": "f78i1la",
-    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
-    "Bwckmig": "f8k7e5g",
-    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
-    "Bbgo44z": "f1pmxfrl",
-    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
-    "skfxo0": "f57dp0y",
-    "jo1ztg": ["f1ap5ily", "fszkfcr"],
-    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
-    "az1dzo": ["f136rfnd", "f11dm2qb"],
-    "vppk2z": ["fdsq1qd", "f1khssms"],
-    "B6352mv": ["f1khssms", "fdsq1qd"],
-    "nr063g": "fq4eyks",
-    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
-    "Bsiemmq": "f1e2iu44",
-    "B98u21t": ["ftuszwa", "f1ya6x16"],
-    "B2pnrqr": "f1xkdug0",
-    "Bhhzhcn": "f1m1ywml",
-    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
-    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
   }
 }, {
-  "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;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]: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",
-    "Bssx7fj": "f1b1k54r",
-    "uh7if5": ["f4ne723", "fqqcjud"],
-    "clntm0": "fh7aioi",
-    "Dlk2r6": ["fqqcjud", "f4ne723"],
-    "B2j2mmj": "ffht0p2",
-    "wigs8": "f1p0ul1q",
-    "pbfy6t": "f1c901ms",
-    "B0v4ure": "f1alokd7",
-    "ghq09": "f78i1la",
-    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
-    "Bwckmig": "f8k7e5g",
-    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
-    "Bbgo44z": "f1pmxfrl",
-    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
-    "skfxo0": "f57dp0y",
-    "jo1ztg": ["f1ap5ily", "fszkfcr"],
-    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
-    "az1dzo": ["f136rfnd", "f11dm2qb"],
-    "vppk2z": ["fdsq1qd", "f1khssms"],
-    "B6352mv": ["f1khssms", "fdsq1qd"],
-    "nr063g": "fq4eyks",
-    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
-    "Bsiemmq": "f1e2iu44",
-    "B98u21t": ["ftuszwa", "f1ya6x16"],
-    "B2pnrqr": "f1xkdug0",
-    "Bhhzhcn": "f1m1ywml",
-    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
-    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
   }
 }, {
-  "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;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]: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.13",
+  "version": "9.0.15",
   "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.10",
+    "@fluentui/react-context-selector": "^9.1.3",
+    "@fluentui/react-field": "9.0.0-alpha.12",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.12",
-    "@fluentui/react-tabster": "^9.3.2",
-    "@fluentui/react-theme": "^9.1.3",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-label": "^9.0.14",
+    "@fluentui/react-tabster": "^9.3.4",
+    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },