@fluentui/react-slider 9.4.6 → 9.5.0

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 (6) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/lib/components/Slider/useSliderStyles.styles.raw.js +274 -0
  3. package/lib/components/Slider/useSliderStyles.styles.raw.js.map +1 -0
  4. package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js +293 -0
  5. package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js.map +1 -0
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui/react-slider
2
2
 
3
- This log was last generated on Fri, 04 Jul 2025 10:00:07 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Jul 2025 13:45:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.5.0)
8
+
9
+ Thu, 17 Jul 2025 13:45:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.4.7..@fluentui/react-slider_v9.5.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
17
+
18
+ ## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.4.7)
19
+
20
+ Fri, 11 Jul 2025 15:59:24 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.4.6..@fluentui/react-slider_v9.4.7)
22
+
23
+ ### Patches
24
+
25
+ - Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
26
+
7
27
  ## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.4.6)
8
28
 
9
- Fri, 04 Jul 2025 10:00:07 GMT
29
+ Fri, 04 Jul 2025 10:02:46 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.4.5..@fluentui/react-slider_v9.4.6)
11
31
 
12
32
  ### Patches
package/lib/components/Slider/useSliderStyles.styles.raw.js ADDED
@@ -0,0 +1,274 @@
1
+ import { makeStyles, mergeClasses } from '@griffel/react';
2
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
+ import { tokens } from '@fluentui/react-theme';
4
+ export const sliderClassNames = {
5
+ root: 'fui-Slider',
6
+ rail: 'fui-Slider__rail',
7
+ thumb: 'fui-Slider__thumb',
8
+ input: 'fui-Slider__input'
9
+ };
10
+ // Internal CSS variables
11
+ const thumbPositionVar = `--fui-Slider__thumb--position`;
12
+ export const sliderCSSVars = {
13
+ sliderDirectionVar: `--fui-Slider--direction`,
14
+ sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,
15
+ sliderProgressVar: `--fui-Slider--progress`,
16
+ sliderProgressColorVar: `--fui-Slider__progress--color`,
17
+ sliderRailSizeVar: `--fui-Slider__rail--size`,
18
+ sliderRailColorVar: `--fui-Slider__rail--color`,
19
+ sliderStepsPercentVar: `--fui-Slider--steps-percent`,
20
+ sliderThumbColorVar: `--fui-Slider__thumb--color`,
21
+ sliderThumbSizeVar: `--fui-Slider__thumb--size`
22
+ };
23
+ const { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars;
24
+ /**
25
+ * Styles for the root slot
26
+ */ const useRootStyles = makeStyles({
27
+ root: {
28
+ position: 'relative',
29
+ display: 'inline-grid',
30
+ touchAction: 'none',
31
+ alignItems: 'center',
32
+ justifyItems: 'center'
33
+ },
34
+ small: {
35
+ [sliderThumbSizeVar]: '16px',
36
+ [sliderInnerThumbRadiusVar]: '5px',
37
+ [sliderRailSizeVar]: '2px',
38
+ minHeight: '24px'
39
+ },
40
+ medium: {
41
+ [sliderThumbSizeVar]: '20px',
42
+ [sliderInnerThumbRadiusVar]: '6px',
43
+ [sliderRailSizeVar]: '4px',
44
+ minHeight: '32px'
45
+ },
46
+ horizontal: {
47
+ minWidth: '120px',
48
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
49
+ gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,
50
+ gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`
51
+ },
52
+ vertical: {
53
+ minHeight: '120px',
54
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
55
+ gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,
56
+ gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`
57
+ },
58
+ enabled: {
59
+ [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,
60
+ [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,
61
+ [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,
62
+ ':hover': {
63
+ [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,
64
+ [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover
65
+ },
66
+ ':active': {
67
+ [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,
68
+ [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed
69
+ },
70
+ '@media (forced-colors: active)': {
71
+ [sliderRailColorVar]: 'CanvasText',
72
+ [sliderThumbColorVar]: 'Highlight',
73
+ [sliderProgressColorVar]: 'Highlight',
74
+ ':hover': {
75
+ [sliderThumbColorVar]: 'Highlight',
76
+ [sliderProgressColorVar]: 'Highlight'
77
+ }
78
+ }
79
+ },
80
+ disabled: {
81
+ [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,
82
+ [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,
83
+ [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,
84
+ '@media (forced-colors: active)': {
85
+ [sliderRailColorVar]: 'GrayText',
86
+ [sliderCSSVars.sliderThumbColorVar]: 'GrayText',
87
+ [sliderCSSVars.sliderProgressColorVar]: 'GrayText'
88
+ }
89
+ },
90
+ focusIndicatorHorizontal: createFocusOutlineStyle({
91
+ selector: 'focus-within',
92
+ style: {
93
+ outlineOffset: {
94
+ top: '-2px',
95
+ bottom: '-2px',
96
+ left: '-4px',
97
+ right: '-4px'
98
+ }
99
+ }
100
+ }),
101
+ focusIndicatorVertical: createFocusOutlineStyle({
102
+ selector: 'focus-within',
103
+ style: {
104
+ outlineOffset: {
105
+ top: '-2px',
106
+ bottom: '-2px',
107
+ left: '4px',
108
+ right: '4px'
109
+ }
110
+ }
111
+ })
112
+ });
113
+ /**
114
+ * Styles for the rail slot
115
+ */ const useRailStyles = makeStyles({
116
+ rail: {
117
+ borderRadius: tokens.borderRadiusXLarge,
118
+ pointerEvents: 'none',
119
+ gridRowStart: '2',
120
+ gridRowEnd: '2',
121
+ gridColumnStart: '2',
122
+ gridColumnEnd: '2',
123
+ position: 'relative',
124
+ forcedColorAdjust: 'none',
125
+ // Background gradient represents the progress of the slider
126
+ backgroundImage: `linear-gradient(
127
+ var(${sliderDirectionVar}),
128
+ var(${sliderProgressColorVar}) 0%,
129
+ var(${sliderProgressColorVar}) var(${sliderProgressVar}),
130
+ var(${sliderRailColorVar}) var(${sliderProgressVar})
131
+ )`,
132
+ outlineWidth: '1px',
133
+ outlineStyle: 'solid',
134
+ outlineColor: tokens.colorTransparentStroke,
135
+ '::before': {
136
+ content: "''",
137
+ position: 'absolute',
138
+ // Repeating gradient represents the steps if provided
139
+ backgroundImage: `repeating-linear-gradient(
140
+ var(${sliderDirectionVar}),
141
+ #0000 0%,
142
+ #0000 calc(var(${sliderStepsPercentVar}) - 1px),
143
+ ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),
144
+ ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})
145
+ )`,
146
+ // force steps to use HighlightText for high contrast mode
147
+ '@media (forced-colors: active)': {
148
+ backgroundImage: `repeating-linear-gradient(
149
+ var(${sliderDirectionVar}),
150
+ #0000 0%,
151
+ #0000 calc(var(${sliderStepsPercentVar}) - 1px),
152
+ HighlightText calc(var(${sliderStepsPercentVar}) - 1px),
153
+ HighlightText var(${sliderStepsPercentVar})
154
+ )`
155
+ }
156
+ }
157
+ },
158
+ horizontal: {
159
+ width: '100%',
160
+ height: `var(${sliderRailSizeVar})`,
161
+ '::before': {
162
+ left: '-1px',
163
+ right: '-1px',
164
+ height: `var(${sliderRailSizeVar})`
165
+ }
166
+ },
167
+ vertical: {
168
+ width: `var(${sliderRailSizeVar})`,
169
+ height: '100%',
170
+ '::before': {
171
+ width: `var(${sliderRailSizeVar})`,
172
+ top: '-1px',
173
+ bottom: '-1px'
174
+ }
175
+ }
176
+ });
177
+ /**
178
+ * Styles for the thumb slot
179
+ */ const useThumbStyles = makeStyles({
180
+ thumb: {
181
+ // Ensure the thumb stays within the track boundaries.
182
+ // When the value is at 0% or 100%, the distance from the track edge
183
+ // to the thumb center equals the inner thumb radius.
184
+ [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,
185
+ gridRowStart: '2',
186
+ gridRowEnd: '2',
187
+ gridColumnStart: '2',
188
+ gridColumnEnd: '2',
189
+ position: 'absolute',
190
+ width: `var(${sliderThumbSizeVar})`,
191
+ height: `var(${sliderThumbSizeVar})`,
192
+ pointerEvents: 'none',
193
+ outlineStyle: 'none',
194
+ forcedColorAdjust: 'none',
195
+ borderRadius: tokens.borderRadiusCircular,
196
+ boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
197
+ backgroundColor: `var(${sliderThumbColorVar})`,
198
+ '::before': {
199
+ position: 'absolute',
200
+ top: '0px',
201
+ left: '0px',
202
+ bottom: '0px',
203
+ right: '0px',
204
+ borderRadius: tokens.borderRadiusCircular,
205
+ boxSizing: 'border-box',
206
+ content: "''",
207
+ border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`
208
+ }
209
+ },
210
+ disabled: {
211
+ '::before': {
212
+ border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`
213
+ }
214
+ },
215
+ horizontal: {
216
+ transform: 'translateX(-50%)',
217
+ left: `var(${thumbPositionVar})`
218
+ },
219
+ vertical: {
220
+ transform: 'translateY(50%)',
221
+ bottom: `var(${thumbPositionVar})`
222
+ }
223
+ });
224
+ /**
225
+ * Styles for the Input slot
226
+ */ const useInputStyles = makeStyles({
227
+ input: {
228
+ cursor: 'pointer',
229
+ opacity: 0,
230
+ gridRowStart: '1',
231
+ gridRowEnd: '-1',
232
+ gridColumnStart: '1',
233
+ gridColumnEnd: '-1',
234
+ padding: '0',
235
+ margin: '0'
236
+ },
237
+ disabled: {
238
+ cursor: 'default'
239
+ },
240
+ horizontal: {
241
+ height: `var(${sliderThumbSizeVar})`,
242
+ width: '100%'
243
+ },
244
+ vertical: {
245
+ height: '100%',
246
+ width: `var(${sliderThumbSizeVar})`,
247
+ // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.
248
+ // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means
249
+ // that vertical controls should also support `writing-mode: vertical-lr`.
250
+ '@supports (writing-mode: sideways-lr)': {
251
+ writingMode: 'vertical-lr',
252
+ direction: 'rtl'
253
+ },
254
+ // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs
255
+ '@supports not (writing-mode: sideways-lr)': {
256
+ WebkitAppearance: 'slider-vertical'
257
+ }
258
+ }
259
+ });
260
+ /**
261
+ * Apply styling to the Slider slots based on the state
262
+ */ export const useSliderStyles_unstable = (state)=>{
263
+ 'use no memo';
264
+ const rootStyles = useRootStyles();
265
+ const railStyles = useRailStyles();
266
+ const thumbStyles = useThumbStyles();
267
+ const inputStyles = useInputStyles();
268
+ const isVertical = state.vertical;
269
+ state.root.className = mergeClasses(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
270
+ state.rail.className = mergeClasses(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
271
+ state.thumb.className = mergeClasses(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
272
+ state.input.className = mergeClasses(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
273
+ return state;
274
+ };
package/lib/components/Slider/useSliderStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n borderRadius: tokens.borderRadiusXLarge,\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n // Ensure the thumb stays within the track boundaries.\n // When the value is at 0% or 100%, the distance from the track edge\n // to the thumb center equals the inner thumb radius.\n [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createFocusOutlineStyle","tokens","sliderClassNames","root","rail","thumb","input","thumbPositionVar","sliderCSSVars","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","useSliderStyles_unstable","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js ADDED
@@ -0,0 +1,293 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ sliderCSSVars: function() {
13
+ return sliderCSSVars;
14
+ },
15
+ sliderClassNames: function() {
16
+ return sliderClassNames;
17
+ },
18
+ useSliderStyles_unstable: function() {
19
+ return useSliderStyles_unstable;
20
+ }
21
+ });
22
+ const _react = require("@griffel/react");
23
+ const _reacttabster = require("@fluentui/react-tabster");
24
+ const _reacttheme = require("@fluentui/react-theme");
25
+ const sliderClassNames = {
26
+ root: 'fui-Slider',
27
+ rail: 'fui-Slider__rail',
28
+ thumb: 'fui-Slider__thumb',
29
+ input: 'fui-Slider__input'
30
+ };
31
+ // Internal CSS variables
32
+ const thumbPositionVar = `--fui-Slider__thumb--position`;
33
+ const sliderCSSVars = {
34
+ sliderDirectionVar: `--fui-Slider--direction`,
35
+ sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,
36
+ sliderProgressVar: `--fui-Slider--progress`,
37
+ sliderProgressColorVar: `--fui-Slider__progress--color`,
38
+ sliderRailSizeVar: `--fui-Slider__rail--size`,
39
+ sliderRailColorVar: `--fui-Slider__rail--color`,
40
+ sliderStepsPercentVar: `--fui-Slider--steps-percent`,
41
+ sliderThumbColorVar: `--fui-Slider__thumb--color`,
42
+ sliderThumbSizeVar: `--fui-Slider__thumb--size`
43
+ };
44
+ const { sliderDirectionVar, sliderInnerThumbRadiusVar, sliderProgressVar, sliderProgressColorVar, sliderRailSizeVar, sliderRailColorVar, sliderStepsPercentVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars;
45
+ /**
46
+ * Styles for the root slot
47
+ */ const useRootStyles = (0, _react.makeStyles)({
48
+ root: {
49
+ position: 'relative',
50
+ display: 'inline-grid',
51
+ touchAction: 'none',
52
+ alignItems: 'center',
53
+ justifyItems: 'center'
54
+ },
55
+ small: {
56
+ [sliderThumbSizeVar]: '16px',
57
+ [sliderInnerThumbRadiusVar]: '5px',
58
+ [sliderRailSizeVar]: '2px',
59
+ minHeight: '24px'
60
+ },
61
+ medium: {
62
+ [sliderThumbSizeVar]: '20px',
63
+ [sliderInnerThumbRadiusVar]: '6px',
64
+ [sliderRailSizeVar]: '4px',
65
+ minHeight: '32px'
66
+ },
67
+ horizontal: {
68
+ minWidth: '120px',
69
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
70
+ gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,
71
+ gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`
72
+ },
73
+ vertical: {
74
+ minHeight: '120px',
75
+ // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
76
+ gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,
77
+ gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`
78
+ },
79
+ enabled: {
80
+ [sliderRailColorVar]: _reacttheme.tokens.colorNeutralStrokeAccessible,
81
+ [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackground,
82
+ [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackground,
83
+ ':hover': {
84
+ [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
85
+ [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundHover
86
+ },
87
+ ':active': {
88
+ [sliderThumbColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
89
+ [sliderProgressColorVar]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed
90
+ },
91
+ '@media (forced-colors: active)': {
92
+ [sliderRailColorVar]: 'CanvasText',
93
+ [sliderThumbColorVar]: 'Highlight',
94
+ [sliderProgressColorVar]: 'Highlight',
95
+ ':hover': {
96
+ [sliderThumbColorVar]: 'Highlight',
97
+ [sliderProgressColorVar]: 'Highlight'
98
+ }
99
+ }
100
+ },
101
+ disabled: {
102
+ [sliderThumbColorVar]: _reacttheme.tokens.colorNeutralForegroundDisabled,
103
+ [sliderRailColorVar]: _reacttheme.tokens.colorNeutralBackgroundDisabled,
104
+ [sliderProgressColorVar]: _reacttheme.tokens.colorNeutralForegroundDisabled,
105
+ '@media (forced-colors: active)': {
106
+ [sliderRailColorVar]: 'GrayText',
107
+ [sliderCSSVars.sliderThumbColorVar]: 'GrayText',
108
+ [sliderCSSVars.sliderProgressColorVar]: 'GrayText'
109
+ }
110
+ },
111
+ focusIndicatorHorizontal: (0, _reacttabster.createFocusOutlineStyle)({
112
+ selector: 'focus-within',
113
+ style: {
114
+ outlineOffset: {
115
+ top: '-2px',
116
+ bottom: '-2px',
117
+ left: '-4px',
118
+ right: '-4px'
119
+ }
120
+ }
121
+ }),
122
+ focusIndicatorVertical: (0, _reacttabster.createFocusOutlineStyle)({
123
+ selector: 'focus-within',
124
+ style: {
125
+ outlineOffset: {
126
+ top: '-2px',
127
+ bottom: '-2px',
128
+ left: '4px',
129
+ right: '4px'
130
+ }
131
+ }
132
+ })
133
+ });
134
+ /**
135
+ * Styles for the rail slot
136
+ */ const useRailStyles = (0, _react.makeStyles)({
137
+ rail: {
138
+ borderRadius: _reacttheme.tokens.borderRadiusXLarge,
139
+ pointerEvents: 'none',
140
+ gridRowStart: '2',
141
+ gridRowEnd: '2',
142
+ gridColumnStart: '2',
143
+ gridColumnEnd: '2',
144
+ position: 'relative',
145
+ forcedColorAdjust: 'none',
146
+ // Background gradient represents the progress of the slider
147
+ backgroundImage: `linear-gradient(
148
+ var(${sliderDirectionVar}),
149
+ var(${sliderProgressColorVar}) 0%,
150
+ var(${sliderProgressColorVar}) var(${sliderProgressVar}),
151
+ var(${sliderRailColorVar}) var(${sliderProgressVar})
152
+ )`,
153
+ outlineWidth: '1px',
154
+ outlineStyle: 'solid',
155
+ outlineColor: _reacttheme.tokens.colorTransparentStroke,
156
+ '::before': {
157
+ content: "''",
158
+ position: 'absolute',
159
+ // Repeating gradient represents the steps if provided
160
+ backgroundImage: `repeating-linear-gradient(
161
+ var(${sliderDirectionVar}),
162
+ #0000 0%,
163
+ #0000 calc(var(${sliderStepsPercentVar}) - 1px),
164
+ ${_reacttheme.tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),
165
+ ${_reacttheme.tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})
166
+ )`,
167
+ // force steps to use HighlightText for high contrast mode
168
+ '@media (forced-colors: active)': {
169
+ backgroundImage: `repeating-linear-gradient(
170
+ var(${sliderDirectionVar}),
171
+ #0000 0%,
172
+ #0000 calc(var(${sliderStepsPercentVar}) - 1px),
173
+ HighlightText calc(var(${sliderStepsPercentVar}) - 1px),
174
+ HighlightText var(${sliderStepsPercentVar})
175
+ )`
176
+ }
177
+ }
178
+ },
179
+ horizontal: {
180
+ width: '100%',
181
+ height: `var(${sliderRailSizeVar})`,
182
+ '::before': {
183
+ left: '-1px',
184
+ right: '-1px',
185
+ height: `var(${sliderRailSizeVar})`
186
+ }
187
+ },
188
+ vertical: {
189
+ width: `var(${sliderRailSizeVar})`,
190
+ height: '100%',
191
+ '::before': {
192
+ width: `var(${sliderRailSizeVar})`,
193
+ top: '-1px',
194
+ bottom: '-1px'
195
+ }
196
+ }
197
+ });
198
+ /**
199
+ * Styles for the thumb slot
200
+ */ const useThumbStyles = (0, _react.makeStyles)({
201
+ thumb: {
202
+ // Ensure the thumb stays within the track boundaries.
203
+ // When the value is at 0% or 100%, the distance from the track edge
204
+ // to the thumb center equals the inner thumb radius.
205
+ [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,
206
+ gridRowStart: '2',
207
+ gridRowEnd: '2',
208
+ gridColumnStart: '2',
209
+ gridColumnEnd: '2',
210
+ position: 'absolute',
211
+ width: `var(${sliderThumbSizeVar})`,
212
+ height: `var(${sliderThumbSizeVar})`,
213
+ pointerEvents: 'none',
214
+ outlineStyle: 'none',
215
+ forcedColorAdjust: 'none',
216
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
217
+ boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${_reacttheme.tokens.colorNeutralBackground1} inset`,
218
+ backgroundColor: `var(${sliderThumbColorVar})`,
219
+ '::before': {
220
+ position: 'absolute',
221
+ top: '0px',
222
+ left: '0px',
223
+ bottom: '0px',
224
+ right: '0px',
225
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
226
+ boxSizing: 'border-box',
227
+ content: "''",
228
+ border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${_reacttheme.tokens.colorNeutralStroke1}`
229
+ }
230
+ },
231
+ disabled: {
232
+ '::before': {
233
+ border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${_reacttheme.tokens.colorNeutralForegroundDisabled}`
234
+ }
235
+ },
236
+ horizontal: {
237
+ transform: 'translateX(-50%)',
238
+ left: `var(${thumbPositionVar})`
239
+ },
240
+ vertical: {
241
+ transform: 'translateY(50%)',
242
+ bottom: `var(${thumbPositionVar})`
243
+ }
244
+ });
245
+ /**
246
+ * Styles for the Input slot
247
+ */ const useInputStyles = (0, _react.makeStyles)({
248
+ input: {
249
+ cursor: 'pointer',
250
+ opacity: 0,
251
+ gridRowStart: '1',
252
+ gridRowEnd: '-1',
253
+ gridColumnStart: '1',
254
+ gridColumnEnd: '-1',
255
+ padding: '0',
256
+ margin: '0'
257
+ },
258
+ disabled: {
259
+ cursor: 'default'
260
+ },
261
+ horizontal: {
262
+ height: `var(${sliderThumbSizeVar})`,
263
+ width: '100%'
264
+ },
265
+ vertical: {
266
+ height: '100%',
267
+ width: `var(${sliderThumbSizeVar})`,
268
+ // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.
269
+ // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means
270
+ // that vertical controls should also support `writing-mode: vertical-lr`.
271
+ '@supports (writing-mode: sideways-lr)': {
272
+ writingMode: 'vertical-lr',
273
+ direction: 'rtl'
274
+ },
275
+ // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs
276
+ '@supports not (writing-mode: sideways-lr)': {
277
+ WebkitAppearance: 'slider-vertical'
278
+ }
279
+ }
280
+ });
281
+ const useSliderStyles_unstable = (state)=>{
282
+ 'use no memo';
283
+ const rootStyles = useRootStyles();
284
+ const railStyles = useRailStyles();
285
+ const thumbStyles = useThumbStyles();
286
+ const inputStyles = useInputStyles();
287
+ const isVertical = state.vertical;
288
+ state.root.className = (0, _react.mergeClasses)(sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
289
+ state.rail.className = (0, _react.mergeClasses)(sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
290
+ state.thumb.className = (0, _react.mergeClasses)(sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
291
+ state.input.className = (0, _react.mergeClasses)(sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
292
+ return state;
293
+ };
package/lib-commonjs/components/Slider/useSliderStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Slider/useSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n root: 'fui-Slider',\n rail: 'fui-Slider__rail',\n thumb: 'fui-Slider__thumb',\n input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbPositionVar = `--fui-Slider__thumb--position`;\n\nexport const sliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderInnerThumbRadiusVar: `--fui-Slider__inner-thumb--radius`,\n sliderProgressVar: `--fui-Slider--progress`,\n sliderProgressColorVar: `--fui-Slider__progress--color`,\n sliderRailSizeVar: `--fui-Slider__rail--size`,\n sliderRailColorVar: `--fui-Slider__rail--color`,\n sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n sliderThumbColorVar: `--fui-Slider__thumb--color`,\n sliderThumbSizeVar: `--fui-Slider__thumb--size`,\n};\n\nconst {\n sliderDirectionVar,\n sliderInnerThumbRadiusVar,\n sliderProgressVar,\n sliderProgressColorVar,\n sliderRailSizeVar,\n sliderRailColorVar,\n sliderStepsPercentVar,\n sliderThumbColorVar,\n sliderThumbSizeVar,\n} = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n },\n\n small: {\n [sliderThumbSizeVar]: '16px',\n [sliderInnerThumbRadiusVar]: '5px',\n [sliderRailSizeVar]: '2px',\n minHeight: '24px',\n },\n\n medium: {\n [sliderThumbSizeVar]: '20px',\n [sliderInnerThumbRadiusVar]: '6px',\n [sliderRailSizeVar]: '4px',\n minHeight: '32px',\n },\n\n horizontal: {\n minWidth: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n },\n\n vertical: {\n minHeight: '120px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,\n gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,\n },\n\n enabled: {\n [sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackground,\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackground,\n ':hover': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n },\n ':active': {\n [sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n [sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n },\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'CanvasText',\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n ':hover': {\n [sliderThumbColorVar]: 'Highlight',\n [sliderProgressColorVar]: 'Highlight',\n },\n },\n },\n\n disabled: {\n [sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,\n [sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,\n [sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n [sliderRailColorVar]: 'GrayText',\n [sliderCSSVars.sliderThumbColorVar]: 'GrayText',\n [sliderCSSVars.sliderProgressColorVar]: 'GrayText',\n },\n },\n\n focusIndicatorHorizontal: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '-4px', right: '-4px' } },\n }),\n\n focusIndicatorVertical: createFocusOutlineStyle({\n selector: 'focus-within',\n style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '4px', right: '4px' } },\n }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n rail: {\n borderRadius: tokens.borderRadiusXLarge,\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n // Background gradient represents the progress of the slider\n backgroundImage: `linear-gradient(\n var(${sliderDirectionVar}),\n var(${sliderProgressColorVar}) 0%,\n var(${sliderProgressColorVar}) var(${sliderProgressVar}),\n var(${sliderRailColorVar}) var(${sliderProgressVar})\n )`,\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n // Repeating gradient represents the steps if provided\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n )`,\n // force steps to use HighlightText for high contrast mode\n '@media (forced-colors: active)': {\n backgroundImage: `repeating-linear-gradient(\n var(${sliderDirectionVar}),\n #0000 0%,\n #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n HighlightText var(${sliderStepsPercentVar})\n )`,\n },\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${sliderRailSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${sliderRailSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${sliderRailSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${sliderRailSizeVar})`,\n top: '-1px',\n bottom: '-1px',\n },\n },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: {\n // Ensure the thumb stays within the track boundaries.\n // When the value is at 0% or 100%, the distance from the track edge\n // to the thumb center equals the inner thumb radius.\n [`${thumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${sliderThumbSizeVar})`,\n height: `var(${sliderThumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n backgroundColor: `var(${sliderThumbColorVar})`,\n '::before': {\n position: 'absolute',\n top: '0px',\n left: '0px',\n bottom: '0px',\n right: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,\n },\n },\n disabled: {\n '::before': {\n border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`,\n },\n },\n horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${thumbPositionVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${thumbPositionVar})`,\n },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n },\n disabled: {\n cursor: 'default',\n },\n horizontal: {\n height: `var(${sliderThumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${sliderThumbSizeVar})`,\n // Workaround to check if the browser supports `writing-mode: vertical-lr` for inputs and input[type=range] specifically.\n // We check if the `writing-mode: sideways-lr` is supported as it's newer feature and it means\n // that vertical controls should also support `writing-mode: vertical-lr`.\n '@supports (writing-mode: sideways-lr)': {\n writingMode: 'vertical-lr',\n direction: 'rtl',\n },\n // Fallback for browsers that don't support `writing-mode: vertical-lr` for inputs\n '@supports not (writing-mode: sideways-lr)': {\n WebkitAppearance: 'slider-vertical',\n },\n },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n sliderClassNames.root,\n rootStyles.root,\n isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n rootStyles[state.size!],\n isVertical ? rootStyles.vertical : rootStyles.horizontal,\n state.disabled ? rootStyles.disabled : rootStyles.enabled,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n sliderClassNames.rail,\n railStyles.rail,\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n sliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.disabled && thumbStyles.disabled,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n sliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.disabled && inputStyles.disabled,\n state.input.className,\n );\n\n return state;\n};\n"],"names":["sliderCSSVars","sliderClassNames","useSliderStyles_unstable","root","rail","thumb","input","thumbPositionVar","sliderDirectionVar","sliderInnerThumbRadiusVar","sliderProgressVar","sliderProgressColorVar","sliderRailSizeVar","sliderRailColorVar","sliderStepsPercentVar","sliderThumbColorVar","sliderThumbSizeVar","useRootStyles","makeStyles","position","display","touchAction","alignItems","justifyItems","small","minHeight","medium","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","enabled","tokens","colorNeutralStrokeAccessible","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","disabled","colorNeutralForegroundDisabled","colorNeutralBackgroundDisabled","focusIndicatorHorizontal","createFocusOutlineStyle","selector","style","outlineOffset","top","bottom","left","right","focusIndicatorVertical","useRailStyles","borderRadius","borderRadiusXLarge","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","backgroundImage","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","colorNeutralBackground1","width","height","useThumbStyles","borderRadiusCircular","boxShadow","backgroundColor","boxSizing","border","colorNeutralStroke1","transform","useInputStyles","cursor","opacity","padding","margin","writingMode","direction","WebkitAppearance","state","rootStyles","railStyles","thumbStyles","inputStyles","isVertical","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-slider",
3
- "version": "9.4.6",
3
+ "version": "9.5.0",
4
4
  "description": "Fluent UI React Slider component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,10 +19,10 @@
19
19
  "@fluentui/scripts-api-extractor": "*"
20
20
  },
21
21
  "dependencies": {
22
- "@fluentui/react-field": "^9.3.6",
22
+ "@fluentui/react-field": "^9.4.0",
23
23
  "@fluentui/react-jsx-runtime": "^9.1.2",
24
24
  "@fluentui/react-shared-contexts": "^9.24.0",
25
- "@fluentui/react-tabster": "^9.25.3",
25
+ "@fluentui/react-tabster": "^9.26.0",
26
26
  "@fluentui/react-theme": "^9.1.24",
27
27
  "@fluentui/react-utilities": "^9.22.0",
28
28
  "@griffel/react": "^1.5.22",