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