@react-fabric/core 1.0.0-beta.62 → 1.0.0-beta.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (305) hide show
  1. package/css/components/_animations.css +7 -11
  2. package/css/components/_avatar.css +5 -5
  3. package/css/components/_badge.css +2 -1
  4. package/css/components/_breadcrumbs.css +5 -5
  5. package/css/components/_button.css +48 -14
  6. package/css/components/_card.css +9 -17
  7. package/css/components/_chip.css +0 -4
  8. package/css/components/_dropdown.css +1 -0
  9. package/css/components/_flyout.css +1 -1
  10. package/css/components/_media.css +2 -14
  11. package/css/components/_menu.css +1 -1
  12. package/css/components/_modal.css +1 -1
  13. package/css/components/_progress.css +1 -1
  14. package/css/components/_stepper.css +2 -1
  15. package/css/components/_tabPanel.css +4 -4
  16. package/css/core/_aside.css +3 -3
  17. package/css/core/_errorboundary.css +2 -10
  18. package/css/core/_page.css +1 -1
  19. package/css/core/_responsive.css +8 -0
  20. package/css/core/_viewport.css +1 -5
  21. package/css/reset/_reset.css +36 -41
  22. package/css/reset/_theme.css +214 -201
  23. package/css/styles.css +5 -0
  24. package/css/theme/_colors.css +14 -0
  25. package/css/theme/_utilities.css +103 -225
  26. package/css/theme/index.css +4 -6
  27. package/dist/cjs/components/actionLabel/ActionLabel.js +1 -1
  28. package/dist/cjs/components/animations/Animations.js +7 -7
  29. package/dist/cjs/components/avatar/Avatar.js +1 -1
  30. package/dist/cjs/components/avatar/AvatarGroup.js +1 -1
  31. package/dist/cjs/components/badge/Badge.js +5 -27
  32. package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +1 -1
  33. package/dist/cjs/components/button/Button.js +7 -5
  34. package/dist/cjs/components/button/ButtonGroup.js +1 -1
  35. package/dist/cjs/components/button/ConfirmButton.js +7 -6
  36. package/dist/cjs/components/button/ToggleButtonGroup.js +1 -1
  37. package/dist/cjs/components/callout/Callout.js +8 -7
  38. package/dist/cjs/components/card/Card.js +3 -3
  39. package/dist/cjs/components/card/CardCover.js +1 -1
  40. package/dist/cjs/components/card/FlipContent.js +2 -2
  41. package/dist/cjs/components/chip/Chip.js +8 -7
  42. package/dist/cjs/components/collapsable/Collapsable.js +4 -3
  43. package/dist/cjs/components/divider/Divider.js +2 -2
  44. package/dist/cjs/components/dropdown/Dropdown.js +18 -16
  45. package/dist/cjs/components/empty/EmptyContent.js +1 -1
  46. package/dist/cjs/components/icon/Icon.js +2 -16
  47. package/dist/cjs/components/media/Media.js +13 -13
  48. package/dist/cjs/components/menu/ContextMenu.js +23 -13
  49. package/dist/cjs/components/menu/Menu.js +16 -12
  50. package/dist/cjs/components/menu/MenuItem.js +4 -3
  51. package/dist/cjs/components/meter/Meter.js +1 -1
  52. package/dist/cjs/components/navigator/Navigator.js +5 -5
  53. package/dist/cjs/components/panel/Panel.js +6 -4
  54. package/dist/cjs/components/panel/PanelGroup.js +3 -3
  55. package/dist/cjs/components/panel/PanelStack.js +5 -5
  56. package/dist/cjs/components/progress/ProgressBar.js +2 -2
  57. package/dist/cjs/components/progress/ProgressCircle.js +2 -2
  58. package/dist/cjs/components/tabpanel/Tab.js +6 -4
  59. package/dist/cjs/components/tabpanel/TabPanel.js +4 -4
  60. package/dist/cjs/context/Global.js +2 -55
  61. package/dist/cjs/context/NotificationCenter.js +38 -39
  62. package/dist/cjs/context/context.js +59 -0
  63. package/dist/cjs/core/aside/Aside.js +9 -7
  64. package/dist/cjs/core/boundary/ErrorBoundary.js +2 -4
  65. package/dist/cjs/core/page/Page.js +4 -1
  66. package/dist/cjs/core/responsive/Responsive.js +3 -2
  67. package/dist/cjs/core/theme/ThemeProvider.js +2 -2
  68. package/dist/cjs/core/viewport/Viewport.js +1 -1
  69. package/dist/cjs/hooks/useContextMenu.js +103 -0
  70. package/dist/cjs/hooks/useIsDark.js +6 -4
  71. package/dist/cjs/hooks/useNavigator.js +2 -2
  72. package/dist/cjs/hooks/useOverlayService.js +10 -42
  73. package/dist/cjs/hooks/usePropToggle.js +2 -2
  74. package/dist/cjs/hooks/useResize.js +8 -6
  75. package/dist/cjs/hooks/useResizeObserver.js +5 -5
  76. package/dist/cjs/hooks/useStepper.js +2 -6
  77. package/dist/cjs/hotkeys/HotKey.js +2 -2
  78. package/dist/cjs/hotkeys/HotKeyWrapper.js +8 -13
  79. package/dist/cjs/hotkeys/commons.js +1 -1
  80. package/dist/cjs/hotkeys/context.js +36 -0
  81. package/dist/cjs/index.js +9 -5
  82. package/dist/cjs/overlays/alert/Alert.js +6 -5
  83. package/dist/cjs/overlays/flyout/Flyout.js +8 -6
  84. package/dist/cjs/overlays/message/Message.js +5 -5
  85. package/dist/cjs/overlays/modal/Modal.js +5 -3
  86. package/dist/cjs/overlays/toast/Toast.js +4 -4
  87. package/dist/cjs/overlays/tooltip/Tooltip.js +2 -16
  88. package/dist/cjs/typography/Abbr.js +4 -5
  89. package/dist/cjs/typography/Anchor.js +2 -2
  90. package/dist/cjs/typography/Copy.js +2 -2
  91. package/dist/cjs/typography/Mark.js +2 -4
  92. package/dist/cjs/typography/Text.js +4 -4
  93. package/dist/cjs/typography/Title.js +2 -2
  94. package/dist/cjs/utils/cloneElement.js +4 -4
  95. package/dist/cjs/utils/getBadgeProps.js +51 -0
  96. package/dist/cjs/utils/getIconProps.js +42 -0
  97. package/dist/cjs/utils/getTooltipProps.js +45 -0
  98. package/dist/esm/components/actionLabel/ActionLabel.js +1 -1
  99. package/dist/esm/components/animations/Animations.js +7 -7
  100. package/dist/esm/components/avatar/Avatar.js +1 -1
  101. package/dist/esm/components/avatar/AvatarGroup.js +1 -1
  102. package/dist/esm/components/badge/Badge.js +7 -28
  103. package/dist/esm/components/breadcrumbs/Breadcrumbs.js +1 -1
  104. package/dist/esm/components/button/Button.js +8 -6
  105. package/dist/esm/components/button/ButtonGroup.js +3 -3
  106. package/dist/esm/components/button/ConfirmButton.js +8 -7
  107. package/dist/esm/components/button/ToggleButtonGroup.js +3 -3
  108. package/dist/esm/components/callout/Callout.js +8 -7
  109. package/dist/esm/components/card/Card.js +4 -4
  110. package/dist/esm/components/card/CardCover.js +1 -1
  111. package/dist/esm/components/card/FlipContent.js +2 -2
  112. package/dist/esm/components/chip/Chip.js +9 -8
  113. package/dist/esm/components/collapsable/Collapsable.js +4 -3
  114. package/dist/esm/components/divider/Divider.js +2 -2
  115. package/dist/esm/components/dropdown/Dropdown.js +19 -17
  116. package/dist/esm/components/empty/EmptyContent.js +1 -1
  117. package/dist/esm/components/icon/Icon.js +4 -17
  118. package/dist/esm/components/media/Media.js +13 -13
  119. package/dist/esm/components/menu/ContextMenu.js +24 -14
  120. package/dist/esm/components/menu/Menu.js +19 -15
  121. package/dist/esm/components/menu/MenuItem.js +5 -4
  122. package/dist/esm/components/meter/Meter.js +1 -1
  123. package/dist/esm/components/navigator/Navigator.js +6 -6
  124. package/dist/esm/components/panel/Panel.js +6 -4
  125. package/dist/esm/components/panel/PanelGroup.js +4 -4
  126. package/dist/esm/components/panel/PanelStack.js +6 -6
  127. package/dist/esm/components/progress/ProgressBar.js +2 -2
  128. package/dist/esm/components/progress/ProgressCircle.js +2 -2
  129. package/dist/esm/components/tabpanel/Tab.js +6 -4
  130. package/dist/esm/components/tabpanel/TabPanel.js +5 -5
  131. package/dist/esm/context/Global.js +3 -52
  132. package/dist/esm/context/NotificationCenter.js +38 -39
  133. package/dist/esm/context/context.js +56 -0
  134. package/dist/esm/core/aside/Aside.js +10 -8
  135. package/dist/esm/core/boundary/ErrorBoundary.js +1 -3
  136. package/dist/esm/core/page/Page.js +4 -1
  137. package/dist/esm/core/responsive/Responsive.js +3 -2
  138. package/dist/esm/core/theme/ThemeProvider.js +1 -1
  139. package/dist/esm/core/viewport/Viewport.js +1 -1
  140. package/dist/esm/hooks/useContextMenu.js +103 -0
  141. package/dist/esm/hooks/useIsDark.js +7 -5
  142. package/dist/esm/hooks/useNavigator.js +3 -3
  143. package/dist/esm/hooks/useOverlayService.js +8 -40
  144. package/dist/esm/hooks/usePropToggle.js +3 -3
  145. package/dist/esm/hooks/useResize.js +9 -7
  146. package/dist/esm/hooks/useResizeObserver.js +6 -6
  147. package/dist/esm/hooks/useStepper.js +2 -6
  148. package/dist/esm/hotkeys/HotKey.js +1 -1
  149. package/dist/esm/hotkeys/HotKeyWrapper.js +9 -12
  150. package/dist/esm/hotkeys/commons.js +1 -1
  151. package/dist/esm/hotkeys/context.js +35 -0
  152. package/dist/esm/index.js +7 -3
  153. package/dist/esm/overlays/alert/Alert.js +7 -6
  154. package/dist/esm/overlays/flyout/Flyout.js +9 -7
  155. package/dist/esm/overlays/message/Message.js +6 -6
  156. package/dist/esm/overlays/modal/Modal.js +6 -4
  157. package/dist/esm/overlays/toast/Toast.js +5 -5
  158. package/dist/esm/overlays/tooltip/Tooltip.js +4 -17
  159. package/dist/esm/typography/Abbr.js +4 -5
  160. package/dist/esm/typography/Anchor.js +2 -2
  161. package/dist/esm/typography/Copy.js +3 -3
  162. package/dist/esm/typography/Mark.js +2 -4
  163. package/dist/esm/typography/Text.js +5 -5
  164. package/dist/esm/typography/Title.js +2 -2
  165. package/dist/esm/utils/cloneElement.js +4 -4
  166. package/dist/esm/utils/getBadgeProps.js +51 -0
  167. package/dist/esm/utils/getIconProps.js +42 -0
  168. package/dist/esm/utils/getTooltipProps.js +45 -0
  169. package/dist/types/components/actionLabel/ActionLabel.d.ts +1 -1
  170. package/dist/types/components/animations/Animations.d.ts +6 -6
  171. package/dist/types/components/avatar/Avatar.d.ts +1 -1
  172. package/dist/types/components/avatar/AvatarGroup.d.ts +1 -1
  173. package/dist/types/components/badge/Badge.d.ts +2 -10
  174. package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +1 -1
  175. package/dist/types/components/button/Button.d.ts +1 -1
  176. package/dist/types/components/button/ButtonGroup.d.ts +1 -1
  177. package/dist/types/components/button/ConfirmButton.d.ts +1 -1
  178. package/dist/types/components/button/ToggleButtonGroup.d.ts +1 -1
  179. package/dist/types/components/callout/Callout.d.ts +7 -3
  180. package/dist/types/components/card/Card.d.ts +2 -2
  181. package/dist/types/components/card/CardCover.d.ts +1 -1
  182. package/dist/types/components/card/FlipContent.d.ts +1 -1
  183. package/dist/types/components/chip/Chip.d.ts +1 -1
  184. package/dist/types/components/collapsable/Collapsable.d.ts +1 -1
  185. package/dist/types/components/divider/Divider.d.ts +1 -1
  186. package/dist/types/components/dropdown/Dropdown.d.ts +7 -3
  187. package/dist/types/components/dropdown/DropdownTool.d.ts +1 -1
  188. package/dist/types/components/empty/EmptyContent.d.ts +3 -3
  189. package/dist/types/components/icon/Icon.d.ts +3 -4
  190. package/dist/types/components/index.d.ts +2 -2
  191. package/dist/types/components/media/Media.d.ts +2 -2
  192. package/dist/types/components/menu/ContextMenu.d.ts +1 -1
  193. package/dist/types/components/menu/Menu.d.ts +1 -1
  194. package/dist/types/components/menu/types.d.ts +1 -1
  195. package/dist/types/components/meter/Meter.d.ts +1 -1
  196. package/dist/types/components/navigator/Navigator.d.ts +1 -1
  197. package/dist/types/components/panel/Panel.d.ts +2 -2
  198. package/dist/types/components/panel/PanelGroup.d.ts +1 -1
  199. package/dist/types/components/panel/PanelStack.d.ts +1 -1
  200. package/dist/types/components/progress/ProgressBar.d.ts +1 -1
  201. package/dist/types/components/progress/ProgressCircle.d.ts +1 -1
  202. package/dist/types/components/tabpanel/Tab.d.ts +1 -1
  203. package/dist/types/components/tabpanel/TabPanel.d.ts +1 -1
  204. package/dist/types/context/Global.d.ts +0 -82
  205. package/dist/types/context/context.d.ts +85 -0
  206. package/dist/types/core/aside/Aside.d.ts +2 -2
  207. package/dist/types/core/responsive/Responsive.d.ts +5 -1
  208. package/dist/types/hooks/useContextMenu.d.ts +10 -0
  209. package/dist/types/hotkeys/HotKeyWrapper.d.ts +0 -9
  210. package/dist/types/hotkeys/context.d.ts +9 -0
  211. package/dist/types/index.d.ts +4 -2
  212. package/dist/types/overlays/alert/Alert.d.ts +2 -2
  213. package/dist/types/overlays/flyout/Flyout.d.ts +2 -2
  214. package/dist/types/overlays/message/Message.d.ts +2 -2
  215. package/dist/types/overlays/modal/Modal.d.ts +2 -2
  216. package/dist/types/overlays/toast/Toast.d.ts +2 -2
  217. package/dist/types/overlays/tooltip/Tooltip.d.ts +0 -3
  218. package/dist/types/types/index.d.ts +2 -2
  219. package/dist/types/typography/Abbr.d.ts +4 -8
  220. package/dist/types/typography/Anchor.d.ts +1 -1
  221. package/dist/types/typography/Copy.d.ts +1 -1
  222. package/dist/types/typography/Mark.d.ts +2 -2
  223. package/dist/types/typography/Text.d.ts +1 -1
  224. package/dist/types/typography/Title.d.ts +1 -1
  225. package/dist/types/utils/getBadgeProps.d.ts +9 -0
  226. package/dist/types/utils/getIconProps.d.ts +2 -0
  227. package/dist/types/utils/getTooltipProps.d.ts +4 -0
  228. package/dist/types/utils/index.d.ts +3 -0
  229. package/package.json +14 -15
  230. package/src/components/actionLabel/ActionLabel.tsx +1 -1
  231. package/src/components/animations/Animations.tsx +6 -6
  232. package/src/components/avatar/Avatar.tsx +1 -1
  233. package/src/components/avatar/AvatarGroup.tsx +1 -1
  234. package/src/components/badge/Badge.tsx +8 -46
  235. package/src/components/breadcrumbs/Breadcrumbs.tsx +1 -1
  236. package/src/components/button/Button.tsx +24 -54
  237. package/src/components/button/ButtonGroup.tsx +1 -1
  238. package/src/components/button/ConfirmButton.tsx +23 -20
  239. package/src/components/button/ToggleButtonGroup.tsx +1 -1
  240. package/src/components/callout/Callout.tsx +14 -19
  241. package/src/components/card/Card.tsx +9 -11
  242. package/src/components/card/CardCover.tsx +1 -1
  243. package/src/components/card/FlipContent.tsx +2 -2
  244. package/src/components/chip/Chip.tsx +16 -33
  245. package/src/components/collapsable/Collapsable.tsx +2 -2
  246. package/src/components/divider/Divider.tsx +1 -1
  247. package/src/components/dropdown/Dropdown.tsx +42 -72
  248. package/src/components/dropdown/DropdownTool.tsx +1 -1
  249. package/src/components/empty/EmptyContent.tsx +3 -3
  250. package/src/components/icon/Icon.tsx +5 -32
  251. package/src/components/index.ts +2 -2
  252. package/src/components/media/Media.tsx +3 -3
  253. package/src/components/menu/ContextMenu.tsx +30 -30
  254. package/src/components/menu/Menu.tsx +32 -61
  255. package/src/components/menu/MenuItem.tsx +9 -28
  256. package/src/components/menu/types.ts +1 -1
  257. package/src/components/meter/Meter.tsx +1 -1
  258. package/src/components/navigator/Navigator.tsx +5 -10
  259. package/src/components/panel/Panel.tsx +13 -54
  260. package/src/components/panel/PanelGroup.tsx +3 -4
  261. package/src/components/panel/PanelStack.tsx +20 -25
  262. package/src/components/progress/ProgressBar.tsx +2 -2
  263. package/src/components/progress/ProgressCircle.tsx +2 -2
  264. package/src/components/tabpanel/Tab.tsx +9 -28
  265. package/src/components/tabpanel/TabPanel.tsx +11 -14
  266. package/src/context/Global.tsx +18 -125
  267. package/src/context/NotificationCenter.tsx +0 -1
  268. package/src/context/context.ts +100 -0
  269. package/src/core/aside/Aside.tsx +18 -55
  270. package/src/core/boundary/ErrorBoundary.tsx +8 -37
  271. package/src/core/page/Page.tsx +3 -5
  272. package/src/core/responsive/Responsive.tsx +10 -34
  273. package/src/core/theme/ThemeProvider.tsx +2 -7
  274. package/src/core/viewport/Viewport.tsx +1 -1
  275. package/src/hooks/useContextMenu.tsx +131 -0
  276. package/src/hooks/useIsDark.ts +7 -5
  277. package/src/hooks/useNavigator.tsx +12 -15
  278. package/src/hooks/useOverlayService.tsx +3 -11
  279. package/src/hooks/usePropToggle.ts +3 -3
  280. package/src/hooks/useResize.ts +14 -17
  281. package/src/hooks/useResizeObserver.ts +21 -21
  282. package/src/hooks/useStepper.tsx +1 -1
  283. package/src/hotkeys/HotKey.tsx +1 -1
  284. package/src/hotkeys/HotKeyWrapper.tsx +81 -105
  285. package/src/hotkeys/commons.ts +2 -0
  286. package/src/hotkeys/context.ts +32 -0
  287. package/src/index.ts +4 -7
  288. package/src/overlays/alert/Alert.tsx +12 -16
  289. package/src/overlays/flyout/Flyout.tsx +32 -69
  290. package/src/overlays/message/Message.tsx +11 -15
  291. package/src/overlays/modal/Modal.tsx +23 -57
  292. package/src/overlays/toast/Toast.tsx +16 -15
  293. package/src/overlays/tooltip/Tooltip.tsx +6 -29
  294. package/src/types/global.d.ts +12 -0
  295. package/src/types/index.ts +2 -2
  296. package/src/typography/Abbr.tsx +11 -39
  297. package/src/typography/Anchor.tsx +1 -1
  298. package/src/typography/Copy.tsx +4 -4
  299. package/src/typography/Mark.tsx +2 -3
  300. package/src/typography/Text.tsx +8 -6
  301. package/src/typography/Title.tsx +1 -1
  302. package/src/utils/getBadgeProps.ts +45 -0
  303. package/src/utils/getIconProps.ts +35 -0
  304. package/src/utils/getTooltipProps.ts +38 -0
  305. package/src/utils/index.ts +3 -0
package/css/reset/_reset.css CHANGED
@@ -29,9 +29,10 @@
29
29
  margin: 0;
30
30
  padding: 0;
31
31
 
32
+ vertical-align: baseline;
33
+
32
34
  -webkit-font-smoothing: antialiased;
33
35
  -moz-osx-font-smoothing: grayscale;
34
- vertical-align: baseline;
35
36
  }
36
37
 
37
38
  :root {
@@ -83,11 +84,7 @@
83
84
  }
84
85
 
85
86
  [class*="ring"] {
86
- --tw-ring-color: color-mix(
87
- in oklab,
88
- var(--fabric-bg) 65%,
89
- var(--color-tint)
90
- );
87
+ --tw-ring-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
91
88
  }
92
89
 
93
90
  body {
@@ -103,35 +100,19 @@
103
100
  }
104
101
 
105
102
  ::-webkit-scrollbar-track {
106
- background-color: color-mix(
107
- in lab,
108
- var(--fabric-bg) 72%,
109
- var(--color-tint)
110
- );
103
+ background-color: color-mix(in lab, var(--fabric-bg) 72%, var(--color-tint));
111
104
  }
112
105
 
113
106
  ::-webkit-scrollbar-thumb {
114
- background-color: color-mix(
115
- in lab,
116
- var(--fabric-bg) 35%,
117
- var(--color-tint)
118
- );
119
-
120
- &:hover {
121
- background-color: color-mix(
122
- in lab,
123
- var(--fabric-text) 50%,
124
- var(--color-tint)
125
- );
126
- }
107
+ background-color: color-mix(in lab, var(--fabric-bg) 35%, var(--color-tint));
108
+ }
127
109
 
128
- &:active {
129
- background-color: color-mix(
130
- in lab,
131
- var(--fabric-bg) 50%,
132
- var(--fabric-text)
133
- );
134
- }
110
+ :hover::-webkit-scrollbar-thumb {
111
+ background-color: color-mix(in lab, var(--fabric-text) 50%, var(--color-tint));
112
+ }
113
+
114
+ :active::-webkit-scrollbar-thumb {
115
+ background-color: color-mix(in lab, var(--fabric-bg) 50%, var(--fabric-text));
135
116
  }
136
117
 
137
118
  ::-webkit-scrollbar-corner {
@@ -175,13 +156,11 @@
175
156
 
176
157
  height: auto;
177
158
  margin: 0.25rem 0;
159
+ border: 0;
160
+ border-top: 3px solid color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
161
+ border-bottom: 2px solid color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
178
162
 
179
163
  background: none;
180
- border: 0;
181
- border-top: 3px solid
182
- color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
183
- border-bottom: 2px solid
184
- color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
185
164
 
186
165
  &.vertical {
187
166
  transform: scaleX(0.5);
@@ -189,12 +168,9 @@
189
168
  display: inline-block;
190
169
 
191
170
  margin: 0 0.25rem;
192
-
193
171
  border: 0;
194
- border-inline-start: 3px solid
195
- color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
196
- border-inline-end: 2px solid
197
- color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
172
+ border-inline-start: 3px solid color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
173
+ border-inline-end: 2px solid color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
198
174
  }
199
175
  }
200
176
 
@@ -215,6 +191,25 @@
215
191
  margin-inline: auto;
216
192
  }
217
193
 
194
+ .scroll-hide {
195
+ &::-webkit-scrollbar {
196
+ width: 0;
197
+ height: 0;
198
+ }
199
+ }
200
+
201
+ .scroll-thin {
202
+ &::-webkit-scrollbar {
203
+ width: 3px;
204
+ height: 3px;
205
+ }
206
+ }
207
+
208
+ .overflow-auto,
209
+ .overflow-scroll {
210
+ scrollbar-gutter: stable both-edges;
211
+ }
212
+
218
213
  p,
219
214
  pre,
220
215
  h1,