@fluentui/react-spinbutton 0.0.0-nightly-20220511-0419.1 → 0.0.0-nightly-20220512-0418.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-spinbutton",
   "entries": [
     {
-      "date": "Wed, 11 May 2022 04:31:19 GMT",
-      "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220511-0419.1",
-      "version": "0.0.0-nightly-20220511-0419.1",
+      "date": "Thu, 12 May 2022 04:32:31 GMT",
+      "tag": "@fluentui/react-spinbutton_v0.0.0-nightly-20220512-0418.1",
+      "version": "0.0.0-nightly-20220512-0418.1",
       "comments": {
         "prerelease": [
           {
@@ -25,6 +25,12 @@
             "commit": "8f40f25712a38b3b3121e7eb71623ce3d5a187e1",
             "comment": "react-spinbutton: add aria-valuetext override"
           },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-spinbutton",
+            "commit": "02fafa9e9ba11326583bad5db2e3dfce9d4407ff",
+            "comment": "react-spinbutton: use spacing tokens"
+          },
           {
             "author": "seanmonahan@microsoft.com",
             "package": "@fluentui/react-spinbutton",
@@ -34,38 +40,38 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinbutton",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220511-0419.1",
-            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220512-0418.1",
+            "commit": "ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,26 +1,27 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Wed, 11 May 2022 04:31:19 GMT and should not be manually modified.
+This log was last generated on Thu, 12 May 2022 04:32:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220511-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220511-0419.1)
+## [0.0.0-nightly-20220512-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20220512-0418.1)
 
-Wed, 11 May 2022 04:31:19 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.9..@fluentui/react-spinbutton_v0.0.0-nightly-20220511-0419.1)
+Thu, 12 May 2022 04:32:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.0-beta.9..@fluentui/react-spinbutton_v0.0.0-nightly-20220512-0418.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
 - Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
 - react-spinbutton: add aria-valuetext override ([PR #22905](https://github.com/microsoft/fluentui/pull/22905) by seanmonahan@microsoft.com)
+- react-spinbutton: use spacing tokens ([PR #22950](https://github.com/microsoft/fluentui/pull/22950) by gcox@microsoft.com)
 - react-spinbutton: remove SpinButtonCommons type ([PR #22871](https://github.com/microsoft/fluentui/pull/22871) by seanmonahan@microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
-- Bump @fluentui/react-input to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
+- Bump @fluentui/react-input to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20220512-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ed0dd6a9e40d9cfe7e3e822d726d109c935c8d42) by beachball)
 
 ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.0-beta.9)
 

package/lib/components/SpinButton/useSpinButtonStyles.js

@@ -9,10 +9,6 @@ export const spinButtonClassNames = {
 };
 const spinButtonExtraClassNames = {
   buttonActive: 'fui-SpinButton__button_active'
-}; // TODO(sharing) use theme values once available
-
-const horizontalSpacing = {
-  xs: '4px'
 };
 
 const useRootStyles = /*#__PURE__*/__styles({
@@ -20,7 +16,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "mc9l5x": "fwk3njj",
     "Budl1dq": "f1sr6ibj",
     "wkccdc": "fio9c21",
-    "i8kkvl": "f1q8lukm",
+    "i8kkvl": "f1ufnopg",
     "Belr9w4": "f1sff6ri",
     "z189sj": ["fhxju0i", "f1cnd47f"],
     "qhf8xq": "f10pi13n",
@@ -148,7 +144,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bm6vgfq": ["f7wchoe", "f1n48vvu"]
   }
 }, {
-  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
+  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
   "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}"],
   "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}"],
   "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]

package/lib/components/SpinButton/useSpinButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n  xs: '4px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: horizontalSpacing.xs,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledDarker: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledLighter: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledDarker: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledLighter: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledDarker: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledLighter: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledDarker: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledLighter: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js

@@ -19,10 +19,6 @@ exports.spinButtonClassNames = {
 };
 const spinButtonExtraClassNames = {
   buttonActive: 'fui-SpinButton__button_active'
-}; // TODO(sharing) use theme values once available
-
-const horizontalSpacing = {
-  xs: '4px'
 };
 
 const useRootStyles = /*#__PURE__*/react_1.__styles({
@@ -30,7 +26,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "fwk3njj",
     "Budl1dq": "f1sr6ibj",
     "wkccdc": "fio9c21",
-    "i8kkvl": "f1q8lukm",
+    "i8kkvl": "f1ufnopg",
     "Belr9w4": "f1sff6ri",
     "z189sj": ["fhxju0i", "f1cnd47f"],
     "qhf8xq": "f10pi13n",
@@ -158,7 +154,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Bm6vgfq": ["f7wchoe", "f1n48vvu"]
   }
 }, {
-  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
+  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
   "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}"],
   "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}"],
   "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n  xs: '4px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: horizontalSpacing.xs,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledDarker: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledLighter: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledDarker: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledLighter: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledDarker: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledLighter: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledDarker: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledLighter: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "0.0.0-nightly-20220511-0419.1",
+  "version": "0.0.0-nightly-20220512-0418.1",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,17 +28,17 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220511-0419.1",
-    "@fluentui/react-label": "0.0.0-nightly-20220511-0419.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220512-0418.1",
+    "@fluentui/react-label": "0.0.0-nightly-20220512-0418.1",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
     "@griffel/react": "1.0.3",
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20220511-0419.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20220512-0418.1",
     "@fluentui/react-icons": "^2.0.166-rc.3",
-    "@fluentui/react-input": "0.0.0-nightly-20220511-0419.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20220511-0419.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220511-0419.1",
+    "@fluentui/react-input": "0.0.0-nightly-20220512-0418.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220512-0418.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220512-0418.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {